/* ========== Styles ========== */


/* Add all your page styles here, or any custom overrides to html, layout, variables, fonts, or icons. But try and do global changes or default styles for the web application only in there. */



/* ========== Exigo Admin Overrides (only if using admin styles)========== */

/* Note: Override all old Admin CSS in this section that is still styling the HTML. As of 2026, this was not needed as we removed all Admin stylesheets from all Element areas. But these remain in case we need to integrate stuff like old Portl.js sliders, tables, bootstrap 3 tabs, etc. (I do not recommend it!) I kept these old Admin HTML wrappers and classes in place below in case the portal.js system manipulates or references them, in the future. Ive also gutted all basic formatting and maximize dimensions to hold the new designs. - MS */

#body .frameset,
#body form,
#body .frame, 
#body .frame-body {

    display: block !important;

    /* ALERT: When using the old Admin CSS styles, be  sure to disable all the Admin's nested flexboxes having only one box inside a parent! */

    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    /*flex-direction: column !important;*/
    width: auto !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important; /* added "viewport" unit dimensions which forces the old admin boxes to the devices full viewport */
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Uncomment these borders to test old Admin boxes to make sure they are wrapping around all new child content correctly, inclduing the layout grid. - MS */

#body .frameset
{
    /*border:3px solid orange;*/
}
#body form
{
    /*border:3px solid green;*/
}
#body .frame
{
    /*border:3px solid red;*/
}
#body .frame-body
{
    /*border:3px solid black;*/
}





/* ========== Special Browser Global HTML Fixes ========== */

/* FORM CONTROL DEFAULTS: These extra overides on all inputs just makes sure they are reset to basic defaults needed across Elements. You can override these as needed. */

#body input,
#body input:visited,
#body input:hover,
#body input:focus,
#body input:active
{
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  overflow: visible;
  text-transform: none;
  background: transparent;
  cursor: pointer;
  /*letter-spacing: 0;*/
  /* added this as chrome is now changing certain pseudo classes on sub-features of inputs */
  padding-block: 0;
  padding-inline: 0;
  line-height: normal; /* added */
}



/* The old Admin Portal.css changes the font-family directly using specialized classes and elements. We will just change the elements for now, in the rare case old portal.js is used and starts manipulating these styles. */


h1, h2, h3, h4, form .form-title, form legend, .form .form-title, .form legend, h5, .list-group .list-group-item.list-group-header, h6
{
    /* Use "inherit" to remove any styles and let the element and classes inherit the nature values coming off the body/html tags. */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    word-spacing: inherit;
    letter-spacing: inherit;
    color: inherit;
}
  


/* CHROME BROWSER HACK : This partially solves a Chrome browser bug where using the autofill input attribute then choosing a text choice from the browser popup displays a font in the wrong family, size, and with a blue background! This fixes the blue background and font size, but not the font family which cannot be modified as of 4/2024. This should remove the ugly gray or colored box that overlays all input fields when the "autocomplete=on" attribute is added to input text fields, and the Chrome browser pops up its own text choices from user's previous inputs. This creates a nasty gray filler on the text input. But this hack removes it. - MStokely */

input:-webkit-autofill,
input:-webkit-autofill:link,
input:-webkit-autofill:visited,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:focus-visible,
input:-webkit-autofill:focus-within,
input:-webkit-autofill:active {
  -webkit-background-clip: text !important;
  /*-webkit-box-shadow: 0 0 0 1000px white inset !important;*//* hack to destroy chromes nasty blue autofill bg color */
  /*-webkit-text-fill-color: inherit !important;*/
  border-radius: 0.5rem !important;
  /*-webkit-background: transparent !important;*/
  /*background: transparent !important;*/

}











/* ========== Grids &  Layouts ========== */

/* 
    
IMPORTANT:
    
    1. These override the default grid in layout.css so you dont have to recreate grid CSS every time. Allows you to fully customize a base grid with header, asides, main, and footer. Most of these styles may be reused across pages.
    
    2. Elements Now Uses a Grid with Main Panel Only! (no headere, footer, or asides are used)

    3. Delete these grid styles below to see the original 5-part grid layout (layout.css) with all features (if needed) Note: This extra class below (".grid_parent_1") as added next to the ".grid_parent" class on the grid layout div wrapper that goes around the header, foot, and main elements. Its locks them all in a single page grid. This class below was added to the parent grid div and allows us to further write over the "layout.css" default page grid styles and further customize them. The FIGMA designs have changed several times, further changing the layouts, complicating all the child grid panels. So this class set below has allowed us to change the grid layouts without changing the styles in "layouts.css" file which control the original grid styles. This allows us to go back to an older grid with full header, footer, and asides later if the web design keeps changing and evolving and goes back to odler designs, like headers or footers. Otherwise, all those styles would be lost and the next UI person would have to keep starting over from scratch with new grids and layouts. - MStokely

*/

/* ===== Layout With No Header ===== */

html #body .grid_parent_1 {

  border: none;

  /* NO HEADER STYLES */
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-template-areas: "main";
  -ms-grid-rows: auto;
  -ms-grid-columns: auto;
  overflow: hidden;
  height: auto;
  min-height: 100vh;
  max-height: 100vh;

  /*border: 5px solid blue;*/

}

/* header style */

html #body.add-header .grid_parent_1 {

  border: none;

  /* HEADER STYLES */
  grid-template-rows: auto 1fr;
  grid-template-columns: auto;
  grid-template-areas: "header" "main";
  -ms-grid-rows: auto auto;
  -ms-grid-columns: auto;
  overflow: hidden;
  height: auto;
  min-height: 100vh;
  max-height: 100vh;

  /*border: 5px solid blue;*/

}

html #body .grid_main_1 {

    border: none;

    /* NO HEADER STYLES */
    max-height: 100vh;/* Removed header so this can me 100vh now. */
    overflow: visible;/* Important: We must allow modals to overflow outside Main into Header. */

    /*border: 3px solid black;*/

}

html #body.add-header .grid_main_1 {

    border: none;

    /* HEADER STYLES */
    max-height:calc(100vh - 3.5rem);/* Important: This prevents the "main" content box from overflowing. */
    overflow: hidden;

    /*border: 3px solid black;*/

}

/* Note: This is the old form tag used in Exigo Admin I wrapped around all page content as when we started the Elements project we were not sure if we would need the old form tag from the Admin system. */

html #body .grid_main_1 > form {
    display: block;
    flex: none;
    float: none;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    /*border:3px solid green;*/
}

/* UPDATE: None of the header, asides, or footer are used in the latest Figma designs. So these are not used below. But I left these styles in case in the future we need these HTML5 major structural panels. If you enable these, you will need to add them back above by deleting "grid_parent_1" and/or modifying "grid_parent" class. The original full grid layouts arin "layouts.css" which allow every combination of grid layout possible for you. - MStokely */

html #body .grid_header_1 {

    display:none;

    /*
    border: none;
    overflow: visible;
    z-index: 100;
   -webkit-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
    */
}

html #body.add-header .grid_header_1 {

    display: block;
    border: none;
    overflow: visible;
    z-index: 100;
    -webkit-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);

    min-height: 3.5rem;
    max-height: 3.5rem;

    background: var(--Neutral-Nero-000, transparent);

}

html #body .grid_asideleft_1 {
	display:none;
}

html #body .grid_asideright_1 {
	display:none;
}

html #body .grid_footer_1 {
	display:none;
}











/* ===== Custom Body ===== */

html #body {



}





/* ===== Old Promotions Site.css (delete these and the file later) ===== */

/*
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
*/



#body .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

#body .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

#body .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}










/* ========== Spacer ========== */

/* Universal Expanding Flexbox Spacer : Only use this class for created maximum expanding and shrinking spacers to fill flexboxes. You easily customize or override these settings inside your own containers, if needed but add your custom container class in front of .spacer in your own CSS section of this file. We have to use #main or some powerful selector to override any flex selectors in custom flexboxes child classes the spacer inherits. You can also add !important to all the properties or in your classes to override these, or better dont use spacer class and just create a new named spacer class for your custom situation. But leave this one alone.  - MStokely */

#body #header .spacer,
#body #main .spacer,
#body .spacer
{
    
    display: block;
    margin: auto;
    padding: 0;
    line-height: 0;

    /* Remove below if you want your flexbox design to customize width and height of the actual spacer outside the flex coontrols. */
    width: auto;
    height: auto;
    min-width: auto;
    min-height: none;
    max-width: auto;
    max-height: none;

    /* Note: The flex-grow below is set to "1" which changes the spacer inside flexboxes. Also, the second "1" can be "0" if you have issues with spacer expansion as this "flex-shrink" just says make the spacer as tiny as possible or 0 width if the other sibling flexboxes fill up the row with their content. - MS */

    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    cursor: default;

    /* Uncomment below to see all the spacer in the website layout and get  feel visually for what all your spacers are doing. */
    /*border: 1px solid blue;*/

}






/* ===== Homepage Flexbox Wrapper ===== */

#body main section.homepage
{
    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0; /* row space | column space */
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    padding: 0;
    margin: 0;
    text-align: left;
    background: transparent;
    overflow: visible;/* Set to visible, so any future overflow context menus will appear in neighboring panels. */

    /*border:5px solid blue;*/
}

/* When the header is present, subtract its height. */
#body.add-header main section.homepage
{
    min-height: calc(100vh - 3.5rem);
    max-height: calc(100vh - 3.5rem);
}


/* Homepage : Left Content Area */
#body main section.homepage .homepage_leftmenu
{
    display: none;/* TURN OFF UNTIL NEEDED! */

    position: relative;
    list-style: none;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    width: 17rem;/* This is a temporary width that could change */
    /*width: auto;*/
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: 100%;
    max-height: 100%;
    text-align: left;
    border: none;

    /* Header Styles */
    /*padding: 1rem 0rem 1rem 1rem;*/
    margin: 0rem;
    /*overflow-x: auto;*//* Scrolling is controlled here so the whole panel with padding scrolls. */
    /*overflow-y: auto;*/
    background: transparent;
    /*max-height: calc(100vh - 5rem);*/

    /* No Header Styles */
    padding: 0rem;
    overflow: visible;/* Set to visible, so any future overflow context menus will appear in neighboring panels. */
    min-height: 100vh;/* Removed header so this can me 100vh now. */
    max-height: 100vh;/* Removed header so this can me 100vh now. */

    /*border: 3px solid green;*/
}

/* When the header is present, subtract its height. */
#body.add-header main section.homepage .homepage_leftmenu
{
    min-height: calc(100vh - 3.5rem);
    max-height: calc(100vh - 3.5rem);
}


/* Right Content Area : Tabular or other data */
#body main section.homepage .homepage_rightcontent
{
    position: relative;
    display: block;
    list-style: none;
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto;
    height: auto;
    /*min-width: calc(100vw - 17rem);*//* Turn off if left menu not needed */
    min-width: 100vw;
    max-width: none;
    text-align: left;
    border: none;
    padding: 0;
    margin: 0;
    padding: 1rem 1rem 1rem 1rem;
    margin: 0rem 0rem 0rem 0rem;

    /* HEADER */
    /*background: transparent;*/
    /*min-height: 100%;*/
    /*max-height: calc(100vh - 4rem);*//* subtract the height of the header */
    /*overflow-x: auto;*/
    /*overflow-y: hidden;*/

    /* NO HEADER */
    background: var(--Neutral-Nero-000, transparent);/* New white background added under table panel. */
    min-height: 100vh;/* Removed header so this can me 100vh now. */
    max-height: 100vh;/* Removed header so this can me 100vh now. */
    overflow: visible;/* changed to visible to allow context menu overflows into neighboring panels, if needed. */

    /*border:3px solid red;*/
}

/* When the header is present, subtract its height. */
#body.add-header section.homepage .homepage_rightcontent
{
    min-height: calc(100vh - 3.5rem);
    max-height: calc(100vh - 3.5rem);
}





/* ===== Page Styles ===== */

#body #main .page_elements {

}

#body .promo-page-header {

    min-width: 100%;
    padding: 0;
    margin: 0;
}

#body .table-container,
{
    display:block;
    position: relative;
    background-color: transparent;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    margin: 0;
    padding: 0;

    /*border:2px solid blue;*/
}

#body .promo-table-container
{
    display:block;
    position: relative;
    background-color: transparent;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    margin: 0;
    padding: 0;

    /*border:2px solid blue;*/
}













/* ===== Searchbar ===== */

#body .titlebar
{

    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;	
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 1rem;/* row space | column space */

    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content:normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;	
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width:none;
    min-height:auto;
    max-height:none;
    overflow: visible;/* required to allow tooltip overlays */
    text-align: left;
    padding: 0rem 0rem 1rem 0rem;
	margin: 0;
    background: transparent;

    /*border: 5px solid blue;*/

}

#body .titlebar > div
{

    position:relative;
    display: block;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    width: auto;
    height: auto;
    min-width:auto;
    max-width:none;
    min-height:auto;
    max-height: none;

    text-align:left;
    white-space: nowrap;
    border:none;
    padding: 0;
    margin: auto;
    /*overflow: hidden;*//* hide anything the goes beyond the dimensions */
    background: transparent;
    /*line-height: 0;*//* enforce line-height on all text in titlebar */

    /*border:1px solid blue;*/

}


