/* SaintClaire's Berry dark presentation layer, based on the supplied reference.
   Loaded after the existing theme; scoped to the authenticated layout.
   Keep widget sizing, visibility, validation and document state in their owners. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

body.sc-berry {
    --sc-primary: #468de5;
    --sc-primary-soft: #203253;
    --sc-purple: #9168ff;
    --sc-purple-soft: #25214f;
    --sc-nav: #121630;
    --sc-canvas: #1c213b;
    --sc-surface: #232942;
    --sc-field: #1c223b;
    --sc-readonly: #252c46;
    --sc-hover: #2c3351;
    --sc-text: #b9c3df;
    --sc-heading: #e3e8f5;
    --sc-muted: #99a7ce;
    --sc-border: #363e59;
    --sc-radius: 8px;
    --sc-shadow: 0 2px 8px rgb(32 40 58 / 4%);
    --fontFamily: 'Roboto', 'Segoe UI', Arial, sans-serif;
    --primary-Bg-color: var(--sc-surface);
    --secondary-Bg-color: var(--sc-canvas);
    --primary-text-color: var(--sc-text);
    --secondary-text-color: var(--sc-muted);
    --primary-Bcolor: var(--sc-border);
    --primary-FHoverColor: var(--sc-purple);
    --hb-primary: var(--sc-purple);
    --hb-sidebar-surface: var(--sc-nav);
    --hb-sidebar-border: var(--sc-border);
    --hb-sidebar-text: var(--sc-text);
    --hb-sidebar-muted: var(--sc-muted);
    --hb-sidebar-hover: var(--sc-hover);
    --hb-sidebar-active: var(--sc-purple-soft);
    --hb-sidebar-accent: var(--sc-purple);
    --hb-sidebar-subtle: var(--sc-muted);
    --hb-sidebar-submenu-active: var(--sc-purple);
    font-family: var(--fontFamily);
    color: var(--sc-text);
    background: var(--sc-canvas);
    color-scheme: dark;
}

/* Application frame: retain the existing sidebar widths and collapse behavior. */
.sc-berry .hbplus-body { min-width: 0; }
.sc-berry .hbPlus-rBodyCon { min-width: 0; background: var(--sc-canvas); }
.sc-berry .hbPlus-CompanyShell { border-bottom-color: transparent; }
.sc-berry .hbPlus-Company { min-height: 78px; }
.sc-berry .hbPlus-CompanyName {
    color: var(--sc-heading);
    font-family: var(--fontFamily);
    font-weight: 600;
}
.sc-berry .hbplus-sidebar-section-label {
    color: var(--sc-muted);
    font-size: 11px;
    letter-spacing: .06em;
    margin-top: 16px;
}
.sc-berry .hbplus-sidebar-menu :is(.hbplus-mMenu-list, .hbplus-mMenu-companylist, .hbplus-mMenu-listReport, .navigationclass) {
    border-radius: var(--sc-radius);
    margin-inline: 12px;
    padding: 11px 14px;
}
.sc-berry .hbplus-sidebar-menu :is(.hbplus-mMenu-list, .hbplus-mMenu-companylist, .hbplus-mMenu-listReport, .navigationclass):hover {
    background: var(--sc-purple-soft);
}
.sc-berry .hbplus-sidebar-menu :is(.active, .hbplus-active, .has-active-child) {
    background: var(--sc-purple-soft) !important;
    box-shadow: none;
}
.sc-berry .hbplus-sidebar-menu :is(.active, .hbplus-active, .has-active-child) > .hbplus-mMenu-title .menuName {
    color: var(--sc-purple);
}
.sc-berry .hbplus-sidebar-menu .hBplus-subMenuFont {
    color: var(--sc-text);
}
/* Expanded group captions have legacy light-theme colors of their own. */
.sc-berry .hbplus-sidebar-menu :is(.hbPlus-sMenuBtn, .hbPlus-ThirdMenuBtn, .hbPlus-subMenuBtn, .Nav-sMenuBtn):is(.active, .has-active-child, [aria-label="off"], :hover, :focus-visible) .hBplus-subMenuFont {
    color: var(--sc-purple) !important;
}
.sc-berry .hbplus-sidebar-menu :is(.hbPlus-sMenuBtn, .hbPlus-ThirdMenuBtn, .hbPlus-subMenuBtn, .Nav-sMenuBtn, .hbplus-submenu-leaf):hover {
    background: var(--sc-purple-soft);
    border-radius: var(--sc-radius);
}
.sc-berry .hbplus-sidebar-menu :is(.hbplus-sMenu-List, .navigation-sMenu, .hbplus-sMenuList) {
    border-left-color: var(--sc-border) !important;
}
.sc-berry .menuName { font-weight: 500; }
.sc-berry .hbplus-sidebar-menu .hbPlus-ModuleIcon { color: var(--sc-muted) !important; }
.sc-berry .hbplus-sidebar-menu :is(.active, .hbplus-active, .has-active-child) .hbPlus-ModuleIcon { color: var(--sc-purple) !important; }
.sc-berry .hbPlus-MiconClass {
    color: var(--sc-purple);
    background: var(--sc-purple-soft);
    border-color: transparent;
    border-radius: var(--sc-radius);
}
.sc-berry .hbPlus-header {
    background: var(--sc-nav);
    border-bottom-color: var(--sc-border);
    padding-inline: 22px;
}
/* The sticky form title uses layer 9. Keep the app header's dropdowns above
   that sibling layer, while dialogs and the global loader remain above both. */
