:root {
  --app-font-family: Segoe UI, sans-serif;
  --app-font-color: #0c0c0c;
  --app-font-size: 14px;
  --app-margin-l: 5px;
  --app-margin-t: 3px;
  --app-margin-r: 5px;
  --app-margin-b: 3px;

  /* Bootstrap base tokens (overrideable by appearance.js too) */
  --bs-body-font-family: var(--app-font-family);
  --bs-font-sans-serif: var(--app-font-family);
  --bs-body-color: var(--app-font-color);
  --bs-body-font-size: var(--app-font-size);
}

html {
  position: relative;
  min-height: 100%;
  font-family: var(--app-font-family);
  color: var(--app-font-color);
  font-size: var(--app-font-size);
}

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

body {
  margin-bottom: 60px;
  font-size: 1em;
  line-height: 1.25;
  font-family: inherit;
  color: var(--app-font-color) !important;
}

/* Global text color for common containers (avoid overriding Bootstrap .text-*) */
.card,
.card *:not([class*="text-"]),
.modal,
.modal *:not([class*="text-"]),
.accordion,
.accordion *:not([class*="text-"]),
.sidebar,
.sidebar *:not([class*="text-"]),
.page-header-bar,
.page-header-bar *:not([class*="text-"]) {
  color: var(--app-font-color);
}

.form-label,
.form-control,
.form-select,
.btn,
.nav-link,
.accordion-button {
  font-family: var(--app-font-family);
}

.dx-widget,
.dx-overlay-wrapper {
  font-family: var(--app-font-family) !important;
}

/* DevExtreme editors/lists: ensure selected font is visible */
.dx-texteditor-input,
.dx-dropdowneditor-input-wrapper input,
.dx-selectbox-popup-wrapper .dx-list-item-content,
.dx-selectbox-popup-wrapper .dx-list-item,
.dx-overlay-wrapper .dx-list-item-content,
.dx-overlay-wrapper .dx-list-item {
  font-family: var(--app-font-family) !important;
}

/* DevExtreme popups/modals: apply appearance to text only */
.dx-popup-title,
.dx-popup-title *:not(i):not(.dx-icon):not(.dx-link):not(.dx-link-icon):not([class^="dx-icon-"]):not([class*=" dx-icon-"]):not(.dx-checkbox-icon):not(.dx-radiobutton-icon):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.bi),
.dx-popup-content,
.dx-popup-content *:not(i):not(.dx-icon):not(.dx-link):not(.dx-link-icon):not([class^="dx-icon-"]):not([class*=" dx-icon-"]):not(.dx-checkbox-icon):not(.dx-radiobutton-icon):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.bi) {
  color: var(--app-font-color);
  font-family: var(--app-font-family);
}

/* Popup headings/labels that often have Bootstrap utility colors */
.dx-popup-content h1,
.dx-popup-content h2,
.dx-popup-content h3,
.dx-popup-content h4,
.dx-popup-content h5,
.dx-popup-content h6,
.dx-popup-content .text-dark,
.dx-popup-content .text-muted,
.dx-popup-content .fw-bold,
.dx-popup-content .fw-semibold,
.dx-popup-content label {
  color: var(--app-font-color) !important;
  font-family: var(--app-font-family) !important;
}

/* DevExtreme Form widgets (labels, captions, checkbox text) */
.dx-popup-content .dx-field-item-label-text,
.dx-popup-content .dx-field-item-label-content,
.dx-popup-content .dx-field-item-help-text,
.dx-popup-content .dx-field-item-content,
.dx-popup-content .dx-checkbox-text,
.dx-popup-content .dx-radiobutton-text,
.dx-popup-content .dx-list-item-content,
.dx-popup-content .dx-lookup-field,
.dx-popup-content .dx-texteditor-input {
  color: var(--app-font-color) !important;
  font-family: var(--app-font-family) !important;
}

/* DevExtreme: apply to text, not icons */
.dx-texteditor-input,
.dx-dropdowneditor-input-wrapper input,
.dx-datagrid-text-content,
.dx-datagrid-rowsview .dx-row > td,
.dx-toolbar .dx-button-text,
.dx-toolbar .dx-texteditor-input,
.dx-list-item-content,
.dx-treeview-item-content,
.dx-drawer .dx-drawer-panel-content,
.dx-drawer .dx-drawer-content {
  color: var(--app-font-color) !important;
}