#body .titlebar > div:nth-child(1)
{
    /* Alert: The title holds max width in all title bars. */
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    min-width: 12rem;/* forces a minimum width for title text */
    overflow-x: clip;/* Alert: This is the only way to clip a container on the x-axis but still have inner text overflow vertically in the title. */

    /*border:1px solid blue;*/

}

#body .titlebar h1
{

    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    margin: auto auto auto 0;

    /* All three are required to create ellipses */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;

    /*border:1px solid blue;*/

}

#body .titlebar_backbutton,
#body .titlebar_forwardbutton
{
    background: var(--Neutral-Nero-000,transparent);
    border-radius: 0.5rem;
    padding:0.375rem;
    margin: auto;
}

#body .titlebar_backbutton img
{
    margin: auto !important;
}

#body .titlebar_forwardbutton img
{
    transform: rotate(180deg) !important;
    margin: 0 0 0 -0.5rem !important;

    /*border:1px solid blue;*/
}



















/* ========== New Searchbar Redesign ========== */

/* Searchbar Open : Hidden Left Menu Button */

#body .titlebar.search > button.leftmenu_openclose
{
    display: block;

    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    position: relative;
    width: 2rem;
    height: 2rem;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    overflow: hidden;
    background: var(--Neutral-Concrete-200, inherit);
    outline: 0;
    border: 0;
    border-radius: 0.5rem;
    padding: 0;
    margin: auto;
    z-index: 1;

}

#body .titlebar.search > button.leftmenu_openclose:hover,
#body .titlebar.search > button.leftmenu_openclose:focus
{
    border: 0 !important;
}

html #body .titlebar.search > button.leftmenu_openclose.active
{
    display: block;
}





#body .titlebar.search
{
    position: relative;
    padding: 0;
    overflow: visible;/* required for dropdown to overflow */
    margin: 0 0 1rem 0;

    min-width: auto;
    max-width: none;

    /*border: 2px solid green;*/
}

#body .titlebar.search > .searchcontainer
{

    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    position: relative;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: var(--Neutral-Concrete-200, transparent);
    border-radius: 0.5rem;
    z-index: 10;

    /*border: 2px solid red;*/
}

#body .titlebar.search > .searchcontainer:has(.searchdropdown.active)
{
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.20);
    z-index: 9999;
    overflow: visible;
}

#body .titlebar.search > .searchcontainer > .searchbar
{
    /* Give search max flexbox expansion in case we later add buttons to the right of the searchbar */
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    /*min-width: 12rem;*/
    /*overflow-x: clip;*/

    /* Creates a new grid to hold the gray search bar items */
    position: relative;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: 2rem;
    max-height: 2rem;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0;
    margin: 0;
    text-align: left;
    background: transparent;
    overflow: visible;/* must be visible to allow the the dropdown to appear */
    border-radius: 0;

    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;

    /*border: 1px solid blue;*/
}

html #body .titlebar.search > .searchcontainer > .searchbar.active
{
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 9999;/* go ahead and float all search items above the gray background that might appear on select */

    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

#body .titlebar.search > .searchcontainer > .searchbar > button
{

    display: block;
    /* .8 flex-growth helps move the hourglass and text a little to the left to center it. */
    -webkit-box-flex: .8 0 auto;
    -moz-box-flex: .8 0 auto;
    -webkit-flexbox: .8 0 auto;
    -webkit-flex: .8 0 auto;
    -ms-flex: .8 0 auto;
    flex: .8 0 auto;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: right;
    white-space: nowrap;
    outline: 0;
    border: none;
    border-radius: 0;
    padding: 0rem .5rem;
    margin: 0;
    background: transparent;

    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;

    /*border: 1px solid green;*/

}

html #body .titlebar.search > .searchcontainer > .searchbar.active > button
{

    -webkit-box-flex: 0 0 0;
    -moz-box-flex: 0 0 0;
    -webkit-flexbox: 0 0 0;
    -webkit-flex: 0 0 0;
    -ms-flex: 0 0 0;
    flex: 0 0 0;

    z-index: 100;

    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms cubic-bezier(0, 1, .5, 1);

    /*border: 1px solid green;*/

}

#body .titlebar.search > .searchcontainer > .searchbar > input[type=search],
#body .titlebar.search > .searchcontainer > .searchbar > input[type=search]:visited,
#body .titlebar.search > .searchcontainer > .searchbar > input[type=search]:hover,
#body .titlebar.search > .searchcontainer > .searchbar > input[type=search]:focus,
#body .titlebar.search > .searchcontainer > .searchbar > input[type=search]:active
{
    -webkit-appearance: searchfield;
    display: block;
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -webkit-flexbox: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    outline: 0;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: .1rem .5rem .1rem 0rem;
    background: transparent;
    color: var(--Type-Limed-Spruce-Placeholder, inherit);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: .01rem;
    cursor: text;

    z-index: 100;

    /* border: 1px solid green; */
}


html #body .titlebar.search > .searchcontainer > .searchbar.active > input[type=search]
{
    color: var(--Type-Limed-Spruce-300, inherit);
}




/* Show-Hide the two colored icon versions for the search hourglass. */

#body .titlebar.search > .searchcontainer > .searchbar > button > img.icon1
{
    display: block;
}
#body .titlebar.search > .searchcontainer > .searchbar > button > img.icon2
{
    display: none;
}
#body .titlebar.search > .searchcontainer > .searchbar.active > button > img.icon1
{
    display: none;
}
#body .titlebar.search > .searchcontainer > .searchbar.active > button > img.icon2
{
    display: block;
}




#body .titlebar.search > .searchcontainer > .searchbar > input[type=search]::placeholder
{
    color: var(--Type-Limed-Spruce-Placeholder, inherit) !important;
    font-weight: 400 !important;
    transition: none;
}








/* ==================== Begin New Table View Titlebar Styles ==================== */

/* Titlebar : New Breadcrumb and Filter Designs */

#body .titlebarnew
{
    /* Titlebar height and set dimensions */
    /* Two stacked titleblocks plus space = titlebarnew height*/
    --theme1-local-titlebarnew-height: 3.5rem;
    --theme1-local-titleblock-height: 1.5rem;
    --theme1-local-titleblock-spacing: 0.5rem;

    /*--theme1-local-titleblock-height: ;*/

    /* Titlebar modal shared width and height */
    --theme1-local-filtermenu-width: 13.5rem;
    --theme1-local-filtermenu-height: 16.5rem;
}

#body .titlebarnew
{
    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;	
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    flex-direction: column;
    gap: 0 0;/* row space | column space */

    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content:normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;	
    -ms-flex-align: stretch;
    align-items: stretch;

    width: auto;
    height: var(--theme1-local-titlebarnew-height,3.5rem);
    min-width: 100%;
    max-width: 100%;
    min-height: var(--theme1-local-titlebarnew-height,3.5rem);
    max-height: var(--theme1-local-titlebarnew-height,3.5rem);
    overflow: visible;/* required to allow tooltip overlays */
    padding: 0;
    margin: 0rem 0rem .25rem 0rem;

    /*border: 1px solid blue;*/
}

#body .titlebarnew > .titleblock
{
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex: 0 1 auto;
    -webkit-flexbox: 0 1 auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;

    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;	
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0.5rem;/* row space | column space */

    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content:normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;	
    -ms-flex-align: stretch;
    align-items: stretch;

    align-items: center;/* required to center this item vertically centered in parent flexbox when the lower seconday title bar is not present */

    width: auto;
    height: 100%;/* The 1.5rem height is what it collapses to when the second titlebox row is not present, otherwise it fills the parent flexbox. */
    min-width: 100%;
    max-width: 100%;
    min-height: var(--theme1-local-titleblock-height,1.5rem);
    max-height: 100%;
    overflow: visible;/* required to allow tooltip overlays */
    text-align: left;
    padding: 0;
	margin: auto 0;
    background: transparent;

    /*border: 1px solid grey;*/

}

#body .titlebarnew > .titleblock.filterpillrow
{
    /* Important: This is the space between blocks in the "titlebarnew". Add this to the total titlebarnew space. */
    margin-top: var(--theme1-local-titleblock-spacing,0.5rem);
}

#body .titlebarnew > .titleblock.batchpublishrow
{
    /* Important: This allows us to maintain the same heigsssht plus padding as the filterpill row, but merge the top margin into it so our publish titlebar can reach full height under the title. */
    min-height: calc(var(--theme1-local-titleblock-height,1.5rem) + 0.5rem);
}

#body .titlebarnew > .titleblock > *
{
    display: block;
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex: 0 1 auto;
    -webkit-flexbox: 0 1 auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;

    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: var(--theme1-local-titleblock-height,1.5rem);
    max-height: var(--theme1-local-titleblock-height,1.5rem);
    text-align: left;
    white-space: nowrap;
    border:none;
    padding: 0;
    margin: auto 0;
    overflow: visible;
    background: transparent;

    /*border:1px solid black;*/

}

/* ========== Breadcrumbs ========== */

#body .titlebarnew > .titleblock > .breadcrumbs
{
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;	
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0;/* row space | column space */

    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content:normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;	
    -ms-flex-align: stretch;
    align-items: stretch;

    width: auto;
    height: auto;
    min-width: auto;
    max-width: normal;
    min-height: var(--theme1-local-titleblock-height,1.5rem);
    max-height: var(--theme1-local-titleblock-height,1.5rem);
    overflow: visible;/* required to allow tooltip overlays */
    text-align: left;
    padding: 0;
	margin: 0;

    position: relative;
    top: -.25rem;/* If you want to move the breadcrumb block up higher, use this setting. */

    /*border: 1px solid orange;*/
}

/* Breadcrumb Text */

#body .titlebarnew > .titleblock > .breadcrumbs > h1
{
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;	
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0;/* row space | column space */

    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content:normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;	
    -ms-flex-align: stretch;
    align-items: stretch;

    width: auto;
    height: auto;
    min-width: 100%;
    max-width: 100%;
    min-height: var(--theme1-local-titleblock-height,1.5rem);
    max-height: var(--theme1-local-titleblock-height,1.5rem);
    overflow: visible;/* required to allow tooltip overlays */
    text-align: left;
    padding: 0;
	margin: 0;

    /*border: 1px solid grey;*/
}

/* Added this style for the focus view text */

#body .titlebarnew > .titleblock > .breadcrumbs > h1:not(:has(a))
{
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--Type-Limed-Spruce-500,inherit);
    min-width: auto;
    max-width: none;
}

#body .titlebarnew > .titleblock > .breadcrumbs > h1 > *
{

    -webkit-box-flex: 0 1 auto;
    -moz-box-flex: 0 1 auto;
    -webkit-flexbox: 0 1 auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;

    display: inline-block;
    min-height: var(--theme1-local-titleblock-height,1.5rem);
    max-height: var(--theme1-local-titleblock-height,1.5rem);
    font-size: 1.5rem;
    font-weight: 300;

    /* SETTINGS FOR MOVING TEXT TO ALLIGN WITH TOP : This was in the original figma design but wont work. This value allows us to move the text to the top of the container but not overflow and get cut off at the top */
    /*line-height: 1.1rem;*/
    /*margin: 0;*/

    padding: 0;
    margin: auto 0;
    line-height: 1;

    /*border: 1px solid blue;*/

}


/* ========== Filter & Custom Items ========== */

#body .titlebarnew > .titleblock > .filtermenus,
#body .titlebarnew > .titleblock > .filterpills,
#body .titlebarnew > .titleblock .customviews
{
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;	
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0.5rem;/* row space | column space */

    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content:normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;	
    -ms-flex-align: stretch;
    align-items: stretch;

    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: 1.5rem;
    max-height: 1.5rem;
    overflow: visible;/* required to allow tooltip overlays */
    text-align: left;
    padding: 0;
	margin: auto 0;

    /*border: 1px solid blue;*/
}

#body .titlebarnew > .titleblock > .filtermenus > *,
#body .titlebarnew > .titleblock .customviews > *
{
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

html #body .titlebarnew > .titleblock > .filterpills
{
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    overflow-x: auto;
    overflow-y: hidden;

    -ms-overflow-style: none;/* Internet Explorer 10+ */
    scrollbar-width: none;/* Firefox */
    z-index: 20;

    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;

    /*border: 1px solid blue;*/

}
html #body .titlebarnew > .titleblock > .filterpills:hover
{
    /* SPECIAL: This height pushes the scrollbar below the content area. */
    height: 2rem;
    min-height: 2rem;
    max-height: 2rem;

    -ms-overflow-style: auto;/* Internet Explorer 10+ */
    scrollbar-width: auto;/* Firefox */

    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;

    /*border:2px solid blue;*/
}
html #body .titlebarnew > .titleblock > .filterpills::-webkit-scrollbar { 
    display: none;/* Safari and Chrome */
}
html #body .titlebarnew > .titleblock > .filterpills:hover::-webkit-scrollbar
{
    display: block;/* Safari and Chrome */
}

html #body .titlebarnew > .titleblock > .filterpills > *
{
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}






/* ========== Filter menu dropdowns ========== */

#body #main .titlebarnew .filter-menu-trigger
{
    position: relative;
}

