html, body {
    margin: 0;
    padding: 0;
}

/* Header */
.dxpnl-edge.t.headerPane 
{
    background-color: #EDEDED;
    background-position: left top;
    background-repeat: no-repeat;
}
.dxpnl-edge.t.headerPane.panel 
{
    padding: 0;
}
.headerMenu 
{
    border-width: 0!important;
    border-top-width: 1px!important;
}
.expandedPanel 
{
    padding: 2px!important;
}
.expandedPanel .headerMenu 
{
    border-top-width: 0!important;
}
.templateTitle 
{
    float:left;
    margin: 12px 12px 18px;
}
.expandedPanel .templateTitle 
{
    display: none;
}
.dxpnl-edge.t.headerPane.bar .templateTitle 
{
    margin: 0;
}
.templateTitle a 
{
    text-decoration: none;
    font-size: x-large;
    color: black;
}
.loginControl 
{
    float: right;
    margin: 24px 25px 12px;
    font-size: 12px;
}
.expandedPanel .loginControl
{
    float: none;
    margin-left: 12px;
    margin-bottom: 24px;
}
.loginControl a 
{
    color: black;
    text-decoration: none;
    border-bottom: dashed 1px black;
    display: inline-block;
}


/* Footer */
.dxpnl-edge.b.footerPane 
{
    background-color: #EDEDED;
}
.dxpnl-edge.b.footerPane.panel 
{
    padding: 0;
}
.footerMenu 
{
    float: right;
    padding-top: 7px;
}
.copyright 
{
    float: left;
    margin: 30px 15px 11px;
}
.content 
{
    padding: 5px;
}

/* Left Panel */
.leftPane.panel
{
    padding: 1px;
    width: 200px;
}

/* Right Panel */
.rightPane.panel
{
    padding: 0;
    width: 250px;
}

/* Account */
.accountHeader h2 
{
    margin: 10px 0 7px 0;
    font-size: 16px;
}
.accountHeader p 
{
    margin: 0;
    padding: 0;
}
.accountHeader 
{
    margin-bottom: 20px;
}


/* iOS */
.dxpnlControl_iOS.leftPane,
.dxpnlControl_iOS.rightPane,
.dxpnlControl_iOS.contentPane
{
    border-width: 1px !important;
}
.dxpnlControl_iOS.leftPane.panel
{
    width: 300px;
}
.dxpnlControl_iOS.rightPane
{
    width: 450px;
}
.dxpnlControl_iOS .templateTitle
{
    margin: 17px 25px;
}
.dxpnlControl_iOS .templateTitle a
{
    color: #303030;
    font-size: 26px;
    line-height: 1em;
    font-weight: bold;
}
.dxpnlControl_iOS .loginControl a
{
    color: #0160E7;
    text-decoration: underline;
    font-size: 20px;
    font-weight: bold;
}
.dxpnlControl_iOS.mainContentPane
{
    border-width: 0px !important;
    box-shadow: initial;
    -webkit-box-shadow: initial;
    -moz-box-shadow: initial;
}
.dxpnlControl_iOS.dxpnl-edge.b.footerPane
{
    border-width: 1px !important;
}
.dxpnlControl_iOS .accountHeader p
{
    color: #303030;
}
.dxpnlControl_iOS .accountHeader h2
{
    color: #303030;
    font-size: 26px;
    margin-bottom: 10px;
}


/* Aqua */
.dxpnlControl_Aqua.dxpnl-edge.t.headerPane,
.dxpnlControl_Aqua.dxpnl-edge.b.footerPane,
.dxpnlControl_Aqua .footerMenu li
{
    background-color: #BFDBFF;
}
.dxpnlControl_Aqua.dxpnl-edge.t.headerPane
{
    background-image: url('images/AquaHeader.jpg');
}
.dxpnlControl_Aqua .accountHeader h2
{
    color: #5689C5;
}
.dxpnlControl_Aqua .loginControl a,
.dxpnlControl_Aqua .templateTitle a
{
    color: White;
    border-color: White;
}


/* DevEx */
.dxpnlControl_DevEx.dxpnl-edge.t.headerPane,
.dxpnlControl_DevEx.dxpnl-edge.b.footerPane,
.dxpnlControl_DevEx .footerMenu li
{
    background-color: #F2F3F4;
}
.dxpnlControl_DevEx .templateTitle a,
.dxpnlControl_DevEx .loginControl,
.dxpnlControl_DevEx .loginControl a
{
    color: #4B4B57;
}
.dxpnlControl_DevEx .loginControl a 
{
    border-bottom-color: #4B4B57;
}


/* BlackGlass */
.dxpnlControl_BlackGlass.dxpnl-edge.t.headerPane,
.dxpnlControl_BlackGlass.dxpnl-edge.b.footerPane,
.dxpnlControl_BlackGlass .footerMenu li
{
    background-color: #2A2A2A;
    color: white;
}
.dxpnlControl_BlackGlass.dxpnl-edge.t.headerPane
{
    background-image: url('images/BlackGlassHeader.jpg');
}
.dxpnlControl_BlackGlass .leftPanel li[class$="dxnb-last"] ul
{
    border-bottom: 1px solid black;
}
.dxpnlControl_BlackGlass .accountHeader p
{
    color: #585858;
}
.dxpnlControl_BlackGlass .loginControl a,
.dxpnlControl_BlackGlass .templateTitle a
{
    color: White;
    border-color: White;
}


