/* TBS Biller look — dark forest sidebar, mint workspace, sage tables */

:root {
  --tbs-forest: #1a4338;
  --tbs-forest-deep: #14352c;
  --tbs-forest-mid: #245c4c;
  --tbs-forest-hover: #1f5346;
  --tbs-title: #1a3d32;
  --tbs-text: #1f2e28;
  --tbs-muted: #5a6b63;
  --tbs-mint: #dcecd5;
  --tbs-mint-soft: #e8f2e1;
  --tbs-pill: #c9ddb8;
  --tbs-sage: #6b9a6a;
  --tbs-sage-dark: #5a8659;
  --tbs-white: #ffffff;
  --tbs-radius: 8px;
  --tbs-radius-lg: 12px;
  --mat-sys-primary: #1a4338;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: #c9ddb8;
  --mat-sys-on-primary-container: #1a4338;
  --mat-sys-surface: #dcecd5;
  --mat-sys-background: #dcecd5;
  --mat-sys-on-background: #1a3d32;
  --mat-sys-on-surface: #1f2e28;
  --mat-sys-surface-container: #e8f2e1;
  --mat-sys-surface-container-low: #f3f8ef;
  --mat-sys-surface-tint: #1a4338;
  --mat-sys-inverse-primary: #c9ddb8;
  --mat-button-filled-container-color: #1a4338;
  --mat-button-filled-label-text-color: #ffffff;
  --mat-button-filled-container-shape: 8px;
  --mat-table-header-headline-color: #ffffff;
  --mat-datepicker-calendar-date-selected-state-background-color: #1a4338;
  --mat-datepicker-calendar-date-today-outline-color: #1a4338;
  --mat-option-selected-state-layer-color: #1a4338;
  --mat-pseudo-checkbox-full-selected-icon-color: #1a4338;
}

html,
body {
  color: var(--tbs-text) !important;
  background-color: var(--tbs-mint) !important;
}