#body #main .titlebarnew .filter-dropdown
{
    display:block;
    position: absolute;
    top: 2rem;
    right: 0;
    flex: none;
    transform: none;
    background-color: var(--Neutral-Nero-000, transparent);
    border: 1px solid var(--Neutral-Alto-300, inherit);
    border-radius: .5rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .16);
    z-index: 100;
    width: auto;
    height: auto;
    min-width: 13.5rem;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    padding: 0.5rem 0;
}

/* Empty dropdown container for js components to float in. */

#body #main .titlebarnew .date-range-picker-dropdown {

    display: block;
    position: absolute;
    top: 2rem;
    right: 0;
    transform: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 100;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    overflow: visible;/* allows box-shadow to extend out from the shadow component */

}

/* The DateRangePicker component itself provides styling */
#body .date-range-picker-dropdown .date-range-picker {
    /* Component already has border, shadow, padding */
}






























/* ===== Old Layout Styles (we might be able to delete later) ===== */

#body a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/*#body a {
    color: #0077cc;
}*/

#body .btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

#body .nav-pills .nav-link.active,
#body .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

#body .border-top {
    border-top: 1px solid #e5e5e5;
}
#body .border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

#body .box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

#body button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/*#body .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}*/







/* ===== Header Navigation Styles (we might be able to delete later) ===== */

/* Base navbar styles */
#body .ex-navbar {

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    min-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 3.5rem;
    margin: auto 0;
    position: relative;

    flex-wrap: nowrap;
    justify-content: flex-start;

    /* color: rgba(0, 0, 0, 0.55); */
    /* background-color: #fff; */
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.175); */
    /* box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); */
    /* margin-bottom: 1rem; */

    /* border:2px solid blue; */

}

/* Full-width container */
#body .ex-container-fluid {

    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin: auto 1rem;

    /* border:2px solid green; */
}

/* Navbar brand */
#body .ex-navbar-brand {

    font-size: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
    margin: auto 0;

    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;

    /* border:2px solid green; */
}

#body .ex-navbar-brand:hover {

    color: var(--Primary-Denim-300, inherit);

    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;
}

/* Hide checkbox : Small screens show a special mobile menu with dropdown, which is controlled by a hidden checkbox feature. */
#body .ex-navbar-toggle-checkbox {

    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    z-index: -9999;
    pointer-events: none;

}

/* Navbar toggler button */
#body .ex-navbar-toggler {

    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid var(--Neutral-Cool-Gray-450);
    /*border-radius: 0.375rem;*/
    border-radius: 0.25rem;
    /*transition: box-shadow 0.15s ease-in-out;*/
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#body .ex-navbar-toggler:hover {
    text-decoration: none;
}

#body .ex-navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0.25rem;
}

/* Navbar collapse container */
#body .ex-navbar-collapse {

    display: inline-flex;
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;

}

/* Navigation list */
#body .ex-navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;

    flex-grow: 1;

}

/* Navigation item */
#body .ex-nav-item {
    display: list-item;
}

/* Navigation link */
#body .ex-nav-link {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

    color: var(--Type-Limed-Spruce-100, inherit);
}

#body .ex-nav-link:hover,
#body .ex-nav-link:focus {

    color: var(--Primary-Denim-300, inherit);

    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;

}



/* Mobile styles (< 576px) */
@media (max-width: 575.98px) {

    #body .ex-navbar-expand-sm {
        flex-wrap: wrap;
    }

    #body .ex-container-fluid {
        flex-wrap: wrap;
    }

    #body .ex-navbar-toggler {
        display: flex;
    }

    #body .ex-navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--Neutral-Nero-000);
        border-top: 1px solid var(--Neutral-Cool-Gray-450);
        -webkit-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
        -moz-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
        box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        padding: 0.5rem 3rem;
        z-index: -1;
        max-height: 0;
        opacity: 0;

        /*transition: max-height 0.5s ease, opacity 0.5s ease;*/
                
    }

    /* Show menu when checkbox is checked */
    #body #ex-navbar-toggle:checked ~ .ex-navbar-collapse {

        z-index: 1000;
        max-height: 10rem;
        opacity: 1;

        transition: max-height 0.5s ease, opacity 0.5s ease;

        /* border:2px solid green; */
    }

    #body ul.ex-navbar-nav {
        margin:0;
        padding:0;
        flex-direction: column;
    }

    #body .ex-nav-link {
        padding-right: 0;
        padding-left: 0;
    }
}

/* Desktop styles (≥ 576px) */
@media (min-width: 576px) {

    #body .ex-navbar-expand-sm {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    #body .ex-navbar-toggler {
        display: none;
    }

    #body .ex-navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    #body .ex-navbar-nav {
        flex-direction: row;
    }

    #body .ex-nav-item {
        margin-left: 0.5rem;
    }

    #body .ex-nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

}







/* ===== Welcome & Privacy Page Styles ===== */

#body .welcome-container,
#body .privacy-container {
    min-width: 100%;
    text-align: center;
    margin-top: 2rem;
}

#body .welcome-text,
#body .privacy-text
{
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--Type-Limed-Spruce-500, inherit);
    min-width: auto;
    max-width: none;
}










#body .hidden {
  display: none !important;
}

/* REMOVE tHESE LATER */

:root {
  /* Colors - Neutrals */
  --ex-white: #FFFFFF;
  --ex-bg-page: #F2F2F2;
  --ex-bg-card-header: #F8F9FA;
  --ex-border: #E0E0E0;
  
  /* Colors - Text */
  --ex-text-heading: #1F2931;
  --ex-text-primary: #2C3943;
  --ex-text-label: #46565F;
  --ex-text-placeholder: #8C959E;
  --ex-text-subtle: rgba(83, 83, 83, 0.8);
  
  /* Colors - Brand */
  --ex-primary: #126CB8;
  --ex-primary-dark: #0E4E99;
  --ex-primary-light: rgba(175, 202, 244, 0.5);
  --ex-secondary: #A037C5;
  --ex-error: #D70015;
  
  /* Colors - Tags/Badges */
  --ex-tag-blue-bg: #D0E8F2;
  --ex-tag-blue-text: #126CB8;
  --ex-tag-orange-bg: #FFE5CC;
  --ex-tag-orange-text: #E65100;
  --ex-tag-green-bg: #D0F0C0;
  --ex-tag-green-text: #2E7D32;
  --ex-tag-gray-bg: #E0E0E0;
  --ex-tag-gray-text: #46565F;
  
  /* Colors - Pale Sky */
  --ex-pale-sky: #6C757D;
  
  /* Spacing */
  --ex-spacing-xs: 4px;
  --ex-spacing-sm: 8px;
  --ex-spacing-md: 16px;
  --ex-spacing-lg: 24px;
  --ex-spacing-xl: 32px;
  
  /* Border Radius */
  --ex-radius-sm: 4px;
  --ex-radius-md: 8px;
  --ex-radius-lg: 16px;
  --ex-radius-pill: 24px;
  
  /* Typography */
  --ex-font-family: 'Proxima Nova', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ex-font-size-xs: 10px;
  --ex-font-size-sm: 12px;
  --ex-font-size-md: 14px;
  --ex-font-size-lg: 16px;
  --ex-font-size-xl: 24px;
  
  /* Shadows */
  --ex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ex-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  
  /* Z-Index Scale - Consistent stacking hierarchy across the application
   * Use these CSS variables for z-index values to maintain proper layering.
   * 
   * IMPORTANT: When using opacity, transform, or filter on parent elements,
   * be aware they create new stacking contexts that can trap child z-index.
   * See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
   */
  --z-base: 1;              /* Base level content */
  --z-elevated: 10;         /* Elevated content (sticky headers, etc.) */
  --z-sticky: 100;          /* Sticky elements, preview panels */
  --z-topnav: 1000;         /* Top navigation bar */
  --z-dropdown: 1100;       /* Dropdown menus, filter panels */
  --z-popover: 1200;        /* Popovers, tooltips */
  --z-modal-backdrop: 1300; /* Modal backdrop overlay */
  --z-modal: 1400;          /* Modal dialogs */
  --z-toast: 1500;          /* Toast notifications */
  --z-tooltip: 1600;        /* Tooltips that must appear above modals */
}





/* ============================================
   Base Styles
   ============================================ */

/* Page utility: set a page-level white background when needed (template pages) */

/* NO DO NOT USE THIS!
body.page-white {
  background: var(--ex-white);
}
*/

/* Fallback for environments where server-side body class isn't injected reliably:
   Use :has() to apply white background when the promos card is present (modern browsers)
*/

/* NO DO NOT USE THIS!
body:has(.ex-promo-card) {
  background: var(--ex-white);
}
*/

/* Optional: To use the exact 'Proxima Nova' font from Figma, add licensed @font-face rules
   and place the font files under /wwwroot/fonts. Example:

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

   NOTE: Do not add font files here unless you have licensing for the font. Using the
   system fallback stack provides a robust, readable alternative when the font is
   not available on the client.
*/

/* DO NOT USE THIS 
body {
  font-family: var(--ex-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--ex-bg-page);
  color: var(--ex-text-primary);
}
*/







/* ============================================
   Page Layout
   ============================================ */


#body .ex-page-layout {
  display: flex;
  min-height: 100vh;
  padding-top: 64px; /* Space for fixed top nav */
}

#body .ex-sidebar {
  width: 444px;
  background: var(--ex-white);
  border-radius: var(--ex-radius-lg);
  margin: var(--ex-spacing-md);
  padding: var(--ex-spacing-md);
  height: fit-content;
  position: sticky;
  top: 80px;
}

#body .ex-main-content {
  flex: 1;
  padding: var(--ex-spacing-md);
  max-width: 640px;
}

/* ============================================
   Top Navigation
   ============================================ */


#body .ex-topnav {
  /*position: fixed;
  top: 0;
  left: 0;
  right: 0;*/
  height: 64px;
  background: var(--ex-white);
  box-shadow: var(--ex-shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ex-spacing-lg);
  z-index: var(--z-topnav);
  backdrop-filter: blur(20px);
}

#body .ex-topnav-left {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-md);
}

#body .ex-topnav-right {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-md);
}

#body .ex-topnav-title {
  font-size: var(--ex-font-size-lg);
  color: var(--ex-text-heading);
  font-weight: 400;
}

#body .ex-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--ex-text-primary);
  text-decoration: none;
}

#body .ex-back-btn:hover {
  color: var(--ex-primary);
}

/* ============================================
   Buttons
   ============================================ */
#body .ex-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ex-spacing-xs);
  padding: 8px 24px;
  border-radius: var(--ex-radius-pill);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;
}

#body .ex-btn-primary {
  background: var(--ex-primary);
  color: var(--ex-white);
}

#body .ex-btn-primary:hover {
  background: #0E5A9A;
  color: var(--ex-white);
}

#body .ex-btn-secondary {
  background: transparent;
  color: var(--ex-text-primary);
  border: 1px solid var(--ex-text-primary);
}

#body .ex-btn-secondary:hover {
  background: var(--ex-bg-page);
  color: var(--ex-text-primary);
}

#body .ex-btn-tertiary {
  background: transparent;
  color: var(--ex-secondary);
  padding: 8px 16px;
  font-size: var(--ex-font-size-sm);
}

#body .ex-btn-tertiary:hover {
  background: rgba(160, 55, 197, 0.05);
  color: var(--ex-secondary);
}

#body .ex-btn-icon {
  width: 18px;
  height: 18px;
}

/* ============================================
   Cards & Sections
   ============================================ */
#body .ex-card {
  background: var(--ex-white);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-section {
  background: var(--ex-white);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-md);
  padding-bottom: var(--ex-spacing-lg);
  margin-bottom: var(--ex-spacing-md);
  position: relative;
}

#body .ex-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

#body .ex-section-title {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-section-title-icon {
  width: 16px;
  height: 16px;
  color: var(--ex-text-primary);
}

#body .ex-section-title-text {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-label);
  font-weight: 400;
}

#body .ex-section-caret {
  width: 20px;
  height: 20px;
  color: var(--ex-text-primary);
  transition: transform 0.2s ease;
}

#body .ex-section.collapsed .ex-section-caret {
  transform: rotate(180deg);
}

#body .ex-section-content {
  margin-top: var(--ex-spacing-md);
  padding-bottom: var(--ex-spacing-xs);
}

#body .ex-section.collapsed .ex-section-content {
  display: none;
}

#body .ex-section-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--ex-spacing-sm);
}
/* Embedded time picker (used inside range picker sections) */
#body .ex-cal-time.ex-cal-time--embedded {
  padding: 0;
  margin-top: 0;
  border-top: none;
}

/* ============================================
   Badges
   ============================================ */
/*.ex-badge {*/
/* When a range calendar is rendered inside a date-field dropdown,
   the dropdown provides the border/shadow; avoid double framing. */
#body .ex-date-field__calendar-container .ex-date-range-picker {
  border: none;
  box-shadow: none;
  padding: 12px;
}
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: var(--ex-radius-sm);
  font-size: var(--ex-font-size-sm);
  font-weight: 600;
  line-height: 16px;
}

#body .ex-badge-count {
  min-width: 16px;
  height: 16px;
  padding: 0 8px;
  background: var(--ex-tag-blue-bg);
  color: var(--ex-tag-blue-text);
  font-size: var(--ex-font-size-xs);
  font-weight: 700;
  border-radius: var(--ex-radius-sm);
}