.sc-berry .hbPlus-rBodyCon > header { position: relative; z-index: 10; }
.sc-berry .hbPlus-topBrandMark {
    background: var(--sc-purple);
    box-shadow: none;
    border-radius: var(--sc-radius);
}
.sc-berry .hbPlus-topBrandTitle { color: var(--sc-heading); letter-spacing: -.025em; }
.sc-berry .hbPlus-topBrandTitle small { color: var(--sc-purple); }
.sc-berry .hbPlus-headerIcon {
    background: var(--sc-purple-soft) !important;
    border-color: transparent !important;
    border-radius: var(--sc-radius);
    color: var(--sc-purple);
}
.sc-berry .hbPlus-headerIcon:hover {
    background: #34295f !important;
    border-color: transparent !important;
    color: #b89cff;
}
.sc-berry .hBplus-HeaderBtn .hbPlus-headerIcon > i {
    color: inherit;
    font-size: 20px;
    line-height: 1;
}
.sc-berry .hbPlus-headerIcon[title="Feedback"] { color: #80b8ff; }
.sc-berry .hbPlus-headerIcon--alert { color: #ffd469; }
.sc-berry .hbPlus-headerIcon:focus-visible {
    outline: 2px solid var(--sc-primary);
    outline-offset: 3px;
}
.sc-berry .hbPlus-headerAvatar { background: var(--sc-primary-soft) !important; color: var(--sc-primary); }
.sc-berry #hBPlus-MenuUpdate :is(.dx-dropdownbutton, .dx-button) { border-radius: var(--sc-radius) !important; }
.sc-berry #hBPlus-MenuUpdate .dx-button {
    background: var(--sc-hover) !important;
    border-color: var(--sc-border) !important;
    box-shadow: none !important;
}
.sc-berry #hBPlus-MenuUpdate :is(.dx-button-text, .dx-icon) { color: var(--sc-purple) !important; }
.sc-berry #hBPlus-MenuUpdate .dx-button-text::before { background: var(--sc-purple); box-shadow: none; }
.sc-berry .hbPlus-breadcrumbLabel { color: var(--sc-muted); }
.sc-berry .hbPlus-breadcrumbItem.is-current { color: var(--sc-purple); }
.sc-berry .hbPlus-userPanelHeader { background: var(--sc-purple-soft); border-color: var(--sc-border); }
.sc-berry .hbPlus-userCard { background: var(--sc-field); border-color: var(--sc-border); border-radius: var(--sc-radius); }
.sc-berry .hbPlus-userCardAvatar { background: var(--sc-purple-soft); color: var(--sc-purple); }
.sc-berry .hbPlus-userPanelHeader .offcanvas-title,
.sc-berry .hbPlus-userCardMeta h6,
.sc-berry .hbPlus-userInfoValue { color: var(--sc-heading); }
.sc-berry .hbPlus-userCardMeta p,
.sc-berry .hbPlus-userCardEyebrow,
.sc-berry .hbPlus-userInfoLabel { color: var(--sc-muted); }
.sc-berry .hbPlus-userInfoItem { background: var(--sc-field); border-color: var(--sc-border); border-radius: var(--sc-radius); }
.sc-berry .hbPlus-userAdminBadge { background: #203e36; color: #7fd1a0; }

/* Berry account control: initials avatar and settings icon, with an anchored menu. */
.sc-berry .sc-user-menu .hbPlus-headerAvatar {
    width: auto;
    min-width: 86px;
    height: 46px;
    padding: 5px 12px 5px 6px;
    gap: 12px;
    border-radius: 28px;
    box-shadow: none;
    flex-shrink: 0;
}
.sc-berry .sc-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffd469;
    color: #26334d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.sc-berry .sc-user-menu .hbPlus-headerAvatar i {
    color: #80b8ff;
    font-size: 22px;
    line-height: 1;
}
.sc-berry .sc-user-menu .hbPlus-headerAvatar:is(:hover, [aria-expanded="true"]) {
    background: #2f60b4 !important;
    transform: none;
}
.sc-berry .sc-user-menu .hbPlus-headerAvatar:focus-visible {
    outline: 2px solid var(--sc-primary);
    outline-offset: 3px;
}
.sc-berry .sc-user-dropdown {
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    padding: 20px;
    margin-top: 12px !important;
    background: var(--sc-surface);
    color: var(--sc-text);
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgb(0 0 0 / 24%);
    z-index: 1050;
}
.sc-berry .sc-user-greeting h6 {
    margin: 0 0 6px;
    color: var(--sc-heading);
    font-size: 17px;
    font-weight: 400;
    overflow-wrap: anywhere;
}
.sc-berry .sc-user-greeting p {
    margin: 0 0 20px;
    color: var(--sc-muted);
    font-size: 13px;
}
.sc-berry .sc-user-profile {
    background: var(--sc-field);
    border-radius: var(--sc-radius);
    padding: 16px;
}
.sc-berry .sc-user-profile-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sc-heading);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}
.sc-berry .sc-user-profile-heading i,
.sc-berry .sc-user-logout i {
    color: var(--sc-muted);
    font-size: 19px;
}
.sc-berry .sc-user-admin {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--sc-purple-soft);
    color: var(--sc-purple);
    font-size: 11px;
}
.sc-berry .sc-user-details { margin: 0; }
.sc-berry .sc-user-details > div + div { margin-top: 12px; }
.sc-berry .sc-user-details dt {
    color: var(--sc-muted);
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 3px;
}
.sc-berry .sc-user-details dd {
    color: var(--sc-text);
    font-size: 13px;
    margin: 0;
    overflow-wrap: anywhere;
}
.sc-berry .sc-user-menu-actions {
    border-top: 1px solid var(--sc-border);
    margin-top: 18px;
    padding-top: 12px;
}
.sc-berry .sc-user-logout {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    color: var(--sc-text);
    font-size: 14px;
    border-radius: var(--sc-radius);
}
.sc-berry .sc-user-logout:is(:hover, :focus-visible) {
    color: var(--sc-purple);
    background: var(--sc-purple-soft);
}

