/* DevForm chrome — palette from the DF mark (ember #E05C15, steel #7B7A7A, forge #0E0F10). */

@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  --df-forge: #0e0f10;
  --df-forge-deep: #08080a;
  --df-steel-900: #16181a;
  --df-steel-800: #1d2023;
  --df-steel-700: #2a2e32;
  --df-steel-300: #7b7a7a;
  --df-paper: #edede9;
  --df-ember: #e05c15;
  --df-ember-hot: #f5822f;
}

body.login_admin,
body.customers {
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif;
}

body.login_admin {
  background: var(--df-forge) !important;
  color: var(--df-paper);
}

body.login_admin h1,
body.login_admin .tw-text-neutral-800,
body.login_admin .tw-text-neutral-600,
body.login_admin .text-muted {
  color: var(--df-paper) !important;
}

body.login_admin .tw-bg-white {
  background: var(--df-steel-900) !important;
  border-color: var(--df-steel-700) !important;
  color: var(--df-paper);
}

body.login_admin label,
body.login_admin .control-label {
  color: var(--df-paper);
}

body.login_admin .form-control {
  background: var(--df-steel-800);
  color: var(--df-paper);
  border-color: var(--df-steel-700);
}

body.login_admin .company-logo img {
  max-height: 96px;
  width: auto;
}

body.customers {
  background: var(--df-paper);
}

body.customers .navbar-default {
  background: var(--df-forge-deep) !important;
  border-color: var(--df-steel-700) !important;
}

body.customers .navbar-default .navbar-nav > li > a,
body.customers .navbar-default .navbar-brand {
  color: var(--df-paper) !important;
}

body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-login) > a:hover,
body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-login) > a:focus {
  color: var(--df-ember-hot) !important;
  background-color: transparent !important;
}

body.customers .navbar-default .navbar-nav > .active > a,
body.customers .navbar-default .navbar-nav > .active > a:hover,
body.customers .navbar-default .navbar-nav > .active > a:focus {
  color: var(--df-ember) !important;
  background-color: transparent !important;
}

body.customers .navbar-brand img,
body.customers .navbar-default .logo img {
  max-height: 36px;
  width: auto;
}

body.customers footer {
  background: var(--df-forge-deep);
  color: var(--df-steel-300);
}

body.customers .panel_s,
body.customers .login-form .panel-body {
  background: #fff;
}

body.customers .login-heading {
  font-family: "Chakra Petch", "IBM Plex Sans", sans-serif;
  text-transform: uppercase;
  color: var(--df-forge);
}

.admin #header img,
#logo img {
  max-height: 36px;
  width: auto;
}

/* Match the forge sidebar; keep light text so the name and email stay readable. */
.admin .sidebar-user-profile > a.profile {
  color: var(--df-paper) !important;
  background: var(--df-forge) !important;
  border-color: var(--df-steel-700) !important;
  box-shadow: none !important;
}

.admin .sidebar-user-profile > a.profile:hover,
.admin .sidebar-user-profile > a.profile:focus {
  color: var(--df-paper) !important;
  background: var(--df-steel-800) !important;
  border-color: var(--df-steel-700) !important;
}

.admin .sidebar-user-profile > a.profile .tw-text-neutral-300,
.admin .sidebar-user-profile > a.profile .tw-text-neutral-500 {
  color: #c4c3bf !important;
}

.admin .sidebar-user-profile .dropdown-menu > li > a,
.admin .sidebar-user-profile .dropdown-menu > li > a:hover,
.admin .sidebar-user-profile .dropdown-menu > li > a:focus {
  color: var(--df-forge) !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--df-ember) !important;
  border-color: var(--df-ember) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background-color: var(--df-ember-hot) !important;
  border-color: var(--df-ember-hot) !important;
}

.admin #wrapper a,
body.customers .container a,
body.login_admin a {
  color: var(--df-ember);
}

.admin #wrapper a:hover,
.admin #wrapper a:focus,
body.customers .container a:hover,
body.customers .container a:focus,
body.login_admin a:hover,
body.login_admin a:focus {
  color: var(--df-ember-hot);
}

::selection {
  background: var(--df-ember);
  color: #fff;
}