#body .ex-badge-active {
  background: var(--ex-tag-blue-bg); /* Figma: #D0E8F2 */
  color: var(--ex-tag-blue-text); /* Figma: #126CB8 */
}

#body .ex-badge-disabled {
  background: var(--ex-tag-gray-bg); /* Figma: #E0E0E0 */
  color: var(--ex-tag-gray-text); /* Figma: #46565F */
}

#body .ex-badge-pending {
  background: var(--ex-tag-orange-bg);
  color: var(--ex-tag-orange-text);
}

#body .ex-badge-draft {
  background: var(--ex-tag-orange-bg);
  color: var(--ex-tag-orange-text);
}

/* ============================================
   Form Inputs - Figma Design System Match
   ============================================ */
#body .ex-form-group {
  margin-bottom: var(--ex-spacing-sm);
}

/* Labels per Figma: 14px Regular (#46565F) */
#body .ex-label {
  display: block;
  padding-left: var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-xs);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  color: var(--ex-text-label); /* #46565F */
  font-weight: 400;
  line-height: 20px;
}

#body .ex-label-optional {
  color: var(--ex-text-placeholder); /* #8C959E */
}

/* Input fields per Figma: 16px Regular (#2C3943), #E0E0E0 border, 8px radius */
#body .ex-input {
  width: 100%;
  padding: 6px 16px;
  border: 1px solid var(--ex-border); /* #E0E0E0 */
  border-radius: var(--ex-radius-md); /* 8px */
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  line-height: 24px;
  color: var(--ex-text-primary); /* #2C3943 */
  background: var(--ex-white);
  transition: border-color 0.2s ease;
}

/* Specific styling for date inputs to match Figma and hide native icons when we provide custom ones */
#body .ex-input[type="date"],
#body .ex-input[type="datetime-local"] {
  position: relative;
}

/* 
   Hide native calendar icon in Chrome/Edge/Safari.
   We make it transparent and stretch it to cover the entire input.
   This hides the icon but keeps the entire field clickable to open the native picker.
*/
#body input[type="date"]::-webkit-calendar-picker-indicator,
#body input[type="datetime-local"]::-webkit-calendar-picker-indicator,
#body .ex-input[type="date"]::-webkit-calendar-picker-indicator,
#body .ex-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 5;
  background: transparent !important;
  color: transparent !important;
  -webkit-appearance: none !important;
}

/* Firefox - Hide native calendar icon */
#body input[type="date"],
#body input[type="datetime-local"] {
  background-image: none !important;
}

/* Hide native clear button and spin buttons */
#body input[type="date"]::-webkit-inner-spin-button,
#body input[type="date"]::-webkit-clear-button,
#body input[type="datetime-local"]::-webkit-inner-spin-button,
#body input[type="datetime-local"]::-webkit-clear-button,
#body .ex-input[type="date"]::-webkit-inner-spin-button,
#body .ex-input[type="date"]::-webkit-clear-button,
#body .ex-input[type="datetime-local"]::-webkit-inner-spin-button,
#body .ex-input[type="datetime-local"]::-webkit-clear-button {
  display: none !important;
  -webkit-appearance: none !important;
}

/* Ensure the custom icon is visible behind the transparent native indicator */
#body .ex-input-icon {
  z-index: 1; /* Below the transparent native indicator hit area */
}

#body .ex-input::placeholder {
  color: var(--ex-text-placeholder);
}

#body .ex-input:focus {
  outline: none;
  border-color: var(--ex-primary);
}

#body .ex-input-hint {
  padding-left: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-xs);
  font-size: var(--ex-font-size-sm);
  color: var(--ex-text-placeholder);
  line-height: 16px;
}

#body .ex-input-info {
  padding-left: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-xs);
  font-size: var(--ex-font-size-sm);
  color: var(--ex-primary);
  line-height: 16px;
}

#body .ex-textarea {
  min-height: 128px;
  resize: vertical;
}

#body .ex-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232C3943' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
}

/* ============================================
   Checkboxes - Figma Design System Match
   ============================================ */
#body .ex-checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

/* Custom checkbox styling per Figma: 18px square, 2px border, blue fill when checked */
#body .ex-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ex-text-primary); /* Figma: #2C3943 */
  border-radius: 2px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  background: var(--ex-white);
  flex-shrink: 0;
  transition: all 0.15s ease;
}

#body .ex-checkbox:checked {
  background: var(--ex-primary); /* Figma: #126CB8 */
  border-color: var(--ex-primary);
}

#body .ex-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#body .ex-checkbox:hover:not(:checked) {
  border-color: var(--ex-primary);
}

#body .ex-checkbox:focus {
  outline: 2px solid var(--ex-primary-light);
  outline-offset: 2px;
}

#body .ex-checkbox-label {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  color: var(--ex-text-primary); /* #2C3943 */
  line-height: 20px;
  cursor: pointer;
}

/* ============================================
   Item Cards (for schedules, qualifications, etc.)
   ============================================ */
#body .ex-item-card {
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-item-header {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  cursor: pointer;
  user-select: none;
}

#body .ex-item-caret {
  width: 16px;
  height: 16px;
  color: rgba(83, 83, 83, 1);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

#body .ex-item-card.collapsed .ex-item-caret {
  transform: rotate(180deg);
}

#body .ex-item-title {
  flex: 1;
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: rgba(83, 83, 83, 0.8);
}

#body .ex-item-actions {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-item-action-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ex-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

#body .ex-item-action-btn:hover {
  color: var(--ex-primary);
}

#body .ex-item-content {
  margin-top: var(--ex-spacing-sm);
}

#body .ex-item-card.collapsed .ex-item-content {
  display: none;
}

#body .ex-item-divider {
  width: 1px;
  height: 19px;
  background: var(--ex-border);
}

/* ============================================
   Sidebar Specific
   ============================================ */
#body .ex-sidebar-icons {
  display: flex;
  flex-direction: column;
  width: 32px;
  gap: var(--ex-spacing-xs);
}

#body .ex-sidebar-icon-btn {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: var(--ex-radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ex-text-primary);
}

#body .ex-sidebar-icon-btn.active {
  background: var(--ex-primary-light);
  color: var(--ex-primary);
}

#body .ex-sidebar-icon-btn:hover:not(.active) {
  background: var(--ex-bg-page);
}

#body .ex-sidebar-content {
  flex: 1;
  padding-left: var(--ex-spacing-md);
  border-left: 1px solid var(--ex-border);
}

#body .ex-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) var(--ex-spacing-sm);
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-sidebar-title {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  font-size: var(--ex-font-size-lg);
  color: var(--ex-text-heading);
}

#body .ex-sidebar-section {
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-sidebar-divider {
  height: 1px;
  background: var(--ex-border);
  margin: var(--ex-spacing-md) 0;
}

/* ============================================
   Status Row
   ============================================ */
#body .ex-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) var(--ex-spacing-sm);
}

#body .ex-status-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

/* ============================================
   Metadata
   ============================================ */
#body .ex-metadata-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) var(--ex-spacing-sm);
}

#body .ex-metadata-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-metadata-value {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-created-by {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-subtle);
  background: linear-gradient(143deg, rgba(159, 56, 197, 1) 8%, rgba(37, 191, 228, 1) 90%);
}

/* ============================================
   Summary Section
   ============================================ */
#body .ex-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#body .ex-summary-title {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-summary-text {
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-heading);
  line-height: 16px;
  margin-top: var(--ex-spacing-sm);
}

/* ============================================
   Tables (for Index page)
   ============================================ */
#body .ex-table {
  width: 100%;
  background: var(--ex-white);
  border-radius: var(--ex-radius-md);
  overflow: hidden;
}

#body .ex-table thead {
  background: var(--ex-bg-card-header);
}

#body .ex-table th {
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-primary);
  text-align: left;
  border-bottom: 1px solid var(--ex-border);
}

#body .ex-table td {
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  border-bottom: 1px solid var(--ex-border);
}

#body .ex-table tbody tr:hover {
  background: var(--ex-bg-page);
}

#body .ex-table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================
   Utilities
   ============================================ */
#body .ex-text-muted {
  color: var(--ex-text-placeholder);
}

#body .ex-text-sm {
  font-size: var(--ex-font-size-sm);
}

#body .ex-mt-sm { margin-top: var(--ex-spacing-sm); }
#body .ex-mt-md { margin-top: var(--ex-spacing-md); }
#body .ex-mb-sm { margin-bottom: var(--ex-spacing-sm); }
#body .ex-mb-md { margin-bottom: var(--ex-spacing-md); }
#body .ex-mb-lg { margin-bottom: var(--ex-spacing-lg); }
#body .ex-py-lg { padding-top: var(--ex-spacing-lg); padding-bottom: var(--ex-spacing-lg); }

#body .ex-flex { display: flex; }
#body .ex-flex-col { flex-direction: column; }
#body .ex-items-center { align-items: center; }
#body .ex-justify-between { justify-content: space-between; }
#body .ex-justify-center { justify-content: center; }
#body .ex-gap-sm { gap: var(--ex-spacing-sm); }
#body .ex-gap-md { gap: var(--ex-spacing-md); }

/* ============================================
   Two-Panel Layout
   ============================================ */
#body .ex-two-panel-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--ex-spacing-lg);
}

@media (max-width: 1024px) {
  #body .ex-two-panel-layout {
    grid-template-columns: 1fr;
  }
  
  #body .ex-sidebar-panel {
    order: -1;
  }
}

#body .ex-main-panel {
  min-width: 0;
}

#body .ex-sidebar-panel {
  position: sticky;
  top: var(--ex-spacing-md);
  height: fit-content;
}

/* ============================================
   Spinner
   ============================================ */
#body .ex-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--ex-border-color);
  border-radius: 50%;
  border-top-color: var(--ex-primary);
  animation: ex-spin 1s linear infinite;
}

@keyframes ex-spin {
  to { transform: rotate(360deg); }
}

#body .ex-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Alerts
   ============================================ */
#body .ex-alert {
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  border-radius: var(--ex-radius-sm);
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-alert-danger {
  background: var(--ex-tag-orange-bg);
  color: var(--ex-danger);
  border: 1px solid var(--ex-danger);
}

#body .ex-alert-success {
  background: var(--ex-tag-green-bg);
  color: var(--ex-tag-green-text);
  border: 1px solid var(--ex-tag-green-text);
}

#body .ex-hidden {
  display: none !important;
}

/* ============================================
   Text Utilities
   ============================================ */
#body .ex-text-secondary {
  color: var(--ex-text-secondary);
}

#body .ex-text-sm {
  font-size: var(--ex-font-size-sm);
}

/* ============================================
   Lists
   ============================================ */
#body .ex-list {
  list-style: disc;
  padding-left: var(--ex-spacing-md);
  margin: 0;
}

#body .ex-meta-list {
  margin: 0;
}

#body .ex-meta-list dt {
  font-weight: 600;
  color: var(--ex-text-secondary);
  margin-top: var(--ex-spacing-xs);
}

#body .ex-meta-list dd {
  margin: 0;
  margin-bottom: var(--ex-spacing-xs);
}

/* ============================================
   Info Card
   ============================================ */
#body .ex-card-info {
  background: var(--ex-bg-secondary);
  border: 1px solid var(--ex-border-color);
}

#body .ex-card-info .ex-card-content {
  padding: var(--ex-spacing-md);
}

#body .ex-card-info .ex-card-title {
  font-size: var(--ex-font-size-base);
  font-weight: 600;
  margin: 0 0 var(--ex-spacing-sm) 0;
}

/* ============================================
   Form Row
   ============================================ */
#body .ex-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ex-spacing-md);
}

@media (max-width: 640px) {
  #body .ex-form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Checkbox
   ============================================ */
#body .ex-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--ex-spacing-xs);
  cursor: pointer;
  min-height: fit-content;
}

#body .ex-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--ex-primary);
}

#body .ex-checkbox-label {
  line-height: 1.4;
  flex: 1;
}

/* ============================================
   Textarea
   ============================================ */
#body .ex-textarea {
  min-height: 80px;
  resize: vertical;
}

/* ============================================
   Detail List
   ============================================ */
#body .ex-detail-list {
  margin: 0;
}

#body .ex-detail-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--ex-spacing-md);
  padding: var(--ex-spacing-sm) 0;
  border-bottom: 1px solid var(--ex-border-color);
}

#body .ex-detail-row:last-child {
  border-bottom: none;
}

#body .ex-detail-list dt {
  font-weight: 500;
  color: var(--ex-text-secondary);
  margin: 0;
}

#body .ex-detail-list dd {
  margin: 0;
}

/* ============================================
   Code Styling
   ============================================ */
#body .ex-code {
  font-family: 'Consolas', 'Monaco', monospace;
  background: var(--ex-bg-secondary);
  padding: 2px 6px;
  border-radius: var(--ex-radius-sm);
  font-size: var(--ex-font-size-sm);
}

/* ============================================
   Table Wrapper
   ============================================ */
#body .ex-table-wrapper {
  overflow-x: auto;
}

/* ============================================
   Danger Section
   ============================================ */
#body .ex-section-danger {
  border: 1px solid var(--ex-danger);
}

