:root {
    --lc-cream: #eae5e2;
    --lc-purple: #3f3a63;
    --lc-brown: #a2745a;
    --lc-text: #2f2a3a;
    --lc-muted: #6b6773;
    --lc-border: #cfc6bf;
}

body{
  background: var(--lc-cream);
  color: var(--lc-text);
}

/* Top navbar -> deep purple */
.navbar.bg-dark{
  background-color: var(--lc-purple) !important;
}

.navbar .navbar-brand,
.navbar .nav-link{
  color: #fff !important;
}

.navbar .nav-link.active{
  font-weight: 600;
  color: #fff !important;
}

/* Main surface */
main.container-fluid{
  background: var(--lc-cream);
  padding: 1.25rem 1.25rem 2rem;
}

/* Headings (brown accent like the sample) */
h1,h2,h3,h4,h5{
  color: var(--lc-brown);
}

/* Subtle separators */
hr{
  border-color: var(--lc-border);
}

/* DevExtreme: headers and borders */
.dx-datagrid{
  border-color: var(--lc-border);
}

.dx-datagrid .dx-datagrid-headers{
  background: #fff;
  color: var(--lc-purple);
  border-bottom: 1px solid var(--lc-purple);
}

.dx-datagrid .dx-header-row > td{
  font-weight: 700;
  color: var(--lc-purple);
}

.dx-datagrid .dx-row-alt > td{
  background: rgba(63,58,99,.04);
}

.dx-datagrid .dx-row > td{
  border-color: var(--lc-border);
}

.dx-datagrid .dx-datagrid-header-panel{
  background: transparent;
  border-color: var(--lc-border);
}

/* DevExtreme editors/buttons */
.dx-texteditor{
  border-color: var(--lc-border);
}

.dx-button-mode-contained{
  background-color: var(--lc-purple);
  border-color: var(--lc-purple);
  color: #fff;
}

.dx-button-mode-contained .dx-button-text{
  color: #fff;
}

.dx-button-mode-contained.dx-state-hover{
  background-color: #343055;
  border-color: #343055;
}

.dx-button-mode-outlined{
  border-color: var(--lc-purple);
  color: var(--lc-purple);
}

.dx-button-mode-outlined .dx-button-text{
  color: var(--lc-purple);
}

/* DevExtreme pager */
.dx-pager{
  border-top: 1px solid var(--lc-border);
}

.dx-page-sizes .dx-page-size,
.dx-pages .dx-page{
  color: var(--lc-purple);
}

.dx-page-size.dx-selection{
  background: rgba(63,58,99,.10);
}

/* Search panel */
.dx-datagrid-search-panel{
  border-color: var(--lc-border);
}

/* Pager left/right spacing (RTL & LTR) */
.dx-datagrid-pager.dx-pager {
    padding-left: 10px;
    padding-right: 10px;
}

.dx-button {
    border-radius:0px;
}

.card-header {
    border-bottom:none;
}