/* Glass */
.dxpnlControl_Glass.dxpnl-edge.t.headerPane,
.dxpnlControl_Glass.dxpnl-edge.b.footerPane,
.dxpnlControl_Glass .footerMenu li
{
    background-color: #CFE0E7;
}
.dxpnlControl_Glass.dxpnl-edge.t.headerPane
{
    background-image: url('images/GlassHeader.jpg');
}
.dxpnlControl_Glass .footerMenu *
{
    background-image: none !important;
}
.dxpnlControl_Glass .templateTitle a,
.dxpnlControl_Glass .loginControl,
.dxpnlControl_Glass .loginControl a
{
    color: #4B4B57;
}
.dxpnlControl_Glass .loginControl a 
{
    border-bottom-color: #4B4B57;
}
.dxpnlControl_Glass .accountHeader h2
{
    color: #387FA4;
}
.dxpnlControl_Glass .accountHeader p
{
    color: #575757;
}



/* Office2003Blue */
.dxpnlControl_Office2003Blue.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2003Blue.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2003Blue .footerMenu li
{
    background-color: #BCD4F6;
}
.dxpnlControl_Office2003Blue .footerMenu div
{
    background: transparent none;
}
.dxpnlControl_Office2003Blue .leftPanel > ul
{
    background: transparent none;
}
.dxpnlControl_Office2003Blue .templateTitle a,
.dxpnlControl_Office2003Blue .loginControl,
.dxpnlControl_Office2003Blue .loginControl a
{
    color: #4B4B57;
}
.dxpnlControl_Office2003Blue .loginControl a 
{
    border-bottom-color: #4B4B57;
}
.dxpnlControl_Office2003Blue .accountHeader p
{
    color: #424242;
}


/* Office2003Olive */
.dxpnlControl_Office2003Olive.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2003Olive.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2003Olive .footerMenu li
{
    background-color: #D6DCBB;
}
.dxpnlControl_Office2003Olive .footerMenu div
{
    background: transparent none;
}
.dxpnlControl_Office2003Olive .leftPanel > ul
{
    background: transparent none;
}
.dxpnlControl_Office2003Olive .templateTitle a,
.dxpnlControl_Office2003Olive .loginControl,
.dxpnlControl_Office2003Olive .loginControl a
{
    color: #4B4B57;
}
.dxpnlControl_Office2003Olive .loginControl a 
{
    border-bottom-color: #4B4B57;
}
.dxpnlControl_Office2003Olive .accountHeader p
{
    color: #424242;
}

/* Office2003Silver */
.dxpnlControl_Office2003Silver.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2003Silver.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2003Silver .footerMenu li
{
    background-color: #D0D0DE;
}
.dxpnlControl_Office2003Silver .footerMenu div
{
    background: transparent none;
}
.dxpnlControl_Office2003Silver .leftPanel > ul
{
    background: transparent none;
}
.dxpnlControl_Office2003Silver .templateTitle a,
.dxpnlControl_Office2003Silver .loginControl,
.dxpnlControl_Office2003Silver .loginControl a
{
    color: #4B4B57;
}
.dxpnlControl_Office2003Silver .loginControl a
{
    border-bottom-color: #4B4B57;
}
.dxpnlControl_Office2003Silver .accountHeader p
{
    color: #424242;
}

/* Office2010Black */
.dxpnlControl_Office2010Black.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2010Black.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2010Black .footerMenu li
{
    background-color: #393939;
    color: white;
}
.dxpnlControl_Office2010Black .footerMenu a
{
    color: white !important;
}
.dxpnlControl_Office2010Black .accountHeader h2
{
    color: #3C3C3C;
}
.dxpnlControl_Office2010Black .loginControl a,
.dxpnlControl_Office2010Black .templateTitle a
{
    color: White;
    border-color: White;
}


/* Office2010Blue */
.dxpnlControl_Office2010Blue.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2010Blue.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2010Blue .footerMenu li
{
    background-color: #D3E4F6;
}
.dxpnlControl_Office2010Blue .templateTitle a,
.dxpnlControl_Office2010Blue .loginControl,
.dxpnlControl_Office2010Blue .loginControl a
{
    color: Black;
}
.dxpnlControl_Office2010Blue .loginControl a 
{
    border-bottom-color: Black;
}
.dxpnlControl_Office2010Blue .accountHeader h2
{
    color: #498BC2;
}


/* Office2010Silver */
.dxpnlControl_Office2010Silver.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2010Silver.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2010Silver .footerMenu li
{
    background-color: #A9ACB4;
    color: white;
}
.dxpnlControl_Office2010Silver .accountHeader h2
{
    color: #3B3B3B;
}
.dxpnlControl_Office2010Silver .loginControl a,
.dxpnlControl_Office2010Silver .templateTitle a
{
    color: White;
    border-color: White;
}



/* PlasticBlue */
.dxpnlControl_PlasticBlue.dxpnl-edge.t.headerPane,
.dxpnlControl_PlasticBlue.dxpnl-edge.b.footerPane,
.dxpnlControl_PlasticBlue .footerMenu li
{
    background-color :#3C4F8F;
    color: white;
}
.dxpnlControl_PlasticBlue.dxpnl-edge.t.headerPane
{
    background-image: url('images/PlasticBlueHeader.jpg');
}
.dxpnlControl_PlasticBlue .accountHeader h2
{
    color: #5A83D0;
}
.dxpnlControl_PlasticBlue .accountHeader p
{
    color: #575757;
}
.dxpnlControl_PlasticBlue .loginControl a,
.dxpnlControl_PlasticBlue .templateTitle a
{
    color: White;
    border-color: White;
}


