@charset 'UTF-8';

/*
    Modern look on top of Df_Flat_Desktop.
    All rules are scoped under body.Df_Flat_Desktop. If psTheme changes, this layer has no effect.
    Sizes of fields and rows do not change: only colours, borders and radii.
*/

/* - - - - - - Tokens - - - - - - */

body.Df_Flat_Desktop {
    --tl-Surface: var(--df-Grayscale8);
    --tl-SurfaceNested: #F8F9FA;
    --tl-Border: #DDE1E6;
    --tl-BorderStrong: #C4CAD1;
    --tl-TextMuted: #5F6670;
    --tl-Hover: #EDEFF2;
    --tl-SidebarBg: #F7F8FA;
    --tl-Radius: 6px;
    --tl-RadiusSmall: 4px;
    --tl-FocusRing: 0 0 0 3px rgba(0, 114, 198, 0.18);
}

body.Df_Flat_Desktop.df-Dark {
    --tl-Surface: var(--df-Grayscale8);
    --tl-SurfaceNested: #2A2A2A;
    --tl-Border: #3C3C3C;
    --tl-BorderStrong: #555555;
    --tl-TextMuted: #B0B0B0;
    --tl-Hover: #333333;
    --tl-SidebarBg: #1E1E1E;
    --tl-FocusRing: 0 0 0 3px rgba(77, 168, 232, 0.30);
}

/* - - - - - - Labels - - - - - - */

body.Df_Flat_Desktop .WebControl > div > label {
    color: var(--tl-TextMuted);
}

/* - - - - - - Fields - - - - - - */

body.Df_Flat_Desktop .WebControl .WebFrm_Wrapper {
    border: 1px solid var(--tl-BorderStrong);
    border-radius: var(--tl-RadiusSmall);
    transition: border-color 0.15s, box-shadow 0.15s;
}

body.Df_Flat_Desktop .WebControl.Web_Enabled:not(.Web_ReadOnly) > div > div > .WebFrm_Wrapper:hover {
    border-color: var(--df-Grayscale3);
}

body.Df_Flat_Desktop .WebControl.WebCon_Focus > div > div > .WebFrm_Wrapper {
    border: 1px solid var(--df-MainRegular);
    box-shadow: var(--tl-FocusRing);
}

body.Df_Flat_Desktop .WebControl.WebError div > div > div.WebFrm_Wrapper,
body.Df_Flat_Desktop .WebControl.WebError.WebCon_Focus div > div > div.WebFrm_Wrapper {
    border: 1px solid var(--df-ErrorRegular);
}

/*
    Disabled and read-only fields look the same: the user cannot type in either.
    They show a value, not an empty box: no fill, only a thin bottom line.
    A read-only field can keep its prompt button. The button is the only sign of an action.
*/
body.Df_Flat_Desktop .WebControl.Web_Disabled > div > div > .WebFrm_Wrapper,
body.Df_Flat_Desktop .WebControl.Web_ReadOnly > div > div > .WebFrm_Wrapper {
    background-color: transparent;
    border-color: transparent;
    border-bottom: 1px solid var(--tl-BorderStrong);
    border-radius: 0;
    box-shadow: none;
}

body.Df_Flat_Desktop .WebControl.Web_ReadOnly.WebCon_Focus > div > div > .WebFrm_Wrapper {
    border-bottom-color: var(--df-MainRegular);
}

/* A multi-line field keeps a full frame. A bottom line alone under a tall box looks wrong. */
body.Df_Flat_Desktop .WebEdit.Web_Disabled > div > div > .WebFrm_Wrapper,
body.Df_Flat_Desktop .WebEdit.Web_ReadOnly > div > div > .WebFrm_Wrapper {
    border: 1px solid var(--tl-Border);
    border-radius: var(--tl-RadiusSmall);
}