/* DevExtreme charts render text via SVG fill, not CSS color */
.dx-chart text,
.dx-piechart text,
.dx-sparkline text {
  fill: var(--app-font-color) !important;
  font-family: var(--app-font-family) !important;
}

.dx-chart .dxc-title,
.dx-piechart .dxc-title {
  fill: var(--app-font-color) !important;
}

/* DevExtreme glyphs: ensure icon font used */
.dx-icon:before {
  font-family: DXIcons !important;
}

/* DevExtreme link/button icons often don't include .dx-icon */
.dx-link-icon:before,
[class^="dx-icon-"]:before,
[class*=" dx-icon-"]:before {
  font-family: DXIcons !important;
}

/* Checkbox / radio glyphs (not .dx-icon; must not inherit app font from .dx-widget) */
.dx-checkbox-icon::before,
.dx-checkbox-icon:before,
.dx-radiobutton-icon::before,
.dx-radiobutton-icon:before {
  font-family: DXIcons !important;
}

/* Dropdown/selectbox button glyphs (spindown etc.) */
.dx-dropdowneditor-button .dx-icon:before,
.dx-dropdowneditor-icon:before,
.dx-selectbox .dx-dropdowneditor-button .dx-icon:before,
.dx-textbox .dx-dropdowneditor-button .dx-icon:before {
  font-family: DXIcons !important;
}

/* Header filter glyph (dx-header-filter / dx-header-filter-empty) */
.dx-datagrid .dx-header-filter,
.dx-treelist-container .dx-header-filter,
.dx-pivotgrid-fields-container .dx-header-filter {
  font: 14px/1 DXIcons !important;
}

/* Main navigation tabs + submenu (Views/Shared/_Navbar.cshtml) */
#main-menu-container,
#main-menu-container *:not([class*="text-"]) {
  color: var(--app-font-color);
}

#main-menu-container .dx-tabs .dx-tab,
#main-menu-container .dx-tabs .dx-tab * {
  color: var(--app-font-color) !important;
}

#sub-menu-toolbar a {
  color: var(--app-font-color) !important;
}

/* Navbar text only (do not touch icon colors) */
.top-navbar .navbar-brand,
.top-navbar .nav-link,
.top-navbar .dropdown-item,
.top-navbar .navbar-text,
.top-navbar span:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.bi) {
  color: var(--app-font-color) !important;
}

/* Brand always white (dark navbar) */
.top-navbar .navbar-brand,
.top-navbar .navbar-brand:hover,
.top-navbar .navbar-brand:focus {
  color: #fff !important;
}

/* Top navbar dropdown text always white */
.top-navbar .dropdown-menu .dropdown-item,
.top-navbar .dropdown-menu .dropdown-item:hover,
.top-navbar .dropdown-menu .dropdown-item:focus,
.top-navbar .dropdown-menu .dropdown-item:active {
  color: #fff !important;
}

.top-navbar .dropdown-menu {
  background-color: var(--bs-dark) !important;
}

.top-navbar .dropdown-menu .dropdown-item:hover,
.top-navbar .dropdown-menu .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Beat .top-navbar span:not(.fa)… (high specificity) for user menu + nested labels */
.top-navbar .dropdown-menu span:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.bi),
.top-navbar .dropdown-menu button.dropdown-item {
  color: #fff !important;
}

/* Navbar icons keep Bootstrap defaults */
.top-navbar i,
.top-navbar .fa,
.top-navbar .fas,
.top-navbar .far,
.top-navbar .fal,
.top-navbar .fab,
.top-navbar .bi {
  color: var(--bs-navbar-color) !important;
}

.top-navbar .nav-link.active i,
.top-navbar .nav-link.active .fa,
.top-navbar .nav-link.active .fas,
.top-navbar .nav-link.active .far,
.top-navbar .nav-link.active .fal,
.top-navbar .nav-link.active .fab,
.top-navbar .nav-link.active .bi {
  color: var(--bs-navbar-active-color) !important;
}

main[role="main"] {
  padding-top: var(--app-margin-t);
  padding-right: var(--app-margin-r);
  padding-bottom: var(--app-margin-b);
  padding-left: var(--app-margin-l);
}

.footer {
    position: absolute;
    bottom: 0;
    width: -webkit-fill-available;
    white-space: nowrap;
    padding:10px;
}

.dx-datagrid-headers {
    background-color: #dddddd61;
    color:#000000 !important;
    font-family: var(--app-font-family) !important;
}