/* Process diagrams store inline colors. Theme only the viewer, retaining all
   saved geometry, transforms, routes and permission-controlled visibility. */
.sc-berry #hBplus-ViewMainContainer {
    position: fixed;
    inset: 0;
    z-index: 1040;
}
.sc-berry #hBplus-ViewMainContainer .hBplus-ViewSubContainer {
    background: var(--sc-canvas);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
}
.sc-berry #hBplus-ViewMainContainer .hBplus-closeIcon { background: var(--sc-hover); color: var(--sc-text); }
.sc-berry #hBplus-ViewMainContainer .hBplus-closeIcon svg { fill: currentColor; }
.sc-berry #hBplus-ViewMainContainer #hBplus-NavigationTitle {
    background: var(--sc-surface);
    border-radius: 8px 8px 0 0;
}
.sc-berry #hBplus-ViewMainContainer #hBplus-NavigationTitle h4 {
    color: var(--sc-heading);
    border-color: var(--sc-border);
    font-family: var(--fontFamily);
    font-size: 20px;
    font-weight: 500;
}
.sc-berry #hBplus-ViewMainContainer #hBplus-NavigationPanelBtn { border-color: var(--sc-border); }
.sc-berry #hBplus-ViewMainContainer .btnNavCls { color: var(--sc-muted); }
.sc-berry #hBplus-ViewMainContainer .btnNavCls:hover { color: var(--sc-heading); background: var(--sc-hover); }
.sc-berry #hBplus-ViewMainContainer #hBplus-NavigationPanelBtn .div-primary {
    color: var(--sc-purple);
    border-bottom-color: var(--sc-purple);
    background: var(--sc-purple-soft);
}
.sc-berry #hBplus-ViewMainContainer #hBplus-panelNavigationUtility { background: var(--sc-canvas); }
.sc-berry #hBplus-ViewMainContainer .hBplus-BoxShape {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border) !important;
    border-radius: var(--sc-radius) !important;
    box-shadow: 0 2px 6px rgb(0 0 0 / 12%) !important;
}
.sc-berry #hBplus-ViewMainContainer .hBplus-BoxShape label {
    color: var(--sc-text) !important;
    font-family: var(--fontFamily);
}
.sc-berry #hBplus-ViewMainContainer .sc-process-icon {
    --sc-icon-color: #b394ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 36px;
    line-height: 1;
    color: var(--sc-icon-color);
    text-shadow: 0 0 8px color-mix(in srgb, var(--sc-icon-color) 45%, transparent);
    pointer-events: none;
}
.sc-berry #hBplus-ViewMainContainer .sc-process-icon[data-tone="blue"] { --sc-icon-color: #78b8ff; }
.sc-berry #hBplus-ViewMainContainer .sc-process-icon[data-tone="teal"] { --sc-icon-color: #66dfce; }
.sc-berry #hBplus-ViewMainContainer .hBplus-BoxShape:hover .sc-process-icon {
    text-shadow: 0 0 8px var(--sc-icon-color), 0 0 18px color-mix(in srgb, var(--sc-icon-color) 45%, transparent);
}
.sc-berry #hBplus-ViewMainContainer .hBplus-BoxShape:hover {
    background: var(--sc-primary-soft) !important;
    border-color: var(--sc-primary) !important;
    box-shadow: none !important;
    transform: none;
}
.sc-berry #hBplus-ViewMainContainer .hBplus-TextBox {
    background: var(--sc-purple-soft) !important;
    color: var(--sc-heading) !important;
    border-color: var(--sc-border) !important;
    box-shadow: none !important;
}
.sc-berry #hBplus-ViewMainContainer .hBplus-TextBox :is(label, span, p) { color: var(--sc-heading) !important; }
.sc-berry #hBplus-ViewMainContainer :is(.hBplus-HLine, .hBplus-VLine) { background: var(--sc-muted) !important; }
.sc-berry #hBplus-ViewMainContainer :is(.hBplus-HLine, .hBplus-VLine)::before { background-color: var(--sc-muted); }
.sc-berry #hBplus-ViewMainContainer .hBplus-HLine::after { border-left-color: var(--sc-muted); }
.sc-berry #hBplus-ViewMainContainer .hBplus-VLine::after { border-top-color: var(--sc-muted); }
.sc-berry #hBplus-ViewMainContainer .hBplus-Diamond { background: var(--sc-surface) !important; border-color: var(--sc-purple) !important; }
.sc-berry #hBplus-ViewMainContainer .hBplus-PanelChooser {
    background: var(--sc-surface) !important;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    color: var(--sc-text);
    box-shadow: 0 8px 24px rgb(0 0 0 / 24%) !important;
}
.sc-berry #hBplus-ViewMainContainer .hBplus-BtnChooser {
    background: var(--sc-hover);
    border-color: var(--sc-border);
    color: var(--sc-text);
    border-radius: var(--sc-radius);
}
.sc-berry #hBplus-ViewMainContainer .hBplus-BtnChooser:hover { background: var(--sc-primary-soft); color: var(--sc-primary); }
.sc-berry #hBplus-ViewMainContainer #hBplus-BtnChooseClose { background: var(--sc-purple-soft) !important; color: var(--sc-purple) !important; }