/* RedWine */
.dxpnlControl_RedWine.dxpnl-edge.t.headerPane,
.dxpnlControl_RedWine.dxpnl-edge.b.footerPane,
.dxpnlControl_RedWine .footerMenu li
{
    background-color: #78002B;
    color: white;
}
.dxpnlControl_RedWine.dxpnl-edge.t.headerPane
{
    background-image: url('images/RedWineHeader.jpg');
    background-position: top right;
}
.dxpnlControl_RedWine .footerMenu div 
{
    background: transparent none;
}
.dxpnlControl_RedWine .accountHeader h2
{
    color: #8A0A37;
}
.dxpnlControl_RedWine .loginControl a,
.dxpnlControl_RedWine .templateTitle a
{
    color: White;
    border-color: White;
}


/* SoftOrange */
.dxpnlControl_SoftOrange.dxpnl-edge.t.headerPane,
.dxpnlControl_SoftOrange.dxpnl-edge.b.footerPane,
.dxpnlControl_SoftOrange .footerMenu li
{
    background-color: #F9F9F9 !important;
    background-image: none !important;
}
.dxpnlControl_SoftOrange .templateTitle a,
.dxpnlControl_SoftOrange .loginControl,
.dxpnlControl_SoftOrange .loginControl a
{
    color: Black;
}
.dxpnlControl_SoftOrange .loginControl a 
{
    border-bottom-color: Black;
}
.dxpnlControl_SoftOrange .accountHeader h2
{
    color: Black;
}
.dxpnlControl_SoftOrange .accountHeader p
{
    color: #707070;
}


/* Youthful */
.dxpnlControl_Youthful.dxpnl-edge.t.headerPane,
.dxpnlControl_Youthful.dxpnl-edge.b.footerPane,
.dxpnlControl_Youthful .footerMenu li
{
    background-color: #8AA150;
    color: white !important;
}
.dxpnlControl_Youthful .accountHeader h2
{
    color: #80A70E;
}
.dxpnlControl_Youthful .loginControl a,
.dxpnlControl_Youthful .templateTitle a
{
    color: White;
    border-color: White;
}

/* Metropolis */
.dxpnlControl_Metropolis.dxpnl-edge.t.headerPane,
.dxpnlControl_Metropolis .footerMenu li
{
    background-color: White;
    color: Black;
}
.dxpnlControl_Metropolis.rightPane
{
    width: 400px;
}
.dxpnlControl_Metropolis .accountHeader h2
{
    color: #3B3B3B;
}
.dxpnlControl_Metropolis .loginControl a,
.dxpnlControl_Metropolis .templateTitle a
{
    color: Black;
    border-color: Black;
}
.dxpnlControl_Metropolis .templateTitle a 
{
    font-size: 28px;
}

/* MetropolisBlue */
.dxpnlControl_MetropolisBlue.dxpnl-edge.t.headerPane,
.dxpnlControl_MetropolisBlue .footerMenu li
{
    background-color: White;
    color: Black;
}
.dxpnlControl_MetropolisBlue.rightPane
{
    width: 400px;
}
.dxpnlControl_MetropolisBlue .accountHeader h2
{
    color: #3B3B3B;
}
.dxpnlControl_MetropolisBlue .loginControl a,
.dxpnlControl_MetropolisBlue .templateTitle a
{
    color: Black;
    border-color: Black;
}
.dxpnlControl_MetropolisBlue .templateTitle a 
{
    font-size: 28px;
}

/* Moderno */
.dxpnlControl_Moderno.dxpnl-edge.t.headerPane,
.dxpnlControl_Moderno .footerMenu li
{
    background-color: White;
    color: Black;
}
.dxpnlControl_Moderno.headerPane .headerMenu .dxm-main
{
    border-color: #d1d1d1;
    border-style: solid;
}
.dxpnlControl_Moderno.leftPane
{
    padding: 0px;
}
.dxpnlControl_Moderno.leftPane .dxnbLite_Moderno .dxnb-gr:first-child .dxnb-header,
.dxpnlControl_Moderno.leftPane .dxnbLite_Moderno .dxnb-gr:first-child .dxnb-headerCollapsed
{
    border-top: 0px;
}
.dxpnlControl_Moderno.rightPane
{
    width: 350px;
}
.dxpnlControl_Moderno .accountHeader h2
{
    color: #3B3B3B;
}
.dxpnlControl_Moderno .loginControl a,
.dxpnlControl_Moderno .templateTitle a
{
    font-size: 14px;
    color: #0072c6;
    border-color: #0072c6;
}
.dxpnlControl_Moderno .templateTitle a 
{
    font-size: 28px;
}
.dxpnlControl_Moderno .contentPane .dxgvControl_Moderno .dxgvTable_Moderno
{
    border: 0!important;
}
.dxpnlControl_Moderno .contentPane .dxgvControl_Moderno .dxgvHeader_Moderno
{
    border-top: 0!important;
}
.dxpnlControl_Moderno.dxpnl-edge.b.footerPane 
{
    background: #EDEDED;
}

