/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --bs-body-bg: #EAE7E1;
  --bs-body-color: #1a1a1a;
  --bs-primary: #EE7203;
  --bs-primary-rgb: 232, 105, 48;
  --bs-font-sans-serif: 'Manrope', system-ui, sans-serif;
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 16px;
  --bs-dropdown-border-radius: 16px;
  --bs-link-color: #EE7203;
  --bs-link-color-rgb: 232, 105, 48;
  --bs-btn-bg: #EE7203;
}

a.btn.btn-primary,
input.btn.btn-primary,
.nav-pills .nav-link.active {
  background-color: #EE7203;
  border-color: #EE7203;
}

a.btn.btn-primary:hover,
input.btn.btn-primary:hover {
  background-color: #8f4605;
  border-color: #8f4605;
}

a.btn.btn-outline-primary {
  color: #EE7203;
  border-color: #EE7203;
}

a.btn.btn-outline-primary:hover,
.nav-pills .nav-link:hover {
  background-color: #EE7203;
  color: #ffffff;
  border-color: #EE7203;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.card {
  --bs-card-bg: #ffffff;
}

/* Navbar pill */
nav.navbar-innostrom {
  background: transparent !important;
  padding: 12px 0;
}

nav.navbar-innostrom>.container {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  padding: 8px 20px;
  flex-wrap: nowrap;
}

/* Vertically center button triggers inside nav-item dropdowns */
.navbar-innostrom .navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

/* Give all nav links pill-ready padding so active background doesn't shift layout */
.navbar-innostrom .navbar-nav .nav-link {
  padding: 6px 10px;
  align-self: center;
  border: none;
  background: none;
}

.navbar-innostrom .navbar-nav .bi {
  display: none;
}

/* Active nav link pill */
.navbar-innostrom .nav-link.active {
  font-weight: 700;
  color: #EE7203;
  border-bottom: 2px solid #EE7203;
}

/* Dropdown card */
.navbar-innostrom .dropdown-menu {
  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: 8px;
  margin-top: 8px;
}

.navbar-innostrom .dropdown-item.active,
.navbar-innostrom .dropdown-item:active {
  color: #EE7203;
  background-color: transparent;
}

.rodauth#login-form,
.rodauth#change-password-form,
.rodauth#change-login-form {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 24px;
}

@media (min-width: 1900px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1820px;
  }

  .navbar-innostrom .navbar-nav .bi {
    display: inline-block;
  }
}

table.table-sm td .select.mb-3,
table.table-sm td .hidden.mb-3 {
  margin-bottom: 0 !important;
}

table.table td,
table.table th,
table.table tr {
  background-color: transparent;
}

td.novalidate .form-select.is-valid {
  --bs-form-select-bg-icon: none !important;
  padding-right: 2em !important;
}

td.max10 {
  width: 12%;
}

div[data-controller=chart] {
  padding: 6px;
  box-sizing: border-box;
  position: relative;
}

@media (max-width: 767.98px) {
  div[data-controller=chart]::after {
    content: '→';
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(100, 100, 100, 0.8);
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    pointer-events: none;
    z-index: 1;
  }

  div[data-controller=chart]::before {
    content: '←';
    position: absolute;
    left: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(100, 100, 100, 0.8);
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    pointer-events: none;
    z-index: 1;
  }

  div[data-controller=chart].chart-hint-hidden::after {
    display: none;
  }

  div[data-controller=chart].chart-hint-hidden::before {
    display: flex;
  }
}

.chart-scrollable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, #fff 15%, transparent),
    linear-gradient(to left, #fff 15%, transparent) 100% 0,
    linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent),
    linear-gradient(to left, rgba(0, 0, 0, 0.06), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 30px 100%, 30px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

.chart-scrollable .chart-inner {
  min-width: 600px;
  height: 350px;
}

.card-standalone-chart .chart-inner {
  height: 600px;
}

.page-item.active .page-link {
  background-color: #EE7203;
  border-color: #EE7203;
}