#body .ex-section-header-danger {
  background: var(--ex-danger);
  color: white;
}

#body .ex-section-header-danger .ex-section-title {
  color: white;
}

/* ============================================
   Color Text Utilities
   ============================================ */
#body .ex-text-success { color: var(--ex-tag-green-text); }
#body .ex-text-warning { color: #D97706; }
#body .ex-text-danger { color: var(--ex-danger); }

/* ============================================
   Button Block
   ============================================ */
#body .ex-btn-block {
  width: 100%;
  justify-content: center;
}

/* ============================================
   Info Badge
   ============================================ */
#body .ex-badge-info {
  background: var(--ex-tag-blue-bg);
  color: var(--ex-tag-blue-text);
}

/* ============================================
   Promo Edit Page Layout
   ============================================ */
#body .ex-promo-edit-page {
  margin: 0;
  padding: 0;
  background: var(--ex-bg-page);
}

#body .ex-promo-edit-layout {
  display: flex;
  gap: var(--ex-spacing-lg);
  /*padding: 80px var(--ex-spacing-md) var(--ex-spacing-md);*/
  /*min-height: 100vh;*/
  max-width: 1200px;
  margin: 0 auto;

  height: calc(100vh - 4rem);
  min-height: auto;

  /*border: 2px solid blue;*/
}

#body .ex-promo-edit-layout .ex-sidebar {
  width: 444px;
  min-width: 444px;
  background: var(--ex-white);
  border-radius: var(--ex-radius-lg);
  padding: var(--ex-spacing-md);
  /*height: calc(100vh - 96px);*/
  height: auto;
  /*position: sticky;*/
  /*top: 80px;*/
  overflow-y: auto;
  /*margin: 0;*/

  height: calc(100vh - 6rem);
  margin: 1rem 0 1rem 0;
  position: relative;
  top: auto;
  overflow-x: hidden;

  /*border: 2px solid green;*/
}

#body .ex-promo-edit-layout .ex-main-content {
  flex: 1;
  max-width: 608px;
  /*padding: 0;*/
  /*padding: 1rem 0rem;*/

  overflow-y: auto;
  padding: 0;
  margin: 1rem 0 1rem 0;
  height: calc(100vh - 6rem);
}

/* Undocked Sidebar State - Collapses to thin bar on left */
#body .ex-promo-edit-layout .ex-sidebar.ex-sidebar-collapsed {
  width: 64px;
  min-width: 64px;
  padding: var(--ex-spacing-sm);
}

#body .ex-promo-edit-layout .ex-sidebar.ex-sidebar-collapsed .ex-sidebar-content {
  display: none;
}

#body .ex-promo-edit-layout .ex-sidebar.ex-sidebar-collapsed .ex-sidebar-icons {
  border-left: none;
  height: 100%;
}

#body .ex-promo-edit-layout .ex-sidebar.ex-sidebar-collapsed .ex-sidebar-inner {
  justify-content: center;
}

#body .ex-promo-edit-layout .ex-sidebar.ex-sidebar-collapsed .ex-sidebar-logo {
  display: none;
}

/* Show expand button only when collapsed */
#body .ex-sidebar-icon-btn.ex-sidebar-expand-btn {
  display: none;
}

#body .ex-promo-edit-layout .ex-sidebar.ex-sidebar-collapsed .ex-sidebar-icon-btn.ex-sidebar-expand-btn {
  display: flex;
}

/* Main content flex grow when sidebar is collapsed */
#body .ex-promo-edit-layout.sidebar-collapsed .ex-main-content {
  max-width: 100%;
  flex: 1;
}

#body .ex-sidebar-dock-btn {
  width: 24px;
  height: 24px;
  padding: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ex-pale-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

#body .ex-sidebar-dock-btn:hover {
  color: var(--ex-primary);
}

/* Sidebar Layout */
#body .ex-sidebar .ex-flex {
  display: flex;
  gap: var(--ex-spacing-md);
}

#body .ex-sidebar-icons {
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-xs);
  padding-top: var(--ex-spacing-xs);
}

#body .ex-sidebar-icon-btn {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: var(--ex-radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ex-text-primary);
  transition: all 0.2s ease;
}

#body .ex-sidebar-icon-btn.active {
  background: var(--ex-primary-light);
  color: var(--ex-primary);
}

#body .ex-sidebar-icon-btn:hover:not(.active) {
  background: var(--ex-bg-page);
}

#body .ex-sidebar-content {
  flex: 1;
  padding-left: var(--ex-spacing-md);
  border-left: 1px solid var(--ex-border);
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-sm);
}

#body .ex-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) var(--ex-spacing-sm);
}

#body .ex-sidebar-title {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  font-size: var(--ex-font-size-lg);
  color: var(--ex-text-heading);
}

#body .ex-sidebar-section {
  padding: 0 var(--ex-spacing-sm);
}

#body .ex-sidebar-divider {
  height: 1px;
  background: var(--ex-border);
  margin: var(--ex-spacing-sm) var(--ex-spacing-sm);
}

/* Status Row */
#body .ex-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) var(--ex-spacing-sm);
}

#body .ex-status-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

/* Metadata Row */
#body .ex-metadata-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) 0;
}

#body .ex-metadata-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-metadata-value {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

/* Created By */
#body .ex-created-by {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-subtle);
  background: linear-gradient(143deg, rgba(159, 56, 197, 1) 8%, rgba(37, 191, 228, 1) 90%);
}

/* Summary */
#body .ex-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#body .ex-summary-title {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-summary-text {
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-heading);
  line-height: 16px;
  margin-top: var(--ex-spacing-sm);
}

/* Input Hint */
#body .ex-input-hint {
  padding-left: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-xs);
  font-size: var(--ex-font-size-sm);
  color: var(--ex-text-placeholder);
  line-height: 16px;
}

/* Section Collapsible */
#body .ex-section {
  background: var(--ex-white);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

#body .ex-section-title {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-section-title-icon {
  width: 16px;
  height: 16px;
  color: var(--ex-text-primary);
}

#body .ex-section-title-text {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-label);
  font-weight: 400;
}

#body .ex-section-caret {
  width: 20px;
  height: 20px;
  color: var(--ex-text-primary);
  transition: transform 0.2s ease;
}

#body .ex-section.collapsed .ex-section-caret {
  transform: rotate(180deg);
}

#body .ex-section-content {
  margin-top: var(--ex-spacing-md);
  padding-bottom: var(--ex-spacing-xs);
}

#body .ex-section.collapsed .ex-section-content {
  display: none;
}

#body .ex-section-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--ex-spacing-sm);
}

/* Item Card (for schedule, qualification, etc.) */
#body .ex-item-card {
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-item-header {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-item-title {
  flex: 1;
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-subtle);
}

#body .ex-item-actions {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-item-action-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ex-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

#body .ex-item-action-btn:hover {
  color: var(--ex-primary);
}

#body .ex-item-divider {
  width: 1px;
  height: 19px;
  background: var(--ex-border);
}

#body .ex-item-content {
  margin-top: var(--ex-spacing-sm);
}

/* Empty Message in Sections */
#body .ex-empty-message {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-placeholder);
  padding: var(--ex-spacing-sm) 0;
}

/* Select Wrapper for Custom Arrow */
#body .ex-select-wrapper {
  position: relative;
}

#body .ex-select-wrapper .ex-select,
#body .ex-select-wrapper select.ex-input {
  appearance: none;
  padding-right: 40px;
}

/* Never Expires Checkbox */
#body .ex-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-sm);
}

#body .ex-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--ex-primary);
}

#body .ex-checkbox-label-text {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  line-height: 20px;
}

#body .ex-checkbox-hint {
  font-size: var(--ex-font-size-sm);
  color: var(--ex-text-placeholder);
  padding-left: 26px;
  margin-top: 2px;
}

/* ============================================
   Index Page - Promotions List
   ============================================ */

/* Index Page Container for Ultra-wide Support */
#body .ex-index-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Page-level modifier to make pages full-bleed (edge-to-edge) while keeping visual spacing */
#body .ex-index-container.page-full-bleed,
#body .page-full-bleed .ex-index-container {
  max-width: none;
  margin: 0;
  padding-left: var(--ex-spacing-md);
  padding-right: var(--ex-spacing-md);
  /* Make the container visually white and fill the viewport so it matches other template pages */
  background: var(--ex-white);
  min-height: 100vh;
}

/* Ensure promos index has breathing room below rows even if page-full-bleed isn't present */
#body .ex-index-container .ex-promo-card,
#body .page-full-bleed .ex-promo-card {
  width: 100%;
  border-radius: var(--ex-radius-md);
  box-shadow: var(--ex-shadow-md);
  /* Match Figma canvas vertical size and padding: fix height to Figma's container and apply top/bottom padding */
  min-height: 756px; /* Figma container h-[756px] */
  padding-top: var(--ex-spacing-md);
  padding-bottom: var(--ex-spacing-lg);

}

/* When used inside a full-width layout, add padding so the page matches Figma spacing */
#body .container-fluid .ex-index-container,
#body .container-fluid main .ex-index-container {
  padding-left: 16px;
  padding-right: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header Bar with Search */
#body .ex-promo-header {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  background: var(--ex-bg-page);
  border-radius: var(--ex-radius-md);
  color: var(--ex-text-primary);
  text-decoration: none;
  transition: background 0.2s ease;
}

#body .ex-icon-btn:hover {
  background: var(--ex-border);
  color: var(--ex-text-primary);
}

/* Search Container */
#body .ex-search-container {
  flex: 1;
}

#body .ex-search-field {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-xs);
  height: 32px;
  padding: 0 var(--ex-spacing-sm);
  background: var(--ex-bg-page);
  border-radius: var(--ex-radius-md);
}

/* When the input is empty, center the icon and the placeholder text together (modern browsers)
   Fallback: icon stays left and placeholder will be centered within the input itself. */
#body .ex-search-field:has(.ex-search-input:placeholder-shown) {
  justify-content: center;
}

/* Shrink the input when empty so it sits beside the icon and both can be centered as a group */
#body .ex-search-field:has(.ex-search-input:placeholder-shown) .ex-search-input {
  flex: 0 0 auto;
  width: auto;
  padding-left: 8px;
  padding-right: 8px;
}

/* JS fallback class for browsers without :has() */
#body .ex-search-field.placeholder-empty {
  justify-content: center;
}
#body .ex-search-field.placeholder-empty .ex-search-input {
  flex: 0 0 auto;
  width: auto;
  padding-left: 8px;
  padding-right: 8px;
}

#body .ex-search-icon {
  flex-shrink: 0;
} 

#body .ex-search-input {
  flex: 1;
  display: flex;
  align-items: center;
  height: 32px;
  line-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  background: transparent;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  outline: none;
  text-align: left; /* default for typed text */
}

/* Center placeholder horizontally when input is empty */
#body .ex-search-input:placeholder-shown {
  text-align: center;
}

#body .ex-search-input::placeholder {
  color: var(--ex-text-placeholder);
}

/* Title Bar with Filters */
#body .ex-promo-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ex-spacing-md);
  flex-wrap: wrap;
  gap: var(--ex-spacing-md);
}

#body .ex-page-title {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-xl);
  font-weight: 300;
  color: var(--ex-text-heading);
  margin: 0;
  line-height: 32px;
}

#body .ex-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  opacity: 0.8;
}

#body .ex-filter-btn {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-xs);
  padding: 4px 8px;
  background: var(--ex-bg-card-header);
  border: 1px solid var(--ex-pale-sky);
  border-radius: var(--ex-radius-md);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm);
  font-weight: 600;
  color: var(--ex-text-label);
  cursor: pointer;
  transition: background 0.2s ease;
}

#body .ex-filter-btn:hover {
  background: var(--ex-border);
}

/* Promo Card (Table Container) */
#body .ex-promo-card {
  background: var(--ex-white);
  border-radius: var(--ex-radius-md);
  box-shadow: var(--ex-shadow-md);
  overflow: hidden;
}

#body .ex-promo-card.ex-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ex-spacing-xl) var(--ex-spacing-md);
  text-align: center;
}

#body .ex-empty-title {
  font-size: var(--ex-font-size-lg);
  font-weight: 600;
  color: var(--ex-text-heading);
  margin: var(--ex-spacing-md) 0 var(--ex-spacing-sm) 0;
}

#body .ex-empty-text {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-placeholder);
  margin: 0;
}

/* Promo Table */
#body .ex-promo-table {
  width: 100%;
  border-collapse: collapse;
}

#body .ex-promo-table th {
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm);
  font-weight: 600;
  color: var(--ex-text-placeholder);
  text-align: left;
  border-bottom: none; /* hairline provided by thead::after for a single source of truth */
  white-space: nowrap;
}

#body .ex-promo-table td {
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  vertical-align: middle;
  height: 52px;
}

/* Figma hairline under table header (matches node 2473:8596) */
#body .ex-promo-table thead {
  position: relative;
}

#body .ex-promo-table thead::after {
  content: "";
  position: absolute;
  /* Inset so hairline extends past first and last column content: left = 16px, right = 16px */
  left: var(--ex-spacing-md);
  right: var(--ex-spacing-md);
  bottom: 0;
  height: 1px;
  background: rgba(14, 78, 153, 0.06);
  transform-origin: center;
  transform: scaleY(0.5);
  pointer-events: none;
}