body.Df_Flat_Desktop .WebControl.Web_Disabled > div > div > .WebFrm_Wrapper,
body.Df_Flat_Desktop .WebControl.Web_Disabled input,
body.Df_Flat_Desktop .WebControl.Web_Disabled textarea,
body.Df_Flat_Desktop .WebControl.Web_Disabled select {
    color: var(--df-Grayscale1);
}

body.Df_Flat_Desktop .WebCombo.Web_Disabled select {
    appearance: none;
}

/* - - - - - - Groups - - - - - - */

/* Only groups with pbShowBorder True get a card. Groups without border stay invisible. */
body.Df_Flat_Desktop .WebGroup.WebGrp_HasBorder > .WebCon_Inner > div > .WebContainer {
    background-color: var(--tl-Surface);
    border: 1px solid var(--tl-Border);
    border-radius: var(--tl-Radius);
}

body.Df_Flat_Desktop .WebGroup > .WebCon_Inner {
    background-color: transparent;
}

/* A card inside a card gets a tinted surface, so that the nesting stays visible. */
body.Df_Flat_Desktop .WebGroup.WebGrp_HasBorder .WebGroup.WebGrp_HasBorder > .WebCon_Inner > div > .WebContainer {
    background-color: var(--tl-SurfaceNested);
}

body.Df_Flat_Desktop .WebGroup.WebGrp_HasBorder .WebGroup.WebGrp_HasBorder .WebGroup.WebGrp_HasBorder > .WebCon_Inner > div > .WebContainer {
    background-color: var(--tl-Surface);
}

body.Df_Flat_Desktop .WebGroup.WebGrp_HasCaption > .WebCon_Inner > div > .WebGrp_Caption {
    background-color: var(--tl-Surface);
    color: var(--df-Grayscale1);
    font-weight: 700;
    border-radius: var(--tl-RadiusSmall);
}

body.Df_Flat_Desktop .WebGroup.WebGrp_HasBorder .WebGroup.WebGrp_HasBorder.WebGrp_HasCaption > .WebCon_Inner > div > .WebGrp_Caption {
    background: linear-gradient(to bottom, var(--df-Grayscale8) 50%, var(--tl-SurfaceNested) 50%);
}

/* - - - - - - Buttons - - - - - - */

body.Df_Flat_Desktop .WebButton button {
    border-radius: var(--tl-RadiusSmall);
}

/* Image buttons (cWebImage with BBGButton) get the same corners as cWebButton. */
body.Df_Flat_Desktop .WebImage.BBGButton .WebImg_Box {
    border-radius: var(--tl-RadiusSmall);
    overflow: hidden;
}

/* - - - - - - Tabs - - - - - - */

body.Df_Flat_Desktop .WebTabContainer .WebTbc_Head {
    background: transparent;
    border-bottom: 1px solid var(--tl-Border);
}

body.Df_Flat_Desktop .WebTabContainer .WebTab_Btn span label {
    text-transform: none;
    color: var(--tl-TextMuted);
}

body.Df_Flat_Desktop .WebTabContainer .WebTab_Btn.WebTab_Current span label {
    color: var(--df-Grayscale1);
    font-weight: 700;
}

body.Df_Flat_Desktop .WebTabContainer .WebTab_Btn.WebTab_Current,
body.Df_Flat_Desktop .WebTabContainer .WebTab_Btn.WebTab_Current:hover {
    border-bottom-color: var(--df-MainRegular);
}

body.Df_Flat_Desktop .WebTabContainer .WebTab_Btn.Web_Enabled:hover,
body.Df_Flat_Desktop .WebTabContainer .WebTab_Btn.Web_Enabled.WebTab_Focus {
    background-color: var(--tl-Hover);
}

/* - - - - - - Sidebar - - - - - - */

/* psBackgroundColor of oSideBar_FloPanel is an inline style. Only !important overrides it. */
body.Df_Flat_Desktop .SidebarPanel > .WebContainer {
    background: var(--tl-SidebarBg) !important;
    border-right: 1px solid var(--tl-Border);
}