/* Mulberry */
.dxpnlControl_Mulberry .footerMenu li
{
    background-color: White;
    color: Black;
}
.dxpnlControl_Mulberry .accountHeader h2
{
    color: #3B3B3B;
}
.dxpnlControl_Mulberry .loginControl a,
.dxpnlControl_Mulberry .templateTitle a
{
    color: #BF4E6A;
    border-color: #BF4E6A;
    font-size: 14px;
}
.dxpnlControl_Mulberry .templateTitle a 
{
    font-size: 28px;
}
.dxpnlControl_Mulberry.dxpnl-edge.t.headerPane,
.dxpnlControl_Mulberry.dxpnl-edge.b.footerPane
{
    background: #F1F2F5;
}
.dxpnlControl_Mulberry .contentPane .dxgvControl_Mulberry .dxgvTable_Mulberry
{
    border: 0!important;
}
.dxpnlControl_Mulberry .contentPane .dxgvControl_Mulberry .dxgvHeader_Mulberry
{
    border-top: 0!important;
}


/* =========================================================================
   PREMIUM REDESIGN — Crystal ERP navbar + sidebar chrome
   Applies on top of the active DevExpress theme (PlasticBlue). Only touches
   the header/menu/footer chrome and dashboard KPI cards; DevExpress grids,
   editors, popups etc. elsewhere in the app are untouched.
   ========================================================================= */

:root{
    --c-ink-950:#0b0f1a;
    --c-ink-900:#111726;
    --c-ink-800:#1a2338;
    --c-ink-700:#26314c;
    --c-garnet-700:#5f2028;
    --c-garnet-600:#7d2b35;
    --c-garnet-500:#96343f;
    --c-gold-500:#b98f2c;
    --c-gold-400:#cba53d;

    --c-bg:#f5f2ea;
    --c-surface:#ffffff;
    --c-surface-2:#faf8f2;
    --c-border:#e5e0d3;
    --c-text:#1c2333;
    --c-text-muted:#5b6272;
    --c-text-faint:#8a8f9d;

    --c-onnavy:#c9cfe0;
    --c-onnavy-strong:#ffffff;
    --c-onnavy-faint:#8891ac;

    --c-shadow-sm: 0 1px 2px rgba(20,20,30,0.08);
    --c-shadow-md: 0 6px 20px -4px rgba(20,20,30,0.16);
    --c-shadow-lg: 0 20px 46px -10px rgba(11,15,26,0.45);

    --c-navbar-h: 58px;
    --c-sidebar-w: 250px;
}

html, body{
    background: var(--c-bg);
    font-family: -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color: var(--c-text);
}

/* ---- Top navbar (headerTop) --------------------------------------------- */

.headerPane.panel,
.headerPane.dxpnl-edge.t
{
    background: var(--c-ink-950) !important;
    background-image: none !important;
}

.crystal-navbar{
    display:flex;
    align-items:center;
    gap:16px;
    min-height: var(--c-navbar-h);
    margin:0 !important;
    padding:0 18px !important;
    background: var(--c-ink-950);
    color:#eef0f6;
    float:none !important;
}

.crystal-brand{
    display:flex;
    align-items:center;
    gap:9px;
    padding-right:16px;
    border-right:1px solid rgba(255,255,255,0.1);
    font-size:16px;
    font-weight:600;
    color:#f6efe0;
    letter-spacing:0.01em;
    white-space:nowrap;
}
.crystal-brand svg{ width:18px; height:18px; color:var(--c-gold-400); flex:none; }

.crystal-brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.25;
    padding-left:14px;
}
.crystal-brand-text .templateTitle,
.crystal-brand-text .templateTitle *{
    margin:0 !important;
    padding:0 !important;
    float:none !important;
}
.crystal-brand-text .dxlbl,
.crystal-brand-text span{
    font-size:13px !important;
    color:var(--c-onnavy) !important;
}
.crystal-brand-text .dxlbl:first-child{
    font-size:13.5px !important;
    color:#fff !important;
    font-weight:600 !important;
}

.crystal-navbar .loginControl{
    float:none !important;
    margin:0 0 0 auto !important;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12.5px;
}
.crystal-navbar .loginControl a{
    color:#c9cfe0 !important;
    border:1px solid rgba(255,255,255,0.16) !important;
    border-radius:6px;
    padding:6px 12px;
    text-decoration:none !important;
    transition:background 0.15s ease,color 0.15s ease;
}
.crystal-navbar .loginControl a:hover{
    background:rgba(255,255,255,0.08);
    color:#fff !important;
}
.crystal-navbar .loginControl span,
.crystal-navbar .loginControl .bold{
    color:var(--c-onnavy);
}

/* ---- Sidebar toggle button (navbar) -------------------------------------- */

.crystal-sidebar-toggle{
    flex:none;
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    background:transparent;
    border:1px solid rgba(255,255,255,0.16);
    border-radius:7px;
    color:#c9cfe0;
    cursor:pointer;
    padding:0;
    transition:background 0.15s ease, color 0.15s ease;
}
.crystal-sidebar-toggle svg{ width:17px; height:17px; }
.crystal-sidebar-toggle:hover{ background:rgba(255,255,255,0.08); color:#fff; }

/* ---- Sidebar (headerMenu / ASPxMenu, forced Vertical orientation) ------- */

.crystal-sidebar{
    background: var(--c-ink-900) !important;
    padding:16px 6px 24px !important;
    float:none !important;
    box-sizing:border-box;
    max-width:100%;
    position:relative;
    transition:transform 0.2s ease;
}
.crystal-sidebar::before{
    content:"Navigation";
    display:block;
    padding:0 12px 8px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--c-onnavy-faint);
}