/* Alternating Row Backgrounds */
#body .ex-promo-table tbody tr.ex-row-alt {
  background: var(--ex-bg-card-header);
}

/* Column Widths */
#body .ex-th-name { width: 30%; }
#body .ex-th-currency { width: 15%; }
#body .ex-th-warehouse { width: 15%; }
#body .ex-th-status { width: 10%; }
#body .ex-th-timing { width: 25%; }
#body .ex-th-action { width: 5%; text-align: right; }

/* Align first column text with Figma's content offset */
#body .ex-promo-table th.ex-th-name,
#body .ex-promo-table td.ex-td-name {
  padding-left: calc(var(--ex-spacing-md) + 15px);
}

/* Align last column (action) padding so hairline extends past it symmetrically */
#body .ex-promo-table th.ex-th-action,
#body .ex-promo-table td.ex-td-action {
  padding-right: calc(var(--ex-spacing-md) + 15px);
}

/* Promo Name Link */
#body .ex-promo-name-link {
  color: var(--ex-text-primary);
  text-decoration: none;
  font-weight: 400;
}

#body .ex-promo-name-link:hover {
  color: var(--ex-primary);
}

/* Currency Link */
#body .ex-currency-link {
  color: var(--ex-primary-dark);
  cursor: pointer;
}

/* Timing Link */
#body .ex-timing-link {
  color: var(--ex-primary-dark);
  cursor: pointer;
}

/* Status Tags */
#body .ex-status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: var(--ex-radius-md);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

#body .ex-status-enabled {
  background: var(--ex-tag-green-bg);
  color: var(--ex-tag-green-text);
}

#body .ex-status-disabled {
  background: var(--ex-tag-gray-bg);
  color: var(--ex-tag-gray-text);
}

#body .ex-status-pending {
  background: var(--ex-tag-orange-bg);
  color: var(--ex-tag-orange-text);
}

/* Menu Button */
#body .ex-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}

#body .ex-menu-btn:hover svg {
  stroke: var(--ex-primary);
}

/* ============================================
   Responsive Styles
   ============================================ */

/* Mobile Styles */
@media (max-width: 768px) {
  /* Index Page */
  #body .ex-promo-header {
    flex-wrap: wrap;
  }
  
  #body .ex-search-container {
    order: 1;
    flex: 1 1 100%;
  }
  
  #body .ex-promo-title-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  #body .ex-filter-bar {
    flex-wrap: wrap;
    width: 100%;
  }
  
  #body .ex-promo-card {
    overflow-x: auto;
  }
  
  #body .ex-promo-table {
    min-width: 800px;
  }
  
  /* Edit Page */
  #body .ex-promo-edit-layout {
    flex-direction: column;
    padding: 70px var(--ex-spacing-sm) var(--ex-spacing-md);
  }
  
  #body .ex-promo-edit-layout .ex-sidebar {
    width: 100%;
    min-width: unset;
    height: auto;
    position: relative;
    top: 0;
  }
  
  #body .ex-promo-edit-layout .ex-main-content {
    max-width: 100%;
  }
  
  #body .ex-topnav {
    padding: 0 var(--ex-spacing-sm);
  }
  
  #body .ex-topnav-title {
    font-size: var(--ex-font-size-md);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  #body .ex-btn {
    padding: 6px 16px;
    font-size: var(--ex-font-size-sm);
  }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
  #body .ex-promo-edit-layout .ex-sidebar {
    width: 320px;
    min-width: 320px;
  }
  
  #body .ex-promo-edit-layout .ex-main-content {
    max-width: 480px;
  }
  
  #body .ex-sidebar-content {
    padding-left: var(--ex-spacing-sm);
  }
}

/* Large Desktop */
@media (min-width: 1400px) {
  #body .ex-promo-edit-layout {
    padding-left: var(--ex-spacing-xl);
    padding-right: var(--ex-spacing-xl);
  }
  
  #body .ex-promo-edit-layout .ex-main-content {
    max-width: 720px;
  }
}

/* ============================================
   Edit Page - Figma Match Styles
   ============================================ */

/* Sidebar Inner Layout */
#body .ex-sidebar-inner {
  display: flex;
  gap: var(--ex-spacing-md);
  height: 100%;
}

/* Sidebar Field Styles */
#body .ex-sidebar-field {
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-field-label {
  display: block;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  margin-bottom: var(--ex-spacing-xs);
}

#body .ex-field-input {
  width: 100%;
  padding: 8px var(--ex-spacing-md);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  background: var(--ex-white);
  line-height: 24px;
  transition: border-color 0.2s ease;
}

#body .ex-field-input::placeholder {
  color: var(--ex-text-placeholder);
}

#body .ex-field-input:focus {
  outline: none;
  border-color: var(--ex-primary);
}

#body .ex-field-textarea {
  min-height: 100px;
  resize: vertical;
}

#body .ex-field-hint {
  font-size: var(--ex-font-size-sm);
  color: var(--ex-text-placeholder);
  margin-top: var(--ex-spacing-xs);
}

/* Select Wrapper */
#body .ex-select-wrapper {
  position: relative;
}

#body .ex-field-select {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

#body .ex-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ex-text-primary);
}

/* Dock Button */
#body .ex-sidebar-dock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ex-text-primary);
}

#body .ex-sidebar-dock-btn:hover {
  color: var(--ex-primary);
}

/* Generate Button - Figma: 12px Semibold, Amethyst #A037C5 */
#body .ex-generate-btn {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm); /* 12px */
  font-weight: 600; /* Semibold */
  color: var(--ex-secondary); /* #A037C5 */
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 24px;
  line-height: 16px;
}

#body .ex-generate-btn:hover {
  text-decoration: underline;
}

/* Sidebar Logo */
#body .ex-sidebar-logo {
  position: absolute;
  bottom: var(--ex-spacing-md);
  left: var(--ex-spacing-md);
  color: var(--ex-text-heading);
}

/* Count Badge (for sections) - Figma: 10px Bold, #D0E8F2 bg, #126CB8 text */
#body .ex-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 8px;
  background: var(--ex-tag-blue-bg);
  color: var(--ex-tag-blue-text);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-xs);
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
  border-radius: var(--ex-radius-sm);
}

/* Add Button (for sections) - Figma: 12px Semibold, Amethyst #A037C5 */
#body .ex-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ex-spacing-xs);
  padding: 8px 16px;
  background: none;
  border: none;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm);
  font-weight: 600;
  line-height: 16px;
  color: var(--ex-secondary);
  cursor: pointer;
  border-radius: var(--ex-radius-pill);
}

#body .ex-add-btn:hover {
  background: rgba(160, 55, 197, 0.05);
}

#body .ex-add-btn svg,
#body .ex-add-btn img {
  width: 18px;
  height: 18px;
}

/* Section Nested Items */
#body .ex-schedule-item {
  background: var(--ex-bg-page);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-schedule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-schedule-title {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-label);
}

#body .ex-schedule-actions {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-schedule-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ex-text-primary);
}

#body .ex-schedule-action-btn:hover {
  color: var(--ex-primary);
}

/* Never Expires Checkbox */
#body .ex-never-expires {
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-xs);
  margin-top: var(--ex-spacing-md);
}

#body .ex-never-expires-row {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-never-expires-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--ex-primary);
  cursor: pointer;
}

#body .ex-never-expires-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  cursor: pointer;
}

#body .ex-never-expires-hint {
  font-size: var(--ex-font-size-sm);
  color: var(--ex-text-placeholder); /* Figma: #8C959E */
  margin-left: 26px;
}

/* Qualification/Reward Info Text */
#body .ex-info-text {
  font-size: var(--ex-font-size-sm);
  color: var(--ex-primary);
  margin-top: var(--ex-spacing-sm);
}

/* Exclusive Checkbox */
#body .ex-exclusive-row {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-md);
}

#body .ex-exclusive-checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid var(--ex-text-primary);
  border-radius: 2px;
  cursor: pointer;
}

#body .ex-exclusive-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  cursor: pointer;
}

/* ============================================
   Modal Z-Index Fix
   Uses design system z-index scale to ensure
   proper stacking with Bootstrap modals
   ============================================ */
.modal {
  z-index: var(--z-modal) !important;
}

.modal-backdrop {
  z-index: var(--z-modal-backdrop) !important;
}

.modal-dialog {
  z-index: calc(var(--z-modal) + 10) !important;
}

/* ============================================
   Form Field with Icon
   ============================================ */
#body .ex-input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

#body .ex-input-with-icon .ex-input,
#body .ex-input-with-icon .ex-field-input {
  padding-right: 44px; /* Increased to accommodate icon + spacing */
}

#body .ex-input-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--ex-text-primary);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  z-index: 1;
}

#body .ex-input-icon img,
#body .ex-input-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hide native date picker indicator but keep it clickable to trigger picker */
#body .ex-input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 8px;
  padding: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  opacity: 0;
}

/* ============================================
   Rewards Read-Only Display
   ============================================ */
#body .ex-reward-card {
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-reward-header {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-reward-title {
  flex: 1;
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: rgba(83, 83, 83, 0.8);
}

#body .ex-reward-content {
  margin-top: var(--ex-spacing-sm);
}

#body .ex-reward-type-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-label);
  margin-bottom: var(--ex-spacing-xs);
}

#body .ex-reward-type-value {
  font-size: var(--ex-font-size-lg);
  color: var(--ex-text-primary);
  padding: 6px var(--ex-spacing-md);
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
}

#body .ex-reward-info {
  font-size: var(--ex-font-size-sm);
  color: var(--ex-primary);
  margin-top: var(--ex-spacing-sm);
  padding-left: var(--ex-spacing-sm);
}

/* ============================================
   Codes Summary - Figma Match
   ============================================ */
#body .ex-codes-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-sm) 0;
}

#body .ex-codes-count {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-heading);
  line-height: 20px;
}

#body .ex-codes-manage-btn {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-secondary); /* #A037C5 Amethyst */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 20px;
}

#body .ex-codes-manage-btn:hover {
  text-decoration: underline;
}

/* ============================================
   Schedule Date Row - Side by Side Layout
   ============================================ */
#body .ex-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ex-spacing-md);
}

@media (max-width: 480px) {
  #body .ex-date-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Typography Refinements - Figma Match
   ============================================ */
/* Section title text should be 14px with proper weight */
#body .ex-section-title-text {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 400;
  color: var(--ex-text-label); /* #46565F */
  line-height: 20px;
  letter-spacing: 0.02em;
}

/* Field labels should have consistent spacing */
#body .ex-field-label,
#body .ex-label {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 400;
  color: var(--ex-text-label); /* #46565F */
  line-height: 20px;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

/* Input fields typography */
#body .ex-field-input,
#body .ex-input {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 400;
  color: var(--ex-text-primary); /* #2C3943 */
  line-height: 24px;
  letter-spacing: 0.01em;
}

/* Placeholder text */
#body .ex-field-input::placeholder,
#body .ex-input::placeholder {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 400;
  color: var(--ex-text-placeholder); /* #8C959E */
}

/* Status label styling */
#body .ex-status-label {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 400;
  color: var(--ex-text-primary);
  line-height: 20px;
}

/* Metadata labels */
#body .ex-metadata-label {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 400;
  color: var(--ex-text-primary);
  line-height: 20px;
}

#body .ex-metadata-value {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 400;
  color: var(--ex-text-primary);
  line-height: 20px;
}

/* Summary text */
#body .ex-summary-text {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 600;
  color: var(--ex-text-heading);
  line-height: 18px;
}

/* ============================================
   Custom Select Component - Figma Design Match
   
   This styles the reusable select component from:
   components/select/select-ui.js
   
   Design Specs from Figma (node 2364:3199):
   - White background (#FFFFFF)
   - Border: 1px solid #E0E0E0
   - Border radius: 8px
   - Dropdown caret icon: 24x24px positioned at right
   - Placeholder color: #8C959E
   - Text color: #2C3943
   - Font size: 16px
   ============================================ */

/* Wrapper */
#body .ex-select-component {
  position: relative;
  width: 100%;
  font-family: var(--ex-font-family);
}

#body .ex-select-component.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Trigger Button */
#body .ex-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease;
  text-align: left;
  min-height: 44px;
}

#body .ex-select-trigger:hover:not(:disabled) {
  border-color: var(--ex-primary);
}

#body .ex-select-trigger:focus {
  outline: 2px solid var(--ex-primary-light);
  outline-offset: 2px;
  border-color: var(--ex-primary);
}

#body .ex-select-trigger:disabled {
  cursor: not-allowed;
  background: var(--ex-bg-page);
}

/* Trigger Text */
#body .ex-select-trigger-text {
  flex: 1;
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 400;
  color: var(--ex-text-primary);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#body .ex-select-trigger-text.ex-select-placeholder {
  color: var(--ex-text-placeholder); /* #8C959E */
}

/* Trigger Caret Icon */
#body .ex-select-trigger-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  color: var(--ex-text-primary);
  transition: transform 0.2s ease;
}

#body .ex-select-component .ex-select-trigger[aria-expanded="true"] .ex-select-trigger-icon {
  transform: rotate(180deg);
}

/* Dropdown */
#body .ex-select-dropdown {
  position: fixed;
  display: none;
  flex-direction: column;
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: var(--z-dropdown); /* Uses design system z-index scale */
}