body.Df_Flat_Desktop .WebAccordion > .WebCon_Inner {
    border-color: transparent;
}

/* Compact headers leave more height for the open card and its Pendenzen list. */
body.Df_Flat_Desktop .WebAccordion .WebTab_Btn {
    padding: 5px 10px 5px 14px;
    background-color: transparent;
    border-top: 1px solid var(--tl-Border);
    border-bottom: 0;
    border-left: 3px solid transparent;
    color: var(--df-Grayscale2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.Df_Flat_Desktop .WebAccordion .WebTab_Btn span label {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 18px;
}

/* Menu items follow the headers: same text size, about the same height, icon in line with
   the header text. The icons stay at 24 px, their native size. */
body.Df_Flat_Desktop .WebAccordion .WebAcCard .WebMenuList li > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 17px;
}

body.Df_Flat_Desktop .WebAccordion .WebAcCard .WebMenuList li > div > span.WebItm_Icon {
    flex: none;
    width: 24px;
    height: 24px;
    background-position: center;
}

body.Df_Flat_Desktop .WebAccordion .WebAcCard .WebMenuList li > div > a {
    margin: 0;
    font-size: 13.5px;
    line-height: 18px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Touch targets from tablet size down. Items get 44 px. Headers get only 36 px: at 44 px the
   13 headers leave almost no height for the open card on a phone. */
body.Df_Flat_Desktop.df-ModeTablet .WebAccordion .WebTab_Btn {
    padding-top: 9px;
    padding-bottom: 9px;
}

body.Df_Flat_Desktop.df-ModeTablet .WebAccordion .WebAcCard .WebMenuList li > div {
    padding-top: 10px;
    padding-bottom: 10px;
}

body.Df_Flat_Desktop .WebAccordion .WebTab_Btn.Web_Enabled:hover,
body.Df_Flat_Desktop .WebAccordion .WebTab_Btn.Web_Enabled.WebTab_Focus {
    background-color: var(--tl-Hover);
}

body.Df_Flat_Desktop .WebAccordion .WebTab_Btn.Web_Enabled.WebTab_Current {
    border-left-color: var(--df-MainRegular);
    color: var(--df-Grayscale1);
}

/* - - - - - - Grids and lists - - - - - - */

body.Df_Flat_Desktop .WebGrid .WebList_Head,
body.Df_Flat_Desktop .WebList .WebList_Head {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--tl-BorderStrong);
}

body.Df_Flat_Desktop .WebList th,
body.Df_Flat_Desktop .WebGrid th,
body.Df_Flat_Desktop .WebGrid .WebList_HorizScroll th:last-child,
body.Df_Flat_Desktop .WebList .WebList_HorizScroll th:last-child {
    border-left-color: transparent;
    border-right-color: transparent;
}

/* Semibold at 13px: bold captions need more width and are cut in narrow columns. */
body.Df_Flat_Desktop .WebGrid .WebList_Head .WebList_ColCap,
body.Df_Flat_Desktop .WebList .WebList_Head .WebList_ColCap {
    color: var(--tl-TextMuted);
    font-size: 13px;
    font-weight: 600;
    text-shadow: none;
}

body.Df_Flat_Desktop .WebGrid .WebList_Head .WebList_Sortable,
body.Df_Flat_Desktop .WebList .WebList_Head .WebList_Sortable {
    text-decoration: none;
}

body.Df_Flat_Desktop .WebGrid .WebList_Head .WebList_Sortable:hover .WebList_ColCap,
body.Df_Flat_Desktop .WebList .WebList_Head .WebList_Sortable:hover .WebList_ColCap {
    color: var(--df-MainRegular);
}

body.Df_Flat_Desktop .WebList .WebList_Body .WebList_Row td {
    border-left-color: transparent;
}

body.Df_Flat_Desktop .WebGrid .WebList_Body .WebList_Row,
body.Df_Flat_Desktop .WebList .WebList_Body .WebList_Row {
    border-bottom: 1px solid var(--df-Grayscale6);
}

body.Df_Flat_Desktop .WebGrid .WebList_Body .WebList_RowOdd,
body.Df_Flat_Desktop .WebList .WebList_Body .WebList_RowOdd {
    background-color: var(--tl-SurfaceNested);
}

body.Df_Flat_Desktop .WebGrid .WebList_Body .WebList_Row:not(.WebList_Selected):hover,
body.Df_Flat_Desktop .WebList .WebList_Body .WebList_Row:not(.WebList_Selected):hover {
    background-color: var(--tl-Hover);
}

body.Df_Flat_Desktop .WebGrid .WebList_Footer,
body.Df_Flat_Desktop .WebList .WebList_Footer,
body.Df_Flat_Desktop .WebGrid .WebList_FooterWrp.WebList_BodyWrp,
body.Df_Flat_Desktop .WebList .WebList_FooterWrp.WebList_BodyWrp,
body.Df_Flat_Desktop .WebGrid .WebList_Footer.WebList_Body .WebList_Row,
body.Df_Flat_Desktop .WebList .WebList_Footer.WebList_Body .WebList_Row {
    background: var(--tl-SurfaceNested);
    border-color: var(--tl-Border);
}

/* - - - - - - Command bar - - - - - - */

body.Df_Flat_Desktop .WebCommandBar .WebCmd_ToolWrap {
    background-color: var(--tl-Surface);
    border-bottom: 1px solid var(--tl-Border);
}

body.Df_Flat_Desktop .WebToolBar ul > li > div {
    border-radius: var(--tl-RadiusSmall);
}

body.Df_Flat_Desktop .WebToolBar ul > li.Web_Enabled:hover > div {
    background-color: var(--tl-Hover);
}

body.Df_Flat_Desktop .WebToolBar ul.WebBarRoot > li.WebItm_BgnGroup:before {
    background-color: var(--tl-Border);
}

/* Navigation glyphs are secondary. Only the save action keeps the accent colour. */
body.Df_Flat_Desktop .WebCmd_ToolWrap .WebToolBar ul.WebBarRoot > li > div > span.WebItm_Icon:before {
    color: var(--tl-TextMuted);
    transition: color 0.15s;
}

body.Df_Flat_Desktop .WebCmd_ToolWrap .WebToolBar ul.WebBarRoot > li.Web_Enabled:hover > div > span.WebItm_Icon:before {
    color: var(--df-MainRegular);
}

/* The theme fills the icon with the accent colour on hover. The item already has a hover surface. */
body.Df_Flat_Desktop .WebToolBar .WebMenuItem.Web_Enabled:hover span.WebItm_Icon,
body.Df_Flat_Desktop .WebToolBar .WebMenuItem.Web_Enabled:focus span.WebItm_Icon {
    background-color: transparent;
}

body.Df_Flat_Desktop .WebCmd_ToolWrap .WebToolBar ul.WebBarRoot > li.WebSaveMenuItem > div > span.WebItm_Icon:before,
body.Df_Flat_Desktop .WebCmd_ToolWrap .WebToolBar ul.WebBarRoot > li.WebSaveMenuItem > div > a {
    color: var(--df-MainRegular);
    font-weight: 700;
}

/* The view on screen has unsaved changes (Custom/UnsavedChanges.js, #736). */
body.Df_Flat_Desktop.UnsavedChanges .WebCmd_ToolWrap .WebToolBar ul.WebBarRoot > li.WebSaveMenuItem > div {
    position: relative;
    background-color: #FFF1E0;
    box-shadow: inset 0 0 0 1px #F08C00;
}

body.Df_Flat_Desktop.UnsavedChanges .WebCmd_ToolWrap .WebToolBar ul.WebBarRoot > li.WebSaveMenuItem > div > span.WebItm_Icon:before,
body.Df_Flat_Desktop.UnsavedChanges .WebCmd_ToolWrap .WebToolBar ul.WebBarRoot > li.WebSaveMenuItem > div > a {
    color: #D9480F;
}

body.Df_Flat_Desktop.UnsavedChanges .WebCmd_ToolWrap .WebToolBar ul.WebBarRoot > li.WebSaveMenuItem > div:after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #F08C00;
}