/* Bootstrap surfaces and controls. Status/danger/success colors keep their meaning. */
.sc-berry :is(.card, .modal-content, .offcanvas) {
    background: var(--sc-surface);
    border-color: var(--sc-border);
    color: var(--sc-text);
}
.sc-berry :is(.card, .modal-content) { border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); }
.sc-berry :is(.card-header, .modal-header) { background: var(--sc-surface); border-bottom-color: var(--sc-border); }
.sc-berry :is(.card-title, .modal-title, .offcanvas-title) { color: var(--sc-heading); font-weight: 600; }
.sc-berry .btn { border-radius: var(--sc-radius); font-weight: 500; }
.sc-berry .btn-primary {
    background-color: var(--sc-primary);
    border-color: var(--sc-primary);
    color: #fff;
}
.sc-berry .btn-primary:hover { background-color: #1565c0; border-color: #1565c0; }
.sc-berry .btn-primary:active { background-color: #0d47a1; border-color: #0d47a1; }
.sc-berry .btn-primary:disabled,
.sc-berry .btn-primary.disabled { background-color: var(--sc-primary); border-color: var(--sc-primary); }
.sc-berry :is(.form-control, .form-select) { background-color: var(--sc-field); color: var(--sc-heading); border-radius: var(--sc-radius); border-color: var(--sc-border); }
.sc-berry :is(.form-control, .form-select):focus { border-color: var(--sc-primary); box-shadow: 0 0 0 3px rgb(25 118 210 / 12%); }
.sc-berry :is(.form-control, .form-select):disabled,
.sc-berry .form-control[readonly] { background-color: var(--sc-hover); color: var(--sc-muted); }
.sc-berry .form-control::placeholder { color: var(--sc-muted); }
.sc-berry .btn-close { filter: invert(1) grayscale(1); }
.sc-berry .table { color: var(--sc-text); border-color: var(--sc-border); }
.sc-berry .nav-tabs { border-bottom-color: var(--sc-border); }
.sc-berry .nav-tabs .nav-link { color: var(--sc-muted); border-radius: 8px 8px 0 0; }
.sc-berry .nav-tabs .nav-link.active { color: var(--sc-purple); background: var(--sc-surface); border-color: var(--sc-border) var(--sc-border) var(--sc-surface); }

/* Shared leave-form confirmation: keep the dark card and action contrast. */
.sc-berry #FormDirtyModal .modal-dialog { max-width: 480px; margin-inline: auto; padding-inline: 12px; }
.sc-berry #FormDirtyModal .modal-content {
    background: var(--sc-surface);
    color: var(--sc-text);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    box-shadow: 0 16px 48px rgb(0 0 0 / 32%);
}
.sc-berry #FormDirtyModal .modal-header { justify-content: flex-start; gap: 12px; padding: 20px 24px; }
.sc-berry #FormDirtyModal .modal-title { color: var(--sc-heading); font-size: 18px; font-weight: 500; }
.sc-berry #FormDirtyModal .form-dirty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    height: 38px;
    border-radius: var(--sc-radius);
    background: #403b36;
    color: #ffcc80;
    font-size: 20px;
}
.sc-berry #FormDirtyModal .modal-body { padding: 20px 24px; line-height: 1.6; }
.sc-berry #FormDirtyModal .form-dirty-warning { color: #ffcc80; font-weight: 500; margin-bottom: 8px; }
.sc-berry #FormDirtyModal .modal-footer { padding: 12px 20px; border-top-color: var(--sc-border); gap: 4px; }
.sc-berry #FormDirtyModal .formDirtyButton { min-height: 38px; padding: 8px 16px; }
.sc-berry #FormDirtyModal .formDirtyButton[attr-stay="yes"] { background: var(--sc-hover); color: var(--sc-heading); border-color: var(--sc-border); }
.sc-berry #FormDirtyModal .formDirtyButton[attr-stay="yes"]:hover { background: #353e5f; border-color: var(--sc-muted); }
.sc-berry #FormDirtyModal .formDirtyButton:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 2px; }