#body .ex-select-dropdown.open {
  display: flex;
}

/* Options */
#body .ex-select-option {
  padding: 10px 14px;
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 400;
  color: var(--ex-text-primary);
  line-height: 24px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

#body .ex-select-option:hover:not(.disabled) {
  background: var(--ex-bg-page);
}

#body .ex-select-option.highlighted {
  background: var(--ex-primary-light);
}

#body .ex-select-option.selected {
  background: var(--ex-primary-light);
  color: var(--ex-primary);
  font-weight: 500;
}

#body .ex-select-option.disabled {
  color: var(--ex-text-placeholder);
  cursor: not-allowed;
}

/* ============================================
   Date Field Component - Figma Design Match
   
   This styles the reusable date field component from:
   components/date-field/date-field-ui.js
   
   Design Specs from Figma (node 2118:2244):
   - Input with calendar icon at right (24x24)
   - Placeholder text: mm/dd/yyyy in #8C959E
   - Border: 1px solid #E0E0E0
   - Border radius: 8px
   - Calendar dropdown with proper z-index
   ============================================ */

/* Date Picker Container */
#body .ex-datetime-picker-container {
  position: relative;
  width: 100%;
}

#body .ex-datetime-picker {
  position: relative;
  width: 100%;
}

/* Date Display Button (trigger) */
#body .ex-date-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease;
  text-align: left;
  min-height: 44px;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg);
  color: var(--ex-text-primary);
}

#body .ex-date-display:hover {
  border-color: var(--ex-primary);
}

#body .ex-date-display:focus {
  outline: none;
  border-color: var(--ex-primary);
  box-shadow: 0 0 0 3px rgba(18, 108, 184, 0.1);
}

/* Date Text */
#body .ex-date-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#body .ex-date-text.placeholder {
  color: var(--ex-text-placeholder);
}

/* Calendar Icon */
#body .ex-calendar-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Calendar Dropdown */
#body .ex-calendar-dropdown {
  display: none;
  position: fixed;
  z-index: var(--z-dropdown); /* Uses design system z-index scale */
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  padding: var(--ex-spacing-sm);
}

#body .ex-calendar-dropdown.show {
  display: block;
}

/* Calendar Header */
#body .ex-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) 0;
  margin-bottom: var(--ex-spacing-xs);
}

#body .ex-calendar-title {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-heading);
}

#body .ex-calendar-nav {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--ex-radius-sm);
  cursor: pointer;
  color: var(--ex-text-primary);
  transition: background-color 0.15s ease;
}

#body .ex-calendar-nav:hover {
  background: var(--ex-bg-page);
}

/* Calendar Weekdays */
#body .ex-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--ex-spacing-xs);
}

#body .ex-weekday {
  font-family: var(--ex-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--ex-text-label);
  text-align: center;
  padding: 4px;
}

/* Calendar Days Grid */
#body .ex-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

#body .ex-calendar-day {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 400;
  color: var(--ex-text-primary);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#body .ex-calendar-day:hover:not(.outside):not(.selected) {
  background: var(--ex-bg-page);
}

#body .ex-calendar-day.outside {
  color: var(--ex-text-placeholder);
  cursor: default;
}

#body .ex-calendar-day.today {
  font-weight: 600;
  color: var(--ex-primary);
}

#body .ex-calendar-day.selected {
  background: var(--ex-primary);
  color: var(--ex-white);
  font-weight: 500;
}

/* Calendar Footer */
#body .ex-calendar-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--ex-spacing-sm);
  border-top: 1px solid var(--ex-border);
  margin-top: var(--ex-spacing-sm);
}

#body .ex-calendar-select-btn {
  padding: 8px 16px;
  background: var(--ex-primary);
  color: var(--ex-white);
  border: none;
  border-radius: var(--ex-radius-sm);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#body .ex-calendar-select-btn:hover {
  background: #0E5BA6;
}

/* ============================================
   History Panel
   ============================================ */
#body .ex-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-md);
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  padding-right: var(--ex-spacing-xs);
}

#body .ex-history-entry {
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-xs);
  padding: var(--ex-spacing-sm);
  background: var(--ex-bg-page);
  border-radius: var(--ex-radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#body .ex-history-entry:hover {
  background: var(--ex-bg-card-header);
}

#body .ex-history-entry-current {
  background: rgba(175, 202, 244, 0.5);
}

#body .ex-history-entry-current:hover {
  background: rgba(175, 202, 244, 0.7);
}

#body .ex-history-entry-selected {
  box-shadow: 0 0 0 2px var(--ex-primary);
}

#body .ex-history-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#body .ex-history-version {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-heading);
}

#body .ex-history-user {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-history-user-name {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-primary);
}

#body .ex-history-meta {
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-xs);
}

#body .ex-history-date {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-history-reason {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#body .ex-history-reason-label {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-primary);
}

#body .ex-history-reason-text {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  line-height: 1.4;
}

#body .ex-empty-history {
  padding: var(--ex-spacing-lg);
  text-align: center;
}

#body .ex-empty-history p {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  margin: 0 0 var(--ex-spacing-xs);
}

#body .ex-loading-spinner {
  padding: var(--ex-spacing-lg);
  text-align: center;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-placeholder);
}

/* JSON Preview Panel */
#body .ex-history-json-preview {
  position: fixed;
  top: 80px;
  right: 16px;
  width: 600px;
  max-width: calc(100vw - 520px);
  max-height: calc(100vh - 96px);
  background: var(--ex-white);
  border-radius: var(--ex-radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: var(--z-sticky); /* Below dropdowns, but above main content */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#body .ex-json-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  background: rgba(175, 202, 244, 0.5);
}

#body .ex-json-preview-badge {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-primary);
}

#body .ex-json-preview-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--ex-radius-sm);
  cursor: pointer;
  font-size: 18px;
  color: var(--ex-text-primary);
  transition: background-color 0.15s ease;
}

#body .ex-json-preview-close:hover {
  background: var(--ex-bg-page);
}

#body .ex-json-preview-content {
  flex: 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ex-white);
  min-height: 400px;
  position: relative;
}

/* Monaco Editor Container */
#body .ex-monaco-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 400px;
}

/* Ensure Monaco diff editor fills container */
#body .ex-monaco-container .monaco-diff-editor {
  height: 100% !important;
}

/* Fallback for when Monaco fails to load */
#body .ex-json-preview-fallback {
  margin: 0;
  padding: var(--ex-spacing-md);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ex-text-primary);
  white-space: pre;
  overflow: auto;
}

/* Preview header actions container */
#body .ex-json-preview-actions {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-xs);
}

/* Mode toggle button in preview header */
#body .ex-json-preview-mode-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--ex-radius-sm);
  cursor: pointer;
  color: var(--ex-text-primary);
  transition: background-color 0.15s ease;
}

#body .ex-json-preview-mode-btn:hover {
  background: var(--ex-bg-page);
}

/* =============================================================================
   History Panel - Diff/Compare Styles
   ============================================================================= */

/* Toolbar at top of history list */
#body .ex-history-toolbar {
  padding: var(--ex-spacing-sm) 0;
  margin-bottom: var(--ex-spacing-sm);
  border-bottom: 1px solid var(--ex-border);
}

#body .ex-history-toolbar .ex-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ex-spacing-xs);
  font-size: 12px;
}

#body .ex-history-toolbar .ex-btn svg {
  flex-shrink: 0;
}

/* Compare button on each history entry */
#body .ex-history-compare-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-sm);
  cursor: pointer;
  color: var(--ex-text-muted);
  transition: all 0.15s ease;
  opacity: 0;
}

#body .ex-history-entry:hover .ex-history-compare-btn {
  opacity: 1;
}

#body .ex-history-compare-btn:hover {
  background: var(--ex-primary-soft);
  border-color: var(--ex-primary);
  color: var(--ex-primary);
}

/* Compare base indicator */
#body .ex-history-compare-indicator {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--ex-primary-soft);
  color: var(--ex-primary);
  border-radius: var(--ex-radius-sm);
}

/* History entry when it's the compare base */
#body .ex-history-entry-compare-base {
  border-color: var(--ex-primary);
  background: var(--ex-primary-soft);
}

#body .ex-history-entry-compare-base::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ex-primary);
  border-radius: var(--ex-radius-sm) 0 0 var(--ex-radius-sm);
}

/* Update entry header to accommodate compare button */
#body .ex-history-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ex-spacing-xs);
}

#body .ex-history-version {
  font-weight: 600;
  font-size: 13px;
  color: var(--ex-text-primary);
}

/* ============================================
   Toast Alert Positioning
   Fixed position alerts that appear at top of viewport.
   Uses z-index scale for proper layering.
   ============================================ */
#body .ex-toast-alert {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  max-width: 600px;
}

/* Small button variant */
#body .ex-btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

/* ============================================
   Calendar Component - Figma Design Match
   
   Standalone calendar component that can be used
   independently or with date-field.
   
   Based on Figma design (node 2109:2677):
   - 364px wide calendar grid
   - Month navigation with left/right arrows
   - 32x32px day cells
   - Colors match Figma design tokens
   ============================================ */

#body .ex-cal {
  width: 364px;
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  padding: 12px; /* Figma: 12px padding */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
  font-family: var(--ex-font-family);
}

/* Calendar Header */
#body .ex-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-cal-title {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 600;
  color: var(--ex-primary-dark); /* #0E4E99 */
  line-height: 20px;
  text-align: center;
}

#body .ex-cal-nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ex-bg-page); /* #F2F2F2 */
  border: none;
  border-radius: var(--ex-radius-md);
  cursor: pointer;
  color: var(--ex-text-primary); /* #2C3943 */
  transition: background-color 0.15s ease;
  padding: 6px;
}

#body .ex-cal-nav-btn:hover {
  background: var(--ex-border); /* #E0E0E0 */
}

#body .ex-cal-nav-btn:focus {
  outline: 2px solid var(--ex-primary-light);
  outline-offset: 2px;
}

#body .ex-cal-nav-placeholder {
  width: 32px;
  height: 32px;
  display: inline-flex;
  visibility: hidden;
}

/* Weekday Headers */
#body .ex-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: var(--ex-spacing-sm); /* 8px - Figma spec */
}

#body .ex-cal-weekday {
  width: 32px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 600;
  color: #46565F; /* Type/Limed Spruce/100 */
  line-height: 16px;
  text-align: center;
}

/* Calendar Days Grid */
#body .ex-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  row-gap: var(--ex-spacing-sm);
  padding: var(--ex-spacing-sm) 0;
}

#body .ex-cal-day {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 600;
  color: var(--ex-text-primary); /* #2C3943 - current month days */
  background: transparent;
  border: none;
  border-radius: var(--ex-radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  line-height: 20px;
}

#body .ex-cal-day:hover:not(.outside):not(.selected):not(:disabled) {
  background: var(--ex-bg-page); /* #F2F2F2 */
}

#body .ex-cal-day:focus {
  outline: 2px solid var(--ex-primary-light);
  outline-offset: 2px;
}

/* Outside month days (previous/next month) */
#body .ex-cal-day.outside {
  color: #CBCBCF; /* Neutral/Cool Gray 450 */
  cursor: default;
}

#body .ex-cal-day.outside:disabled {
  cursor: not-allowed;
}

/* Past days (before today) - .outside takes precedence */
#body .ex-cal-day.past:not(.selected):not(.outside) {
  color: var(--ex-pale-sky); /* #6C757D */
}

/* Today */
#body .ex-cal-day.today {
  color: var(--ex-secondary); /* #A037C5 - Amethyst */
  font-weight: 600;
}

/* Selected day */
#body .ex-cal-day.selected {
  background: var(--ex-primary-dark); /* #0E4E99 */
  color: var(--ex-white);
  font-weight: 600;
}

#body .ex-cal-day.selected:hover {
  background: var(--ex-primary); /* #126CB8 */
}

/* Calendar Footer */
#body .ex-cal-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--ex-spacing-sm);
  border-top: 1px solid var(--ex-border);
  margin-top: var(--ex-spacing-sm);
}

#body .ex-cal-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  background: var(--ex-primary); /* #126CB8 */
  color: var(--ex-white);
  border: none;
  border-radius: var(--ex-radius-pill); /* 24px */
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  height: 32px;
}

#body .ex-cal-select-btn:hover {
  background: #0E5A9A;
}

#body .ex-cal-select-btn:focus {
  outline: 2px solid var(--ex-primary-light);
  outline-offset: 2px;
}

/* ============================================
   Date Field Component - Figma Design Match
   
   Input field with calendar dropdown for date selection.
   The calendar dropdown anchors to the input and follows on scroll.
   
   Based on Figma design (node 2357:845):
   - Label above input
   - Input with border, 8px radius
   - Calendar icon on right
   - Dropdown below with calendar
   ============================================ */

#body .ex-date-field {
  position: relative;
  width: 100%;
  font-family: var(--ex-font-family);
}

#body .ex-date-field--disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Label */
#body .ex-date-field__label {
  display: block;
  padding-left: var(--ex-spacing-md); /* 16px */
  margin-bottom: var(--ex-spacing-xs); /* 4px */
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 400;
  color: #46565F; /* Type/Limed Spruce/100 */
  line-height: 20px;
}