/* The current grid row has unsaved changes (Custom/UnsavedChanges.js, #737). */
body.Df_Flat_Desktop .WebGrid.UnsavedRow .WebList_Body .WebList_Row.WebList_Selected.WebList_Selected {
    background-color: #FFF8EE;
    box-shadow: inset 3px 0 0 #F08C00;
}

body.Df_Flat_Desktop .WebGrid.UnsavedRow .WebList_Body .WebList_Row td.UnsavedCell {
    background-color: #FFF1E0;
}

body.Df_Flat_Desktop.df-Dark .WebGrid.UnsavedRow .WebList_Body .WebList_Row.WebList_Selected.WebList_Selected {
    background-color: #3A2A14;
}

body.Df_Flat_Desktop.df-Dark .WebGrid.UnsavedRow .WebList_Body .WebList_Row td.UnsavedCell {
    background-color: #4A3214;
}

/* - - - - - - Collapsible groups - - - - - - */

body.Df_Flat_Desktop .WebGroup.WebGrp_Collapsed.WebGrp_HasCaption > .WebCon_Inner > div > .WebGrp_Caption {
    color: var(--df-MainRegular);
}

/* The expand button is a chevron: right when collapsed, down when expanded. */
body.Df_Flat_Desktop .WebGroup > div > div > .WebGrp_ExpandBtn {
    border: none;
    border-radius: var(--tl-RadiusSmall);
    background-color: var(--tl-Surface);
}