@media (min-width: 500px){
    .crystal-sidebar{
        position:fixed;
        top: var(--c-navbar-h);
        left:0;
        bottom:0;
        width: var(--c-sidebar-w);
        /* overflow MUST stay visible so the flyout submenu can extend past
           the 250px column and paint over the content area. Any scrollable
           ancestor (overflow:auto) would clip the flyout, because the flyout
           is a DOM descendant of the sidebar — so we cannot add sidebar
           scrolling without breaking the flyout. Long role menus extend down
           the fixed column; see note if that ever needs paging. */
        overflow:visible !important;
        border-right:1px solid rgba(255,255,255,0.06);
        z-index:1000;
    }
    .mainContentPane{
        margin-left: var(--c-sidebar-w) !important;
        transition:margin-left 0.2s ease;
        position:relative;
        z-index:1;
    }
    .footerPane{
        margin-left: var(--c-sidebar-w) !important;
        transition:margin-left 0.2s ease;
        position:relative;
        z-index:1;
    }
    body.crystal-sidebar-collapsed .crystal-sidebar{
        transform:translateX(-100%);
    }
    body.crystal-sidebar-collapsed .mainContentPane,
    body.crystal-sidebar-collapsed .footerPane{
        margin-left:0 !important;
    }
}
@media (prefers-reduced-motion: reduce){
    .crystal-sidebar, .mainContentPane, .footerPane{ transition:none !important; }
}

/* Width safety net — scoped to the top-level sidebar rows only (never the
   flyout dropdown, which needs to size itself independently of the 250px
   column; a universal `.crystal-sidebar *` selector here previously clamped
   the dropdown to the sidebar's own width too). */
.crystal-sidebar{
    box-sizing:border-box !important;
    max-width:100%;
}
.crystal-sidebar > .dxm-main,
.crystal-sidebar > .dxm-main > ul,
.crystal-sidebar .dxm-item,
.crystal-sidebar .dxm-content
{
    box-sizing:border-box !important;
    max-width:100% !important;
}

/* Full-width rows. DevExpress sizes menu items to their content, leaving dead
   space on the right; this forces the whole menu structure to fill the column.
   The flyout CONTAINER (.dxm-popOut / .dxm-popup) is explicitly excluded so it
   keeps sizing to its own content — only elements NOT inside a popout stretch. */
.crystal-sidebar .dxm-main,
.crystal-sidebar .dxm-vertical,
.crystal-sidebar .dxm-main ul,
.crystal-sidebar .dxm-main table,
.crystal-sidebar .dxm-main tbody,
.crystal-sidebar .dxm-main tr,
.crystal-sidebar .dxm-main td,
.crystal-sidebar .dxm-main li,
.crystal-sidebar .dxm-item
{
    width:100% !important;
    box-sizing:border-box !important;
}
.crystal-sidebar .dxm-main tr{ display:block !important; }
.crystal-sidebar .dxm-main td{ display:block !important; }
.crystal-sidebar .dxm-item{ display:block !important; }

/* The clickable row fills its full-width parent. */
.crystal-sidebar .dxm-content{
    width:auto !important;
    box-sizing:border-box !important;
}

/* Re-exempt the flyout: its container must NOT be forced to 100% of the
   sidebar (that would clamp it back to the column and re-clip the text).
   Only width is reset here — display/position stay owned by DevExpress so the
   click-to-open toggle keeps working. */
.crystal-sidebar .dxm-popOut,
.crystal-sidebar .dxm-popup{
    width:auto !important;
}

.crystal-sidebar .dxm-item,
.crystal-sidebar li,
.crystal-sidebar table,
.crystal-sidebar tr,
.crystal-sidebar td,
.crystal-sidebar .dxm-main,
.crystal-sidebar .dxm-groupSpacing
{
    background:transparent !important;
    border:0 !important;
}

.crystal-sidebar .dxm-content,
.crystal-sidebar a
{
    display:flex !important;
    align-items:center !important;
    color: var(--c-onnavy) !important;
    font-size:13.5px !important;
    font-weight:500 !important;
    line-height:1.3 !important;
    padding:11px 14px !important;
    margin:2px 4px !important;
    border-radius:8px !important;
    text-decoration:none !important;
    transition:background 0.12s ease, color 0.12s ease !important;
}

.crystal-sidebar .dxm-hovered .dxm-content,
.crystal-sidebar a:hover
{
    background:rgba(255,255,255,0.06) !important;
    color:#fff !important;
}

.crystal-sidebar .dxm-selected > .dxm-content,
.crystal-sidebar .dxm-focused > .dxm-content
{
    background:rgba(185,143,44,0.16) !important;
    color:#fff !important;
    box-shadow:inset 3px 0 0 var(--c-gold-500) !important;
}

.crystal-sidebar .dxm-groupSpacing{ border-collapse:collapse !important; }

/* Flyout indicator arrow on parent items (Freight Management etc.) */
.crystal-sidebar .dxm-content .dxm-popOutImg,
.crystal-sidebar .dxm-content img[src*="Arrow"],
.crystal-sidebar .dxm-content img[src*="arrow"]
{
    margin-left:auto !important;
    filter:brightness(0) invert(1) !important;
    opacity:0.55 !important;
}