/* Operational pages: do not change grid row heights or edit/readonly states. */
.sc-berry #hBplus-dataView {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
}
.sc-berry .hbPlus-gridSiderCon { background: var(--sc-surface); border-right-color: var(--sc-border); }
.sc-berry .hBplus-ViewSubContainer { background: var(--sc-surface); border-radius: var(--sc-radius); box-shadow: 0 12px 40px rgb(0 0 0 / 24%); }
.sc-berry .hbPlus-rBodyCon :is(.dx-form, .dx-datagrid, .dx-toolbar, .dx-tabs) { font-family: var(--fontFamily); }
.sc-berry .hbPlus-rBodyCon .dx-datagrid { color: var(--sc-text); background: var(--sc-surface); }
.sc-berry .hbPlus-rBodyCon .dx-datagrid-headers { color: var(--sc-muted); background: var(--sc-field); border-bottom-color: var(--sc-border); font-weight: 600; }
.sc-berry .hbPlus-rBodyCon .dx-datagrid .dx-row-lines > td { border-bottom-color: var(--sc-border); }
.sc-berry .hbPlus-rBodyCon .dx-datagrid .dx-header-row > td { background: var(--sc-field); }
.sc-berry .hbPlus-rBodyCon .dx-datagrid .dx-row-alt > td { background: #272e49; }
.sc-berry .hbPlus-rBodyCon .dx-datagrid .dx-data-row.dx-state-hover:not(.dx-selection) > td { background: var(--sc-hover); }
.sc-berry .hbPlus-rBodyCon .dx-datagrid .dx-data-row.dx-selection:not(.dx-row-focused) > td { background: var(--sc-primary-soft); color: var(--sc-heading); }
.sc-berry .hbPlus-rBodyCon .dx-datagrid .dx-link { color: var(--sc-primary); }
.sc-berry .hbPlus-rBodyCon .dx-datagrid .dx-link-delete { color: #d32f2f; }
.sc-berry .hbPlus-rBodyCon .dx-form-group-caption { color: var(--sc-heading); font-weight: 600; }
.sc-berry .hbPlus-rBodyCon .dx-field-item-label-text { color: var(--sc-muted); }
.sc-berry .hbPlus-rBodyCon .dx-texteditor.dx-editor-outlined { border-radius: var(--sc-radius); }
.sc-berry .hbPlus-rBodyCon .dx-texteditor.dx-editor-outlined.dx-state-focused:not(.dx-invalid) { border-color: var(--sc-primary); }
.sc-berry .hbPlus-rBodyCon .dx-button { border-radius: var(--sc-radius); }
.sc-berry .hbPlus-rBodyCon .dx-button-mode-contained.dx-button-default { background: var(--sc-primary); border-color: var(--sc-primary); }
.sc-berry .hbPlus-rBodyCon .dx-button-mode-contained.dx-button-default.dx-state-hover { background: #1565c0; border-color: #1565c0; }
.sc-berry .hbPlus-rBodyCon .dx-tab.dx-tab-selected { color: var(--sc-purple); background: var(--sc-purple-soft); }
.sc-berry .hbPlus-rBodyCon .dx-tab.dx-tab-selected::after { border-color: var(--sc-purple); }
.sc-berry .hbPlus-rBodyCon :is(.dx-toolbar, .dx-tabs, .dx-datagrid-rowsview, .dx-datagrid-total-footer, .dx-datagrid-pager) { background: var(--sc-surface); color: var(--sc-text); border-color: var(--sc-border); }
.sc-berry .hbPlus-rBodyCon .dx-texteditor.dx-editor-outlined { background: var(--sc-field); }
.sc-berry .hbPlus-rBodyCon .dx-texteditor-input { color: var(--sc-heading); }
/* DevExtreme paints its own placeholder; keep the native copy transparent. */
.sc-berry .dx-texteditor-input::placeholder { color: transparent; }
.sc-berry .dx-placeholder { color: var(--sc-muted); }
.sc-berry .hbPlus-rBodyCon .dx-button-mode-contained.dx-button-normal { background: var(--sc-hover); border-color: var(--sc-border); color: var(--sc-heading); }
.sc-berry .dx-overlay-content:not(.dx-invalid-message-content) { background-color: var(--sc-surface); color: var(--sc-text); border-color: var(--sc-border); }
.sc-berry .dx-popup-title { background: var(--sc-surface); color: var(--sc-heading); border-color: var(--sc-border); }
.sc-berry .dx-popup-content .dx-texteditor.dx-editor-outlined { background: var(--sc-field); border-radius: var(--sc-radius); }
.sc-berry .dx-popup-content .dx-texteditor-input { color: var(--sc-heading); }

/* Dashboard: specificity intentionally wins over the SPA partial's inline stylesheet. */
.sc-berry .hBplus-DateHeader,
.sc-berry .hBplus-DashboardBody,
.sc-berry .hBplus-disBodyData { background: var(--sc-canvas); }
.sc-berry .hBplus-DateHeader { padding: 18px 22px 0; gap: 12px 24px; }
.sc-berry .dashboard-page-kicker,
.sc-berry .overallSalesEyebrow { color: var(--sc-purple); letter-spacing: .07em; }
.sc-berry .dashboard-page-title { color: var(--sc-heading); font-size: 26px; font-weight: 600; line-height: 1.2; }
.sc-berry .overallSalesTitle,
.sc-berry .hBplus-TitleBSDetail { color: var(--sc-heading); font-size: 20px; font-weight: 500; }
.sc-berry .hBplus-DateHeaderCon { box-shadow: none; }
.sc-berry .hBplus-DateHeaderCon .dx-texteditor.dx-editor-outlined { background: var(--sc-field); border-color: var(--sc-border); border-radius: var(--sc-radius); }
.sc-berry .hBplus-DateHeaderCon .dx-texteditor-input { color: var(--sc-heading); }
.sc-berry .dashboard-filterDivider { background: var(--sc-border); }
.sc-berry .dashboard-filterBtn { background: var(--sc-primary); border-radius: var(--sc-radius); font-weight: 500; }
.sc-berry .dashboard-filterBtn:hover { background: #1565c0; transform: none; }
.sc-berry .hBplus-DashboardBody { gap: 16px; }
.sc-berry .overallStatGrid { gap: 16px; }
.sc-berry .overallStatCard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    box-shadow: none;
    padding: 16px;
    min-height: 104px;
    gap: 8px;
}
.sc-berry .overallStatCard:nth-child(1) { background: #322075; border-color: transparent; }
.sc-berry .overallStatCard:nth-child(2) { background: #202e54; border-color: transparent; }
.sc-berry .overallStatCard:nth-child(3) { background: #4188e1; border-color: transparent; }
.sc-berry .overallStatCard:nth-child(-n+2)::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    top: -95px;
    right: -55px;
    background: #560bdf;
    box-shadow: -65px -15px 0 #4219a7;
    pointer-events: none;
}
.sc-berry .overallStatLabel { color: var(--sc-muted); font-size: 13px; font-weight: 500; }
.sc-berry .overallStatValue { color: var(--sc-heading); font-size: clamp(22px, 2vw, 32px); font-weight: 500; letter-spacing: -.025em; overflow-wrap: anywhere; }
.sc-berry .overallStatHint { color: var(--sc-muted); font-size: 12px; }
.sc-berry .overallStatCard:nth-child(2)::after { background: #3067b5; box-shadow: -65px -15px 0 #284b85; }
.sc-berry .overallStatCard:nth-child(-n+3) :is(.overallStatLabel, .overallStatValue) { color: #fff; }
.sc-berry .overallStatCard:nth-child(-n+3) .overallStatHint { color: #e3e8ff; }
.sc-berry .salesPbItem,
.sc-berry .salesPbItem:is(.pos-online, .pos-offline, .zero-sales) {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sc-berry .salesPbItem:hover,
.sc-berry .salesPbItem:is(.pos-online, .pos-offline, .zero-sales):hover { border-color: #b39ddb; box-shadow: 0 4px 16px rgb(103 58 183 / 9%); transform: none; }
.sc-berry .salesPbItem::before,
.sc-berry .salesPbItem.zero-sales::before { background: var(--sc-purple-soft); }
.sc-berry .hBplus-DashboardBody .salesPbItem {
    min-height: 0;
    padding: 14px 16px;
    line-height: 1.4;
}
.sc-berry .hBplus-DashboardBody .salesPbItem .branch-header { margin-bottom: 12px; gap: 8px; }
.sc-berry .hBplus-DashboardBody .salesPbItem .branch-name { font-size: 16px; line-height: 1.25; max-width: calc(100% - 24px); }
.sc-berry .hBplus-DashboardBody .salesPbItem .branch-total { font-size: 24px; margin-bottom: 6px; padding: 0; }
.sc-berry .hBplus-DashboardBody .salesPbItem .branch-rangeLabel { font-size: 10px; letter-spacing: .1em; margin-bottom: 3px; }
.sc-berry .hBplus-DashboardBody .salesPbItem .branch-range { font-size: 13px; margin-bottom: 10px; }
.sc-berry .hBplus-DashboardBody .salesPbItem .branch-metric { padding: 8px 0; font-size: 13px; color: var(--sc-muted) !important; }
.sc-berry .hBplus-DashboardBody .salesPbItem .branch-metric strong { font-size: 13px; }
.sc-berry .hBplus-DashboardBody .salesPbItem::before { width: 72px; height: 72px; }
/* The legacy status-card rules force text colors with !important. */
.sc-berry .salesPbItem:is(.pos-online, .pos-offline, .zero-sales) .branch-name { color: var(--sc-heading) !important; font-weight: 500; }
.sc-berry .salesPbItem:is(.pos-online, .pos-offline, .zero-sales) .branch-total { color: var(--sc-purple) !important; }
.sc-berry .salesPbItem:is(.pos-online, .pos-offline, .zero-sales) :is(.branch-range, .branch-metric strong) { color: var(--sc-text) !important; }
.sc-berry .salesPbItem:is(.pos-online, .pos-offline, .zero-sales) :is(.branch-rangeLabel, .branch-metric) { color: var(--sc-muted) !important; border-color: var(--sc-border); }
.sc-berry .salesPbItem .branch-status { background: #d32f2f; border-color: #ffebee; }
.sc-berry .salesPbItem.pos-online .branch-status { background: #2e7d32; border-color: #e8f5e9; }
.sc-berry .salesPbItem:is(.pos-offline, .zero-sales) .branch-status { background: #697586; border-color: #e3e8ef; }
.sc-berry .saleSummaryItem { background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); }
.sc-berry .saleSummaryItem .imgitemconcls { background: var(--sc-purple-soft); border-radius: var(--sc-radius); }
.sc-berry .saleSummaryItem > div:nth-child(2) { color: var(--sc-heading); }
.sc-berry .saleSummaryItem > div:nth-child(n+3) { color: var(--sc-muted); }
.sc-berry .hBplus-DashboardBody.dashboard-fullscreen .hBplus-disOverSales { background: var(--sc-surface); border-color: var(--sc-border); border-radius: var(--sc-radius); }
.sc-berry :is(#totalGrossProfitMarginID, #topproductsID) { background: var(--sc-surface); color: var(--sc-text); border-radius: var(--sc-radius); }

/* Keyboard access and reduced motion remain explicit across the new surfaces. */
.sc-berry :is(.hbPlus-headerIcon, .hbPlus-MiconClass, .dashboard-filterBtn, .hbPlus-CompanyLink):focus-visible {
    outline: 3px solid var(--sc-primary);
    outline-offset: 3px;
}
.sc-berry * { scrollbar-color: #4b5474 var(--sc-canvas); }
.sc-berry ::-webkit-scrollbar-thumb { background: #4b5474; border-radius: 8px; border-color: var(--sc-canvas); }
.sc-berry ::-webkit-scrollbar-track { background: var(--sc-canvas); }

@media (max-width: 1199.98px) {
    .sc-berry .overallStatGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .sc-berry .hbPlus-header { padding-inline: 12px; }
    .sc-berry .hbPlus-headerShell { gap: 10px; }
    .sc-berry .hbPlus-headerActions { flex-wrap: wrap; gap: 8px; }
    .sc-berry .hBplus-HeaderBtn { gap: 6px; }
    .sc-berry .hbPlus-headerIcon { width: 34px; height: 34px; }
    .sc-berry .hBplus-DateHeader { padding: 12px 12px 0; }
    .sc-berry .hBplus-DateHeaderCon { width: 100%; }
    .sc-berry :is(.dateBoxClass, .datePerBoxClass) { width: 100%; gap: 10px; }
    .sc-berry :is(.dateBoxClass, .datePerBoxClass) .dashboard-filterField { flex: 1 1 160px; width: auto; min-width: 0; }
    .sc-berry .dashboard-filterDivider { display: none; }
    .sc-berry .hbPlus-rBodyCon:has(.hBplus-DashboardBody) { height: 100dvh; overflow-y: auto; }
    .sc-berry .hBplus-DashboardBody:not(.dashboard-fullscreen) { padding: 12px; height: auto; min-height: 200px; overflow: visible; }
    .sc-berry .overallStatGrid { gap: 12px; }
    .sc-berry .overallStatCard { padding: 16px; }
    .sc-berry #hBplus-SalesPBgridCon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
    .sc-berry .overallStatGrid,
    .sc-berry #hBplus-SalesPBgridCon { grid-template-columns: minmax(0, 1fr); }
}
/* Replace the legacy dotted spinner without changing loader visibility or timing. */
.sc-berry #loadingEffectID { background-color: rgb(18 22 48 / 45%); }
.sc-berry #loadingEffectID .lds-roller { width: 64px; height: 64px; }
.sc-berry #loadingEffectID .lds-roller > div { display: none; animation: none; }
.sc-berry #loadingEffectID .lds-roller::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 5%, #9168ff 35%, #468de5 70%, #66dfce 90%, transparent);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
    animation: sc-berry-loading 1s linear infinite;
}
@keyframes sc-berry-loading { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sc-berry #loadingEffectID .lds-roller::before { animation: none; }
    .sc-berry :is(.salesPbItem, .dashboard-filterBtn, .hbPlus-siderCon, .hbPlus-headerIcon) { transition: none; }
}
@media print {
    body.sc-berry {
        --sc-canvas: #fff;
        --sc-surface: #fff;
        --sc-field: #fff;
        --sc-heading: #111;
        --sc-text: #222;
        --sc-muted: #444;
        --sc-border: #ccc;
        background: #fff;
        color-scheme: light;
    }
    .sc-berry .overallStatCard { background: #fff; border-color: #ccc; }
    .sc-berry .overallStatCard:nth-child(-n+3) { background: #fff; border-color: #ccc; }
    .sc-berry .overallStatCard :is(.overallStatLabel, .overallStatValue, .overallStatHint),
    .sc-berry .overallStatCard:nth-child(-n+3) :is(.overallStatLabel, .overallStatValue, .overallStatHint) { color: #000; }
    .sc-berry .overallStatCard::after { content: none; }
}