/* Sidebar styles */
.sidebar {
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.sidebar-header {
  font-weight: bold;
  padding: 8px 12px;
  background-color: #f1f1f1;
  border-bottom: 1px solid #ddd;
}

.sidebar-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}

.sidebar-item:hover {
  background-color: #f3f3f3;
}

.sidebar-item.active {
  background-color: #e8f0fe;
}

.count-badge {
  font-weight: normal;
}

.requiredItem > label > span > span::after {
  content: '*';
  color: red;
  margin-left: 3px;
}

.action-buttons .btn-outline-secondary {
  border-color: #ccc;
  background-color: #f8f9fa;
  color: #333;
  width: 36px;
  height: 36px;
  padding: 6px 0;
  margin: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.grid-add-row-footer{padding:8px 12px;border:1px solid #dee2e6;border-top:0;background:#fff;cursor:pointer;color:#0d6efd;user-select:none}
.grid-add-row-footer:hover{background:#f8f9fa}
.page-header-bar{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:6px 12px;border-bottom:1px solid #dee2e6;margin:4px 2px 8px 2px}
.page-header-actions-row{width:100%;display:flex;justify-content:center}
.page-header-actions{display:flex;align-items:center;gap:8px}
.page-header-title-row{display:flex;align-items:baseline;gap:8px}
.page-header-title{font-size:16px;font-weight:600}
.page-header-subtitle{font-size:11px;color:#6c757d}
#filter-panel-container{height:calc(100vh - 180px)!important;min-height:500px!important}
.resizable-layout #filter-panel-container{height:100%!important;min-height:0!important}
.filter-panel-wrapper{min-height:0}
#filter-panel-container #data-grid-wrapper,
#filter-panel-container #data-grid,
#filter-panel-container #gridContainer,
#filter-panel-container .dx-datagrid{height:100%;min-height:0}
.card.mt-3{margin-top:0.5rem!important}
.card .card-body.pt-3{padding-top:0.5rem!important}

.dx-add-placeholder-row {
    cursor: pointer;
    background-color: #ffffff;
    height: 35px;
}
.dx-add-placeholder-row td {
    padding: 8px;
}

/* Collapsible Filter Panel */
.mini-sidebar {
    transition: width 0.3s;
}

.mini-item {
    transition: background-color 0.2s;
}

.mini-item:hover {
    background-color: #e9ecef;
}

.full-filter-panel {
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.panel-header {
    background-color: #f8f9fa;
}

/* Ensure dxDrawer content takes full height */
.dx-drawer-content, .dx-drawer-wrapper {
    height: 100% !important;
}

.drawer-container {
    height: 100%;
}

/* Vertical Text Items for Mini Sidebar */
.vertical-filter-item {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: left; /* Because of rotation, this aligns to bottom (which looks like top) */
    padding: 15px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
}

.vertical-filter-item:hover {
    background-color: #e0e0e0;
    color: #000;
}

.vertical-filter-item.active {
    background-color: #d0d0d0;
    font-weight: bold;
    color: #000;
}

.navbar .navbar-brand{font-size:0.95rem}
.navbar .nav-link{font-size:0.85rem;padding:0.35rem 0.6rem}
.top-navbar{
    position: relative;
    z-index: 1100;
}
.top-navbar .dropdown-menu{
    z-index: 1200;
}
.card{border-radius:6px}
.card-body{padding:0.75rem}
.action-buttons .btn-outline-secondary{width:32px;height:32px;padding:4px 0}
.dx-toolbar{padding:4px 0}
.dx-toolbar .dx-toolbar-item-content{padding:0 4px}
.dx-toolbar .dx-button,.dx-toolbar .dx-texteditor{height:28px}
.dx-toolbar .dx-button .dx-button-text{font-size:12px}
.dx-toolbar .dx-texteditor-input{font-size:12px}

/* ReportCenter: only keep the single Preview toggle button (AccountStatement pattern) */
#reportFileMenuButton { display: none !important; }

/* ReportCenter parameters sidebar: compact, desktop-like */
.account-statement-page .parameters-sidebar {
    width: 320px !important;
    max-width: 380px;
}

.account-statement-page .parameters-section {
    display: flex !important;
    flex-direction: column !important;
}

.account-statement-page .parameters-section .parameter-group {
    margin-bottom: 10px !important;
    display: grid !important;
    grid-template-columns: 118px 1fr !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
}

/* Account group: do NOT use the 2-col grid on the container; it has nested rows */
.account-statement-page .parameters-section .parameter-group.account-parameter-group {
    display: block !important;
}

.account-statement-page .parameters-section .parameter-group.account-parameter-group > * {
    width: 100%;
}

.account-statement-page .parameters-section .parameter-group.account-parameter-group .account-subgroup {
    display: grid;
    grid-template-columns: 118px 1fr;
    align-items: center;
    column-gap: 10px;
    margin-top: 6px;
}

.account-statement-page .parameters-section .parameter-group.account-parameter-group .account-subgroup > div,
.account-statement-page .parameters-section .parameter-group.account-parameter-group .account-subgroup > select {
    width: 100% !important;
    min-width: 0;
}

.account-statement-page .parameters-section .parameter-group > label.form-label {
    margin: 0 !important;
    white-space: nowrap;
}

.account-statement-page .parameters-section .parameter-group > label.form-label::after {
    content: ":" !important;
    margin-left: 2px;
    color: #888;
    font-weight: 400;
}

.account-statement-page .parameters-section .parameter-group > div,
.account-statement-page .parameters-section .parameter-group > select {
    width: 100% !important;
    min-width: 0;
}

.account-statement-page .parameters-section .dx-texteditor,
.account-statement-page .parameters-section .dx-datebox,
.account-statement-page .parameters-section .dx-daterangebox,
.account-statement-page .parameters-section .dx-tagbox,
.account-statement-page .parameters-section .dx-selectbox {
    width: 100% !important;
    min-width: 0;
}

.account-statement-page .parameters-section .dx-texteditor.dx-editor-outlined,
.account-statement-page .parameters-section .dx-dropdowneditor.dx-editor-outlined {
    height: 34px;
}

.account-statement-page .parameters-section .action-buttons {
    margin-top: auto !important;
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 12px;
    padding-bottom: 6px;
    border-top: 1px solid #eee;
}

/* ReportCenter: remove redundant sidebar header (title + Preview button) */
.account-statement-page .parameters-sidebar .sidebar-header {
    display: none !important;
}

/* Keep spacing consistent after hiding header */
.account-statement-page .parameters-sidebar .parameters-section {
    padding-top: 12px;
}

/* ReportCenter: remove redundant tabbar title (report name repeats) */
.account-statement-page .report-preview-tabbar-title {
    display: none !important;
}
/* .dx-datagrid{font-size:12px}
.dx-datagrid-headers .dx-datagrid-text-content{font-size:12px}
.dx-datagrid .dx-row>td{padding:0 6px!important}
.dx-datagrid-rowsview .dx-row{height:24px!important;min-height:24px!important;max-height:24px!important}
.dx-datagrid-rowsview .dx-data-row>td{height:24px!important;line-height:18px!important}
.dx-datagrid-rowsview .dx-data-row .dx-datagrid-text-content{line-height:18px!important;padding:0!important}
.dx-datagrid-rowsview .dx-data-row .dx-checkbox{margin-top:0!important}
.dx-datagrid-content .dx-datagrid-table .dx-row>td{height:24px!important;line-height:18px!important}
.dx-datagrid-headers .dx-header-row{height:26px!important;min-height:26px!important}
.dx-datagrid-headers .dx-header-row>td{height:26px!important;line-height:18px!important} */

/* Settings modal button text overrides */
#companyPopup .btn-outline-primary,
#fvModal .btn-outline-primary,
#wialonModal .btn-outline-primary { color: #0d6efd !important; border-color: #0d6efd !important; }
#companyPopup .btn-outline-primary:hover,
#fvModal .btn-outline-primary:hover,
#wialonModal .btn-outline-primary:hover { color: #fff !important; background-color: #0d6efd !important; }
#companyPopup .btn-outline-secondary,
#wialonModal .btn-outline-secondary { color: #6c757d !important; border-color: #6c757d !important; }
#companyPopup .btn-outline-danger,
#fvModal .btn-outline-danger,
#wialonModal .btn-outline-danger { color: #dc3545 !important; border-color: #dc3545 !important; }
#companyPopup .btn-outline-danger:hover,
#fvModal .btn-outline-danger:hover,
#wialonModal .btn-outline-danger:hover { color: #fff !important; background-color: #dc3545 !important; }
#companyPopup .btn-secondary,
#fvModal .btn-secondary,
#wialonModal .btn-secondary { color: #fff !important; background-color: #6c757d !important; border-color: #6c757d !important; }
#companyPopup .btn-primary,
#fvModal .btn-primary,
#wialonModal .btn-primary { color: #fff !important; background-color: #0d6efd !important; border-color: #0d6efd !important; }