/* Submenu panel: styled as a dropdown. Positioning/show-hide is left to
   DevExpress's own click handling — only colors are themed. */
.crystal-sidebar .dxm-popOut,
.crystal-sidebar .dxm-popup
{
    background:var(--c-ink-800) !important;
    border:1px solid rgba(255,255,255,0.1) !important;
    box-shadow:var(--c-shadow-lg) !important;
    border-radius:9px !important;
    padding:6px !important;
    margin-left:6px !important;
    max-width:none !important;
    z-index:9999 !important;
}
.crystal-sidebar .dxm-popOut .dxm-content,
.crystal-sidebar .dxm-popup .dxm-content
{
    white-space:nowrap;
    padding:9px 16px !important;
    font-size:13px !important;
}
.crystal-sidebar .dxm-popOut .dxm-hovered .dxm-content,
.crystal-sidebar .dxm-popup .dxm-hovered .dxm-content
{
    background:rgba(255,255,255,0.09) !important;
}

/* ---- Main content area --------------------------------------------------- */

.mainContentPane{
    background:var(--c-bg) !important;
    padding:22px 22px 56px !important;
    box-sizing:border-box;
    min-height: calc(100vh - var(--c-navbar-h));
}
.mainContentPane.panel{ border:0 !important; box-shadow:none !important; }

/* Let content controls use the full inner width of the screen. */
.mainContentPane [class*="dxgvControl"],
.mainContentPane [class*="dxtb"],
.mainContentPane [class*="dxgvToolbar"]{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

/* Per-page layout wrapper — SITE-WIDE. Every module page wraps its body in
   <div class="row"><div class="column left">…</div></div>, and each page's own
   inline CSS pins .left to width:80% with 10% side margins, and .column to
   float:left + padding + a fixed height:700px. This override (matching what
   was toggled off in DevTools) makes every page's content fill the full width,
   drop the float, drop the fixed height, and clear the inline white so the
   page background shows through. Scoped to .mainContentPane, so it never
   touches the navbar/sidebar. */
.mainContentPane .row{
    width:100% !important;
    margin:0 !important;
    display:block !important;
}
.mainContentPane .column,
.mainContentPane .column.left,
.mainContentPane .left{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    height:auto !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    background:transparent !important;
}
/* A few pages also use a .right sidebar column with a fixed height/scroll;
   let it flow full-width too so nothing is boxed or clipped. */
.mainContentPane .right{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    overflow:visible !important;
    background:transparent !important;
}

/* ---- Footer --------------------------------------------------------------- */

.footerPane.panel{
    background:var(--c-surface-2) !important;
    border-top:1px solid var(--c-border) !important;
}
.footerPane .copyright{ color:var(--c-text-faint); font-size:12px; }

/* ---- Dashboard KPI cards (Accounts_home.aspx) ----------------------------- */

.crystal-kpi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:14px;
    margin: 4px 0 22px;
    max-width:1180px;
}
.crystal-kpi-card{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:10px;
    padding:14px 16px 12px;
    box-shadow:var(--c-shadow-sm);
}
.crystal-kpi-card .k-label{
    font-size:11px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--c-text-faint);
    font-weight:600;
    margin-bottom:8px;
}
.crystal-kpi-card .k-value{
    font-size:17px;
    font-weight:600;
    color:var(--c-text);
}
.crystal-kpi-card.editable{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.crystal-kpi-card.editable input[type="text"]{
    width:56px;
    text-align:center;
    font-size:16px;
    font-weight:600;
    border:1px solid var(--c-border);
    border-radius:6px;
    padding:7px 4px;
    background:var(--c-surface-2);
    color:var(--c-text);
}
.crystal-kpi-card.editable input[type="text"]:focus{
    outline:none;
    border-color:var(--c-gold-500);
    box-shadow:0 0 0 3px rgba(185,143,44,0.35);
}

.crystal-panel{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:10px;
    box-shadow:var(--c-shadow-sm);
    padding:18px 20px 20px;
    max-width:1180px;
    overflow-x:auto;
}
.crystal-panel h3{
    font-size:14.5px;
    font-weight:700;
    margin:0 0 14px;
    color:var(--c-text);
}


/* =========================================================================
   CONTENT-PAGE THEMING — applies the Crystal palette to the DevExpress grids,
   toolbars, buttons, editors and titles inside every module page.
   Everything here is scoped under .mainContentPane so the navbar/sidebar are
   never affected. Substring class selectors ([class*="..."]) are used so the
   rules match DevExpress's theme-suffixed classes (e.g. dxgvHeader_PlasticBlue)
   without needing to hard-code the active skin name.
   ========================================================================= */

/* Base typography inside content */
.mainContentPane{
    font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--c-text);
}

/* Page titles (Create New Transporter, etc.) */
.mainContentPane h1,
.mainContentPane h2,
.mainContentPane h3{
    color:var(--c-text) !important;
    font-weight:700 !important;
    letter-spacing:-0.01em;
}

/* ---- Grids (ASPxGridView) ------------------------------------------------ */

/* Grid container: card treatment */
.mainContentPane [class*="dxgvControl"]{
    background:var(--c-surface) !important;
    border:1px solid var(--c-border) !important;
    border-radius:12px !important;
    box-shadow:var(--c-shadow-md) !important;
    overflow:hidden !important;
    font-size:13px !important;
}
.mainContentPane [class*="dxgvControl"] table{ background:transparent !important; border-collapse:collapse !important; }