body {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ----- Chrome: navbar + sidebar ----- */
.navbar,
.navbar.active,
.navbar-header,
.navbar-header1 {
  background-color: var(--tbs-forest) !important;
  box-shadow: none !important;
}

/* Header was clipping the Store/Location label and 72px logo */
nav.navbar,
.navbar {
  min-height: 72px !important;
  height: 72px !important;
  overflow: visible !important;
  padding: 0 !important;
}

.navbar .container-fluid,
.navbar .nav.navbar-nav,
.navbar .navbar-nav.navbar-right,
.navbar .nav-left-menu,
.navbar-header,
.navbar-header1 {
  height: 72px !important;
  min-height: 72px !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

.navbar-header,
.navbar-header1 {
  padding: 0 8px !important;
}

.navbar-header .navbar-brand,
.navbar-header1 .navbar-brand {
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  padding: 4px 0 !important;
}

.navbar .logo-img {
  max-height: 56px !important;
  height: 56px !important;
  width: auto !important;
}

.navbar .collapse-menu-icon,
.navbar .collapse-menu-icon .menuBtn,
.navbar .navbar-nav.navbar-right .fullscreen,
.navbar .navbar-nav.navbar-right .languageMenu,
.navbar .navbar-nav.navbar-right .btnNotification,
.navbar .navbar-toggle,
.navbar .bars {
  height: 72px !important;
  line-height: 72px !important;
}

.navbar button.mt-4 {
  margin-top: 0 !important;
}

.navbar .location-dropdown,
.navbar .form-group.location-dropdown {
  margin: 0 12px 0 8px !important;
  max-width: 180px;
  line-height: normal !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.navbar .location-dropdown .label_color,
.navbar .label_color {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  margin: 0 0 2px !important;
  white-space: nowrap;
}

.navbar .location-dropdown .mat-mdc-select,
.navbar .location-dropdown .form-control {
  height: 32px !important;
  min-height: 32px !important;
  line-height: 32px !important;
  color: var(--tbs-white) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 6px !important;
  padding: 0 8px !important;
}

.sidebar {
  background: var(--tbs-forest) !important;
  box-shadow: 2px 0 12px rgba(20, 53, 44, 0.18);
  top: 72px !important;
  height: calc(100vh - 72px) !important;
}

section.content {
  margin-top: 84px !important;
}

.navbar-header .logo-name,
.navbar-header .logo-img,
.navbar-header1 .logo-img,
.theme-white .label_color,
.logo-name {
  color: var(--tbs-white) !important;
}

.navbar .nav > li > a,
.navbar.active .nav > li > a,
.navbar .collapse-menu-icon .mat-icon,
.navbar.active .collapse-menu-icon .mat-icon,
.navbar .nav-notification-icons .mat-icon,
.navbar.active .nav-notification-icons .mat-icon,
.navbar-nav.navbar-right,
.bars {
  color: var(--tbs-white) !important;
}

.sidebar .legal {
  background-color: var(--tbs-forest-deep) !important;
}

.sidebar .user-info {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.sidebar .menu .list .header {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 16px 22px 6px !important;
}

.sidebar .menu .list a {
  color: var(--tbs-white) !important;
  border-radius: var(--tbs-radius) !important;
  margin: 2px 10px !important;
  padding: 6px 12px 6px 14px !important;
}

.sidebar .menu .list a span {
  color: var(--tbs-white) !important;
  letter-spacing: 0.01em !important;
  font-size: 13.5px !important;
}

.sidebarIcon .mat-icon,
.sidebar .menu .list i.material-icons,
.sidebar .menu .list .menu-toggle:before,
.sidebar .menu .list .menu-toggle:after {
  color: var(--tbs-white) !important;
}

.sidebar .menu .list li a:hover,
.sidebar .menu .list a:hover,
.sidebar .menu .list a:focus {
  background-color: var(--tbs-forest-hover) !important;
  color: var(--tbs-white) !important;
}

/* Expanded parent: keep white text on a slightly lighter green */
.sidebar .menu .list li.active > a.menu-toggle,
.sidebar .menu .list li.active > a.menu-top,
.sidebar .menu .list li.active-top > a,
.sidebar .menu .list .active > a.menu-toggle,
.sidebar .menu .list .active > a.menu-top {
  background: var(--tbs-forest-hover) !important;
  color: var(--tbs-white) !important;
  border-radius: var(--tbs-radius) !important;
}

.sidebar .menu .list li.active > a.menu-toggle span,
.sidebar .menu .list li.active > a.menu-top span,
.sidebar .menu .list li.active-top > a span,
.sidebar .menu .list li.active > a span.hide-menu,
.sidebar .menu .list .active > a.menu-toggle span,
.sidebar .menu .list .active > a.menu-top span,
.sidebar .menu .list li.active > a .mat-icon,
.sidebar .menu .list .active > a.menu-toggle .mat-icon,
.sidebar .menu .list .active > a.menu-top:before,
.sidebar .menu .list .active > a.menu-toggle:before,
.sidebar .menu .list .active > a.menu-top:after,
.sidebar .menu .list .active > a.menu-toggle:after {
  color: var(--tbs-white) !important;
}

/* Selected submenu item: mint pill + dark text */
.sidebar .menu .list .ml-menu li.active > a,
.sidebar .menu .list .ml-menu .active a,
.sidebar .menu .list .ml-menu-2 li.active > a {
  background-color: var(--tbs-pill) !important;
  color: var(--tbs-title) !important;
  border-radius: var(--tbs-radius) !important;
}

.sidebar .menu .list .ml-menu li.active > a span,
.sidebar .menu .list .ml-menu .active a span {
  color: var(--tbs-title) !important;
}

/* ----- Workspace ----- */
section.content {
  background-color: var(--tbs-mint) !important;
}

.odd-row {
  background-color: var(--tbs-mint-soft) !important;
}

.even-row {
  background-color: var(--tbs-white) !important;
}

.page-title,
h1, h2, h3, h4, h5, h6,
.mat-mdc-card-title,
.content-header h1,
.card .header h2,
.card .header h2 strong {
  color: var(--tbs-title) !important;
}

.page-title,
.content-header h1 {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* ----- Buttons ----- */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled,
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-raised-button.mat-primary,
.mat-mdc-button.primary,
button.primary.mat-mdc-unelevated-button,
.mdc-button--unelevated.primary,
.login-btn.primary,
.mat-mdc-mini-fab.mat-primary {
  background-color: var(--tbs-forest) !important;
  color: var(--tbs-white) !important;
  border-color: var(--tbs-forest) !important;
  border-radius: var(--tbs-radius) !important;
}

.btn-primary:hover,
.mat-mdc-unelevated-button.mat-primary:hover,
.mdc-button--unelevated.primary:hover {
  background-color: var(--tbs-forest-mid) !important;
}

.btn-outline-primary {
  color: var(--tbs-forest) !important;
  border: 1px solid var(--tbs-forest) !important;
  background: transparent !important;
  border-radius: var(--tbs-radius) !important;
}

.btn-outline-primary:hover {
  background: var(--tbs-forest) !important;
  color: var(--tbs-white) !important;
}

.mdc-button {
  border-radius: var(--tbs-radius) !important;
}

/* ----- Tables ----- */
.mat-mdc-table {
  background: var(--tbs-white) !important;
  border-radius: var(--tbs-radius-lg) !important;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(26, 67, 56, 0.08);
}

.mat-mdc-table .mat-mdc-header-row,
.mat-mdc-header-row,
table thead tr {
  background-color: var(--tbs-sage) !important;
}

.mat-mdc-header-cell,
.mat-mdc-table .mat-mdc-header-cell,
th.mat-mdc-header-cell {
  color: var(--tbs-white) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.mat-mdc-row,
.mat-mdc-cell {
  background-color: var(--tbs-white) !important;
  color: var(--tbs-text) !important;
}

.mat-mdc-row:hover .mat-mdc-cell {
  background-color: var(--tbs-mint-soft) !important;
}

.page-item.active .page-link {
  background-color: var(--tbs-forest) !important;
  border-color: var(--tbs-forest) !important;
}

/* ----- Cards & search ----- */
.mat-mdc-card,
.card,
.mat-mdc-table-container {
  background: var(--tbs-white) !important;
  border-radius: var(--tbs-radius-lg) !important;
}

.search-box input#search,
input[type="search"],
.mat-mdc-form-field .mdc-text-field--outlined {
  border-radius: var(--tbs-radius) !important;
}

.search-box input#search {
  background: var(--tbs-white) !important;
  color: var(--tbs-text) !important;
}

a,
.link-primary,
.text-primary,
.mat-icon.text-primary,
.breadcrumb li a {
  color: var(--tbs-forest) !important;
}

.nav-tabs > li > a:before {
  border-bottom: 2px solid var(--tbs-forest) !important;
}

/* ----- Login ----- */
.login-container {
  background: linear-gradient(135deg, #1a4338 0%, #245c4c 45%, #14352c 100%) !important;
}

.login-form {
  border-radius: var(--tbs-radius-lg) !important;
  box-shadow: 0 12px 40px rgba(20, 53, 44, 0.28) !important;
}

.login-btn {
  border-radius: var(--tbs-radius) !important;
}

/* ----- Material filled buttons using MDC tokens ----- */
.mat-mdc-unelevated-button:not(:disabled),
.mdc-button--unelevated:not(:disabled) {
  --mdc-filled-button-container-color: #1a4338;
  --mdc-filled-button-label-text-color: #ffffff;
}

.mat-mdc-fab,
.mat-mdc-mini-fab {
  --mdc-fab-container-color: #1a4338;
  --mdc-fab-icon-color: #ffffff;
}