body.Df_Flat_Desktop .WebGroup.WebGrp_Expanded > div > div > .WebGrp_ExpandBtn:before,
body.Df_Flat_Desktop .WebGroup.WebGrp_Collapsed > div > div > .WebGrp_ExpandBtn:before {
    content: '';
    top: 3px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

body.Df_Flat_Desktop .WebGroup.WebGrp_Collapsed > div > div > .WebGrp_ExpandBtn:before {
    top: 4px;
    left: 3px;
    transform: rotate(-45deg);
}

body.Df_Flat_Desktop .WebGroup.Web_Enabled > div > div > .WebGrp_ExpandBtn:hover {
    background-color: var(--tl-Hover);
    color: var(--df-MainRegular);
}

/* - - - - - - Grey bands - - - - - - */

/*
    Many views set psBackgroundColor "gainsboro" or "whitesmoke" on a group, e.g. the totals bar
    under an item grid. The framework writes it as an inline style, so only an attribute selector
    with !important can change it.
*/
body.Df_Flat_Desktop .WebContainer[style*="gainsboro"],
body.Df_Flat_Desktop .WebContainer[style*="gainsboro"] > .WebCon_Sizer,
body.Df_Flat_Desktop .WebContainer[style*="gainsboro"] > .WebCon_Sizer > .WebCon_Content,
body.Df_Flat_Desktop .WebContainer[style*="whitesmoke"],
body.Df_Flat_Desktop .WebContainer[style*="whitesmoke"] > .WebCon_Sizer,
body.Df_Flat_Desktop .WebContainer[style*="whitesmoke"] > .WebCon_Sizer > .WebCon_Content {
    background: var(--tl-SurfaceNested) !important;
}

body.Df_Flat_Desktop .WebContainer[style*="gainsboro"],
body.Df_Flat_Desktop .WebContainer[style*="whitesmoke"] {
    border: 1px solid var(--tl-Border);
    border-radius: var(--tl-RadiusSmall);
}

/* - - - - - - Header: menu bar and command bar read as one - - - - - - */

body.Df_Flat_Desktop .WebMenuBar.FlexMenuBar {
    background-color: var(--df-MainDark);
}

/* application.css sets these paddings with !important. */
body.Df_Flat_Desktop .FlexMenuBar .IconMenuItem > div,
body.Df_Flat_Desktop .FlexMenuBar .TextMenuItem > div {
    padding: 7px 10px !important;
}

body.Df_Flat_Desktop .WebCommandBar .WebCmd_ToolWrap {
    padding-top: 4px;
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 var(--tl-Border);
}

/* - - - - - - Tab bars scroll, they do not wrap - - - - - - */

/*
    A second row of tabs pushes the content down. The buttons stay on one line and the head
    scrolls. The two "local" backgrounds cover the shadows at the ends, so a shadow shows only on
    a side with hidden tabs.
*/
body.Df_Flat_Desktop .WebView .WebTabContainer .WebTbc_Head {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background:
        linear-gradient(to right, var(--tl-Surface) 30%, transparent) left center / 40px 100% no-repeat local,
        linear-gradient(to left, var(--tl-Surface) 30%, transparent) right center / 40px 100% no-repeat local,
        linear-gradient(to right, rgba(0, 0, 0, 0.12), transparent) left center / 12px 100% no-repeat scroll,
        linear-gradient(to left, rgba(0, 0, 0, 0.12), transparent) right center / 12px 100% no-repeat scroll;
    background-color: var(--tl-Surface);
}

body.Df_Flat_Desktop .WebView .WebTabContainer .WebTbc_Head::-webkit-scrollbar {
    display: none;
}

body.Df_Flat_Desktop .WebView .WebTabContainer .WebTbc_Head > .WebTab_Btn {
    flex: 0 0 auto;
    float: none;
    white-space: nowrap;
}

/* - - - - - - Selected grid row - - - - - - */

/* The class is repeated to win over the long child selectors of the theme. */
body.Df_Flat_Desktop .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected.WebList_Selected {
    background-color: var(--df-MainLight4, #E5F0F9);
    border-left: 2px solid var(--df-MainRegular);
    color: var(--df-Grayscale1);
}

body.Df_Flat_Desktop.df-Dark .WebList_Body.WebList_ShowSelected .WebList_Row.WebList_Selected.WebList_Selected {
    background-color: #1F3A52;
}

/* - - - - - - Type scale: caption, label, value - - - - - - */

body.Df_Flat_Desktop .WebGroup.WebGrp_HasCaption > .WebCon_Inner > div > .WebGrp_Caption {
    font-size: 15px;
    font-weight: 600;
}

body.Df_Flat_Desktop .WebView .WebControl > div > label,
body.Df_Flat_Desktop .WebModalDialog .WebControl > div > label {
    font-size: 13.5px;
}

/* Compact menu items are shorter: the same limit as in application.css, about three items. */
body.Df_Flat_Desktop .WebAcCard .WebMenuList:not(.Web_FillHeight) .WebML_Panel {
    max-height: 112px;
}

/* Menu button: a "sidebar" symbol instead of the tree bitmap. */
body.Df_Flat_Desktop .SidebarToggleMenuItem > div > span {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cline x1='9' y1='4' x2='9' y2='20'/%3E%3Cline x1='5.5' y1='8' x2='7' y2='8'/%3E%3Cline x1='5.5' y1='11' x2='7' y2='11'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: center;
    filter: none;
}

/* The "+" in the first empty grid row (application.css, #738): a filled circle is easier to see. */
body.Df_Flat_Desktop .WebGrid:not(.Web_Disabled, .NoAppendRow) .WebList_Body .WebList_RowEmpty:not(.WebList_RowEmpty + .WebList_RowEmpty) td:first-child::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--df-MainRegular);
    color: #FFFFFF;
    font-size: 16px;
    line-height: 18px;
}