/* Header row -> garnet brand band, uppercase micro-caps, horizontal rule only */
.mainContentPane [class*="dxgvHeader"]{
    background:var(--c-garnet-600) !important;
    background-image:linear-gradient(180deg, var(--c-garnet-500), var(--c-garnet-700)) !important;
    color:#fbeee0 !important;
    border:0 !important;
    border-bottom:2px solid var(--c-garnet-700) !important;
    font-weight:600 !important;
    font-size:11px !important;
    letter-spacing:0.06em !important;
    text-transform:uppercase !important;
    padding:13px 16px !important;
    height:auto !important;
}
.mainContentPane [class*="dxgvHeader"] a,
.mainContentPane [class*="dxgvHeader"] td{ color:#fbeee0 !important; }
.mainContentPane [class*="dxgvHeader"]:hover{
    background-image:linear-gradient(180deg, var(--c-garnet-500), var(--c-garnet-600)) !important;
}

/* Group panel ("Drag a column header here…") */
.mainContentPane [class*="dxgvGroupPanel"]{
    background:var(--c-surface-2) !important;
    background-image:none !important;
    color:var(--c-text-muted) !important;
    border:0 !important;
    border-bottom:1px solid var(--c-border) !important;
    font-size:12px !important;
    padding:11px 16px !important;
}

/* Data rows: horizontal separators only, comfortable padding, zebra + hover */
.mainContentPane [class*="dxgvDataRow"] td{
    border:0 !important;
    border-bottom:1px solid var(--c-border) !important;
    color:var(--c-text) !important;
    padding:11px 16px !important;
    background:var(--c-surface) !important;
}
.mainContentPane [class*="dxgvDataRow"]:nth-child(even) td{
    background:var(--c-surface-2) !important;
}
.mainContentPane [class*="dxgvDataRow"]:hover td,
.mainContentPane [class*="dxgvFocusedRow"] td,
.mainContentPane [class*="dxgvSelectedRow"] td{
    background:rgba(185,143,44,0.10) !important;
}

/* Filter row: subtle band, cleaner inputs */
.mainContentPane [class*="dxgvFilterRow"] td{
    background:var(--c-surface-2) !important;
    border:0 !important;
    border-bottom:1px solid var(--c-border) !important;
    padding:8px 12px !important;
}

/* Command column (Edit / New / Delete) — clean subtle pill links, NOT the big
   garnet action-button gradient (which the generic dxbButton rule below would
   otherwise apply). This block is more specific, so it wins. */
.mainContentPane [class*="dxgvCommandColumn"] a,
.mainContentPane [class*="dxgvCommandColumn"] a:link,
.mainContentPane [class*="dxgvCommandColumn"] a:visited,
.mainContentPane [class*="dxgvCommandColumn"] [class*="dxbButton"],
.mainContentPane [class*="dxgvCommand"] [class*="dxbButton"]{
    display:inline-block !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    color:var(--c-garnet-600) !important;
    font-weight:600 !important;
    font-size:12.5px !important;
    text-decoration:none !important;
    padding:3px 7px !important;
    margin:0 1px !important;
    border-radius:5px !important;
}
.mainContentPane [class*="dxgvCommandColumn"] [class*="dxbButton"] *,
.mainContentPane [class*="dxgvCommand"] [class*="dxbButton"] *{
    color:var(--c-garnet-600) !important;
    background:transparent !important;
    background-image:none !important;
}
.mainContentPane [class*="dxgvCommandColumn"] a:hover,
.mainContentPane [class*="dxgvCommandColumn"] [class*="dxbButton"]:hover,
.mainContentPane [class*="dxgvCommand"] [class*="dxbButton"]:hover{
    background:rgba(150,52,63,0.10) !important;
    color:var(--c-garnet-700) !important;
    filter:none !important;
}

/* Footer / status bar / pager — the strip at the bottom of the grid. Covers
   every DevExpress bottom-panel class so the leftover PlasticBlue bar is gone
   whichever one this grid renders. */
.mainContentPane [class*="dxgvPager"],
.mainContentPane [class*="dxgvStatusBar"],
.mainContentPane [class*="dxgvFooter"],
.mainContentPane [class*="dxgvEmptyDataRow"],
.mainContentPane [class*="dxgv"][class*="Bottom"]{
    background:var(--c-garnet-700) !important;
    background-image:none !important;
    border:0 !important;
    border-top:1px solid var(--c-garnet-700) !important;
    color:#fbeee0 !important;
    padding:10px 14px !important;
}
.mainContentPane [class*="dxgvPager"] a,
.mainContentPane [class*="dxgvPager"] span,
.mainContentPane [class*="dxgvStatusBar"] a,
.mainContentPane [class*="dxgvStatusBar"] span,
.mainContentPane [class*="dxgvFooter"] td{ color:#fbeee0 !important; }
.mainContentPane [class*="dxpButton"][class*="Current"],
.mainContentPane [class*="dxpCurrentPageNumber"]{
    background:rgba(255,255,255,0.18) !important;
    color:#fff !important;
    border-radius:5px !important;
    padding:2px 8px !important;
}

/* ---- Toolbars / export bars (the blue "Export to …" strip) --------------- */

.mainContentPane [class*="dxtb"],
.mainContentPane [class*="dxgvToolbar"],
.mainContentPane [class*="dxtc-header"]{
    background:var(--c-ink-900) !important;
    background-image:none !important;
    border-color:rgba(255,255,255,0.08) !important;
    color:#eef0f6 !important;
    border-radius:10px 10px 0 0;
}
.mainContentPane [class*="dxtb"] a,
.mainContentPane [class*="dxtb"] span,
.mainContentPane [class*="dxgvToolbar"] a,
.mainContentPane [class*="dxgvToolbar"] span{
    color:#eef0f6 !important;
}
.mainContentPane [class*="dxtb"] [class*="Item"]:hover,
.mainContentPane [class*="dxgvToolbar"] [class*="Item"]:hover{
    background:rgba(255,255,255,0.08) !important;
}

/* ---- Buttons (ASPxButton) ------------------------------------------------ */

.mainContentPane [class*="dxbButton"]{
    background:linear-gradient(180deg, var(--c-garnet-500), var(--c-garnet-700)) !important;
    background-image:linear-gradient(180deg, var(--c-garnet-500), var(--c-garnet-700)) !important;
    border:0 !important;
    border-radius:7px !important;
    color:#fbf3e8 !important;
    box-shadow:var(--c-shadow-sm) !important;
}
.mainContentPane [class*="dxbButton"] *{ color:#fbf3e8 !important; }
.mainContentPane [class*="dxbButton"]:hover{ filter:brightness(1.06); }

/* ---- Editors / text boxes / search --------------------------------------- */

.mainContentPane [class*="dxeTextBox"],
.mainContentPane [class*="dxeMemo"],
.mainContentPane input[type="text"],
.mainContentPane input[type="password"],
.mainContentPane input[type="search"],
.mainContentPane select,
.mainContentPane textarea{
    border:1px solid var(--c-border) !important;
    border-radius:7px !important;
    color:var(--c-text) !important;
    background:var(--c-surface) !important;
    background-image:none !important;
    font-family:inherit;
}
/* dxeEditArea is the inner <input>; its wrapper carries the border, so strip
   the inner border/background so we don't get a doubled rounded outline. */
.mainContentPane [class*="dxeEditArea"]{
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
}
/* Compact, square-ish inputs inside grid filter rows */
.mainContentPane [class*="dxgvFilterRow"] [class*="dxeTextBox"],
.mainContentPane [class*="dxgvFilterRow"] input{
    border-radius:6px !important;
}
.mainContentPane input[type="text"]:focus,
.mainContentPane input[type="password"]:focus,
.mainContentPane input[type="search"]:focus,
.mainContentPane select:focus,
.mainContentPane textarea:focus{
    outline:none;
    border-color:var(--c-gold-500) !important;
    box-shadow:0 0 0 3px rgba(185,143,44,0.30) !important;
}

/* General links inside content default to the garnet accent */
.mainContentPane a:link,
.mainContentPane a:visited{ color:var(--c-garnet-600); }
.mainContentPane a:hover{ color:var(--c-gold-500); }

/* ---- Page-title group box (ASPxFormLayout) ------------------------------- */
/* The page title ("Create New Transporter", etc.) is a DevExpress FormLayout
   group box, which the skin paints with a light background box. Strip all of
   that so the heading is just text on the page background — no colored block,
   no box border. */
.mainContentPane [class*="dxflControl"],
.mainContentPane [class*="dxfl"],
.mainContentPane [class*="dxflGroupBox"],
.mainContentPane [class*="dxflGroup"],
.mainContentPane [class*="dxflItem"],
.mainContentPane [class*="dxflCaptionCell"],
.mainContentPane [class*="dxflNestedControlCell"]{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
}
/* Keep the group-box caption text as a clean heading; the HeadingLine
   decoration stays as a thin bottom rule in the theme border color. */
.mainContentPane [class*="dxflGroupBoxCaption"],
.mainContentPane [class*="dxflGroupBoxHeader"]{
    background:transparent !important;
    background-image:none !important;
    color:var(--c-text) !important;
    font-weight:700 !important;
    border:0 !important;
    border-bottom:1px solid var(--c-border) !important;
    padding-bottom:8px !important;
}

/* =========================================================================
   GLOBAL ACTION LOADER — Crystal ERP End-to-End Loading Overlay
   ========================================================================= */
#crystalGlobalLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(11, 15, 26, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

#crystalGlobalLoader.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.crystal-spinner-box {
    position: relative;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crystal-spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3.5px solid transparent;
    border-top-color: #cba53d;
    border-right-color: #96343f;
    border-bottom-color: #cba53d;
    animation: crystalSpin 1.1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.crystal-spinner-ring-inner {
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: #ffffff;
    border-left-color: rgba(255, 255, 255, 0.4);
    animation: crystalSpinReverse 0.85s linear infinite;
}

.crystal-spinner-logo {
    width: 32px;
    height: 32px;
    color: #f6efe0;
    animation: crystalPulse 1.5s ease-in-out infinite alternate;
}

.crystal-loader-text {
    margin-top: 20px;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #f6efe0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}

.crystal-loader-dots span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #cba53d;
    animation: crystalDotPulse 1.4s infinite ease-in-out both;
}

.crystal-loader-dots span:nth-child(1) { animation-delay: -0.32s; }
.crystal-loader-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes crystalSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes crystalSpinReverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes crystalPulse {
    0% { transform: scale(0.92); opacity: 0.8; }
    100% { transform: scale(1.08); opacity: 1; }
}

@keyframes crystalDotPulse {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}