/* -------------------- BASE E RESET -------------------- */
body, html {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
}

/* -------------------- HEADER -------------------- */
header {
  height: 100px;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
}

.dashboard-logo {
  margin-left: 65px;
  height: 70px;
}

.headers {
  margin-left: 60px;
  font-weight: 900;
  color: #E4D46A;
}

.header-title {
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 3px;
}

.header-subtitle {
  font-size: 16px;
  letter-spacing: 1.6px;
}

.main-content {
  margin-left: 224px;
  margin-top: 100px; 
  padding: 24px;
}
/* -------------------- SIDEBAR -------------------- */
.sidebar {
  width: 224px;
  height: calc(100vh - 100px);
  position: fixed;
  top: 100px;
  left: 0;
  background-color: #63636180;
  padding-top: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar .nav-link {
  width: 170px;
  display: block;
  padding: 12px 20px;
  font-weight: 900;
  color: black;
  text-decoration: none;
  margin: 10px 0;
  background-color: #E4D46A;
  border-radius: 5px;
  text-align: center;
}

.sidebar .nav-link:hover {
  background-color: #c7b844;
}

/* -------------------- FILTROS E BOTÕES -------------------- */
.filter-box {
  background-color: #E4D46A;
  border-radius: 5px;
}

.filter-period {
  background-color: #000000;
  color: #E4D46A;
  padding: 4px 10px;
  border-radius: 5px;
  font-weight: 900;
  font-size: 12px;
}

.filter-box input[type="date"] {
  font-weight: 900;
  font-size: 12px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.btn-black {
  background-color: #000000;
  color: #E4D46A;
  font-weight: 900;
}

.btn-black:hover {
  background-color: #1a1a1a;
  color: #ffeb70 !important;
}

.metric-value {
  color: #ff6543;
  font-weight: bold;
}

.btn-outline-warning {
  background-color: #ffc107;
  color: #000000;
  font-weight: bold;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: #000000;
  color: #ffc107;
}

.btn-primary {
  background-color: #E4D46A;
  color: #000;
  border: 1px solid #E4D46A;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #cdbf4f;
  border-color: #cdbf4f;
  color: #000;
}

/* -------------------- RESPONSIVO: NOTEBOOKS -------------------- */
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  header { height: 90px; }
  .dashboard-logo { height: 60px; margin-left: 40px; }
  .header-title { font-size: 26px; margin-left: 40px !important; }
  .header-subtitle { font-size: 14px; margin-left: 40px; }
  .sidebar { width: 180px; top: 90px; height: calc(100vh - 90px); }
  .sidebar .nav-link { width: 160px; font-size: 14px; }
  .main-content { margin-left: 200px; padding: 16px; }
  .custom-card { height: 120px; width: 150px; }
  .custom-card .value { font-size: 18px; width: 120px; height: 44px; }
  .card-spacing { margin-left: 100px; margin-right: 100px; }
  .card-spacing-wide { margin-left: 20px; margin-right: 20px; }
  .group-gap, .group-separator { margin-right: 300px; }
  .spacing2 { margin-left: 480px; }
}

/* -------------------- RESPONSIVO: TABLETS -------------------- */
@media screen and (max-width: 768px) {
  body, html {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  header { height: 100px; }
  .main-content { height: auto; margin-top: 100px; margin-left: 150px; padding: 20px; }
  .sidebar { width: 150px; top: 100px; height: calc(100vh - 100px); }
  .dashboard-logo { height: 70px; }
  .header-subtitle { font-size: 16px; letter-spacing: 1.6px; }
  .sidebar .nav-link { width: 100px; padding: 5px 10px; font-size: 11px; }
  .filter-box { padding: 8px; border-radius: 4px; }
  .filter-period { font-size: 10px; padding: 3px 8px; }
  .filter-box input[type="date"] { font-size: 10px; padding: 4px; }
  .btn-black { font-size: 12px; padding: 6px 12px; }
  .card-spacing, .card-spacing-wide, .group-gap, .spacing2, .group-separator { margin: 0; }
  .row.justify-content-center { display: flex; flex-wrap: wrap; gap: 20px; }
}

/* -------------------- RESPONSIVO: CELULARES PEQUENOS -------------------- */
@media screen and (max-width: 540px) {
  header { height: 180px; }
  .dashboard-logo { height: 70px; margin-left: 30px; }
  .header-title { font-size: 18px; letter-spacing: 1.2px; }
  .header-subtitle { font-size: 11px; letter-spacing: 0.6px; }
  .filter-row { padding: 0 10px; }
  .filter-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px !important;
  }
  .filter-box strong, .filter-period { font-size: 14px; width: 100%; }
  .filter-period input[type="date"] { width: 100%; font-size: 12px; padding: 6px; }
  .btn-black { width: 100%; text-align: center; font-size: 14px; padding: 8px; }
  .main-content { margin-top: 180px; }
  .sidebar { top: 180px; height: calc(100vh - 180px); }
}

/* -------------------- RESPONSIVO: INTERMEDIÁRIO -------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  header { height: 90px; }
  .dashboard-logo { height: 60px; margin-left: 40px; }
  .header-title { font-size: 24px; margin-left: 40px; }
  .header-subtitle { font-size: 12px; margin-left: 40px; }
  .sidebar { width: 180px; top: 90px; height: calc(100vh - 90px); }
  .sidebar .nav-link { width: 140px; font-size: 13px; }
  .main-content { margin-top: 100px; margin-left: 180px; padding: 16px; height: auto; }
  .custom-card { height: 110px; width: 140px; }
  .custom-card .value { font-size: 16px; width: 110px; height: 40px; }
  .card-spacing, .card-spacing-wide, .group-gap, .spacing2, .group-separator { margin: 0; }
  .row.justify-content-center { display: flex; flex-wrap: wrap; gap: 20px; }
}