/* Input Wrapper */
#body .ex-date-field__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Input */
#body .ex-date-field__input {
  width: 100%;
  padding: 6px 44px 6px 16px; /* Room for icon on right */
  background: var(--ex-white);
  border: 1px solid var(--ex-border); /* #E0E0E0 */
  border-radius: var(--ex-radius-md); /* 8px */
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 400;
  color: var(--ex-text-primary); /* #2C3943 */
  line-height: 24px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#body .ex-date-field__input::placeholder {
  color: var(--ex-text-placeholder); /* #8C959E */
}

#body .ex-date-field__input:focus {
  outline: none;
  border-color: var(--ex-primary);
  box-shadow: 0 0 0 3px rgba(18, 108, 184, 0.1);
}

#body .ex-date-field__input:disabled {
  background: var(--ex-bg-page);
  cursor: not-allowed;
}

/* Error state */
#body .ex-date-field--error .ex-date-field__input {
  border-color: #DC3545;
}

#body .ex-date-field--error .ex-date-field__input:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Icon Button */
#body .ex-date-field__icon-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ex-text-primary);
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, color 0.15s ease;
}

#body .ex-date-field__icon-btn:hover {
  opacity: 1;
  color: var(--ex-primary);
}

#body .ex-date-field__icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

#body .ex-date-field__icon-btn svg {
  width: 20px;
  height: 20px;
}

/* Error Message */
#body .ex-date-field__error {
  padding-left: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-xs);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm); /* 12px */
  color: #DC3545;
  line-height: 16px;
}

/* Calendar Anchor (for positioning) */
#body .ex-date-field__calendar-anchor {
  position: relative;
  width: 100%;
  height: 0;
}

/* Calendar Dropdown */
#body .ex-date-field__calendar-dropdown {
  display: none;
  position: fixed;
  z-index: var(--z-popover); /* Ensure calendar floats above nav/filters */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  padding: 0;
  overflow: visible;
}

#body .ex-date-field__calendar-dropdown.open {
  display: block;
}

/* Arrow pointer (optional - for visual connection to input) */
#body .ex-date-field__calendar-dropdown::before {
  content: none;
  display: none;
}

/* When dropdown is above the input */
#body .ex-date-field__calendar-dropdown--above::before {
  content: none;
  display: none;
}

/* Calendar Container within dropdown */
#body .ex-date-field__calendar-container {
  padding: 0;
}

/* =========================================================
   Calendar Popover (DateTime/Range) - Figma Time Picker

   The date-field dropdown is a transparent positioner.
   The calendar component renders the visible popover card.
   ========================================================= */

#body .ex-cal-popover {
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Figma: center */
  align-items: center;     /* Figma: center */
  gap: 8px;
  box-sizing: border-box;
}

#body .ex-cal-divider {
  height: 1px;
  width: 100%;
  background: var(--ex-border);
}

#body .ex-cal-popover__calendar {
  display: flex;
  justify-content: center;
}

#body .ex-cal-popover__footer {
  display: flex;
  justify-content: flex-end;
}

#body .ex-cal--embedded {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

#body .ex-cal-dt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#body .ex-cal-dt-row {
  display: flex;
  align-items: center; /* Changed from flex-start to center for better alignment */
  gap: 8px;
  padding: 8px 0;
  width: 100%;
}

#body .ex-cal-dt-row__label {
  font-family: var(--ex-font-family);
  font-size: 14px; /* Reduced from 16px to fit better */
  font-weight: 600;
  line-height: 20px;
  color: var(--ex-text-primary);
  white-space: nowrap;
  width: 72px; /* Fixed width to ensure consistency */
  min-width: 72px;
  flex-shrink: 0;
}

#body .ex-cal-dt-row__date-pill {
  height: 32px;
  padding: 4px 8px;
  background: #F2F2F2;
  border: none;
  border-radius: var(--ex-radius-md);
  font-family: var(--ex-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ex-text-primary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

#body .ex-cal-dt-row__date-pill.active {
  background: #DEE2E6;
  color: var(--ex-primary-dark);
  font-weight: 600;
}

#body .ex-cal-dt-row__date-pill:focus {
  outline: 2px solid rgba(18, 108, 184, 0.3);
  outline-offset: 2px;
}

#body .ex-cal-time-pill {
  height: 32px;
  padding: 4px 8px;
  background: #F2F2F2;
  border-radius: var(--ex-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

#body .ex-cal-time-pill:focus-within {
  background: #DEE2E6;
  box-shadow: 0 0 0 2px rgba(18, 108, 184, 0.2);
}

#body .ex-cal-time-pill__input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--ex-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: var(--ex-text-primary);
  text-align: center;
}

#body .ex-cal-time-pill__input:focus {
  outline: none;
  background: rgba(14, 78, 153, 0.05);
  border-radius: 4px;
}

#body .ex-cal-time-pill__separator {
  font-family: var(--ex-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--ex-text-primary);
}

/* Focus visible state for date field (keyboard navigation) */
#body .ex-date-field__input:focus-visible {
  outline: 2px solid var(--ex-primary);
  outline-offset: 1px;
}

/* Click outside overlay (for closing dropdown) */
#body .ex-date-field__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-popover) - 1);
  background: transparent;
}

/* ============================================
   Date Range Mode - Figma Design Match
   
   Range selection with start/end date highlighting.
   Based on Figma designs (nodes 2109:2483, 2109:2535)
   ============================================ */

/* Range Start Day */
#body .ex-cal-day.range-start {
  background: var(--ex-primary-dark); /* #0E4E99 */
  color: var(--ex-white);
  border-radius: var(--ex-radius-md) 0 0 var(--ex-radius-md);
}

/* Range End Day */
#body .ex-cal-day.range-end {
  background: var(--ex-primary-dark); /* #0E4E99 */
  color: var(--ex-white);
  border-radius: 0 var(--ex-radius-md) var(--ex-radius-md) 0;
}

/* Days In Range */
#body .ex-cal-day.in-range {
  background: rgba(14, 78, 153, 0.1); /* #0E4E99 at 10% */
  border-radius: 0;
}

/* Range Start + End Same Day */
#body .ex-cal-day.range-start.range-end {
  border-radius: var(--ex-radius-md);
}

/* ============================================
   Time Picker Component - Figma Design Match
   
   Based on Figma design (node 2109:2677):
   - Time display pills: 32px height
   - HH:MM input format with ":" separator
   - AM/PM toggle: 102px wide segmented control
   - Colors: #F2F2F2 bg, #DEE2E6 selected, #2C3943 text
   ============================================ */

/* Time Picker Container */
#body .ex-cal-time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 0;
  margin-top: 8px;
  border-top: 1px solid var(--ex-border); /* #E0E0E0 */
}

/* Time Label */
#body .ex-cal-time__label {
  font-family: var(--ex-font-family);
  font-size: 14px;
  font-weight: 400;
  color: #46565F; /* Type/Limed Spruce/100 */
  line-height: 16px;
  min-width: 36px;
}

/* Time Input Group (HH:MM) */
#body .ex-cal-time__input-group {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Time Input Pill */
#body .ex-cal-time__input {
  width: 48px;
  height: 32px;
  padding: 4px 8px;
  background: #F2F2F2; /* Fill/Concrete/200 */
  border: none;
  border-radius: var(--ex-radius-md); /* 8px */
  font-family: var(--ex-font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--ex-text-primary); /* #2C3943 */
  text-align: center;
  line-height: 24px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#body .ex-cal-time__input:focus {
  outline: none;
  background: #DEE2E6; /* Neutral/Geyser/400 */
  box-shadow: 0 0 0 2px rgba(18, 108, 184, 0.2);
}

#body .ex-cal-time__input::placeholder {
  color: #CBCBCF; /* Neutral/Cool Gray 450 */
}

/* Time Separator (colon) */
#body .ex-cal-time__separator {
  font-family: var(--ex-font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--ex-text-primary); /* #2C3943 */
  padding: 0 4px;
}

/* AM/PM Toggle Container */
#body .ex-cal-time__ampm {
  display: flex;
  align-items: center;
  width: 102px;
  min-width: 102px;
  height: 32px;
  padding: 2px;
  background: #F2F2F2; /* Fill/Concrete/200 */
  border-radius: var(--ex-radius-md); /* 8px */
  margin-left: 0;
  overflow: hidden;
  flex-shrink: 0;
}

/* AM/PM Option Button */
#body .ex-cal-time__ampm-option {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: var(--ex-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px; /* Figma spec */
  color: var(--ex-text-primary); /* #2C3943 */
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#body .ex-cal-time__ampm-option:hover:not(.active) {
  background: rgba(0, 0, 0, 0.05);
}

#body .ex-cal-time__ampm-option.active {
  background: var(--ex-white);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  color: var(--ex-primary-dark);
}

#body .ex-cal-time__ampm-option:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(18, 108, 184, 0.3);
}

/* ============================================
   Date Range Picker Layout - Figma Design Match
   
   Dual calendar layout for date range selection.
   Based on Figma design (node 2109:2535)
   ============================================ */

/* Date Range Picker Container */
#body .ex-date-range-picker {
  display: flex;
  flex-direction: column;
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
  padding: 12px;
}

/* Date Range Header (displays selected range) */
#body .ex-date-range-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ex-border);
  margin-bottom: 12px;
}

/* Date Display Pill */
#body .ex-date-range-picker__date-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#body .ex-date-range-picker__date-label {
  font-family: var(--ex-font-family);
  font-size: 12px;
  font-weight: 400;
  color: #46565F; /* Type/Limed Spruce/100 */
  line-height: 14px;
}

#body .ex-date-range-picker__date-value {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background: #F2F2F2; /* Fill/Concrete/200 */
  border-radius: var(--ex-radius-md);
  font-family: var(--ex-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--ex-text-primary); /* #2C3943 */
  height: 32px;
}

#body .ex-date-range-picker__date-value.active {
  background: #DEE2E6; /* Neutral/Geyser/400 */
  box-shadow: inset 0 0 0 2px var(--ex-primary);
}

/* Arrow between dates */
#body .ex-date-range-picker__arrow {
  font-size: 18px;
  color: #6C757D; /* Pale Sky */
}

/* Dual Calendar Container */
#body .ex-date-range-picker__calendars {
  display: flex;
  gap: 16px;
}

#body .ex-date-range-picker__calendars .ex-cal {
  box-shadow: none;
  border: none;
  padding: 0;
}

/* Time Section for Range */
#body .ex-date-range-picker__times {
  display: flex;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--ex-border);
  margin-top: 12px;
}

#body .ex-date-range-picker__time-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#body .ex-date-range-picker__time-label {
  font-family: var(--ex-font-family);
  font-size: 12px;
  font-weight: 400;
  color: #46565F;
  line-height: 14px;
}

/* Range Picker Footer */
#body .ex-date-range-picker__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ex-border);
  margin-top: 12px;
}

#body .ex-date-range-picker__btn {
  padding: 8px 24px;
  border-radius: var(--ex-radius-pill); /* 24px */
  font-family: var(--ex-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  height: 32px;
  transition: background-color 0.15s ease;
}

#body .ex-date-range-picker__btn--secondary {
  background: transparent;
  border: 1px solid var(--ex-border);
  color: var(--ex-text-primary);
}

#body .ex-date-range-picker__btn--secondary:hover {
  background: #F2F2F2;
}

#body .ex-date-range-picker__btn--primary {
  background: var(--ex-primary); /* #126CB8 */
  border: none;
  color: var(--ex-white);
}

#body .ex-date-range-picker__btn--primary:hover {
  background: #0E5A9A;
}

/* ============================================
   Date-Time Field Mode - Figma Design Match
   
   Date field with integrated time picker.
   Based on Figma design (node 2109:2650)
   ============================================ */

/* DateTime mode adds time below calendar */
#body .ex-date-field--datetime .ex-date-field__calendar-dropdown {
  min-width: 388px;
}

/* Date Range Field Mode */
#body .ex-date-field--daterange .ex-date-field__calendar-dropdown,
#body .ex-date-field--datetimerange .ex-date-field__calendar-dropdown {
  min-width: 780px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
  #body .ex-date-field__calendar-dropdown {
    min-width: 320px;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }

  #body .ex-cal-popover {
    width: 100%;
  }
  
  #body .ex-cal {
    width: 100%;
    min-width: 280px;
  }
  
  #body .ex-cal-day,
  #body .ex-cal-weekday {
    width: 100%;
    min-width: 28px;
  }
  
  /* Stack calendars vertically on mobile for range picker */
  #body .ex-date-range-picker__calendars {
    flex-direction: column;
    gap: 24px;
  }
  
  #body .ex-date-range-picker__times {
    flex-direction: column;
    gap: 16px;
  }
  
  #body .ex-date-field--daterange .ex-date-field__calendar-dropdown,
  #body .ex-date-field--datetimerange .ex-date-field__calendar-dropdown {
    min-width: 320px;
  }
}




/* ===== Darkmode Button ===== */

#body button img.icon_darkmode
{
    display: block;
}
#body button img.icon_lightmode
{
    display: none;
}
html.darkmode #body button img.icon_darkmode
{
    display: none;
}
html.darkmode #body button img.icon_lightmode
{
    display: block;
}