html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.layout-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.sidebar {
  width: 4.5rem;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  border-right: 1px solid #dfd8d8;
}

.sidebar .nav-link {
  color: #495057;
  transition: background 0.2s, color 0.2s;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
}

.sidebar .nav-link i {
  pointer-events: none;
}

.content-area {
  flex: 1;
  min-width: 0; /* ESSENCIAL para liberar scroll horizontal de filhos */
}

.navbar-area {
  border-bottom: 1px solid #dee2e6;
}

main {
  flex-grow: 1;
  padding: 2rem;
  overflow-y: auto;
  overflow-x: auto;
}

footer {
  border-top: 1px solid #dee2e6;
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: #6c757d;
  background-color: #fff;
}

/* Descrição Projetos */

/* Reduz a largura da sidebar offcanvas no mobile */
.offcanvas-sidebar {
  width: 70px !important; /* ou 60px se quiser mais fino */
}

/* Remove padding e alinha os ícones */
.offcanvas-sidebar .offcanvas-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Ajusta cada link de ícone */
.offcanvas-sidebar .nav-link {
  padding: 12px 0;
  width: 100%;
  text-align: center;
  font-size: 1.4rem;
}

/* kanban  */

body::-webkit-scrollbar {
  width: 11px;
  height: 4px;
}
body::-webkit-scrollbar:horizontal {
  height: 4px;
}

body::-webkit-scrollbar-track,
body::-webkit-scrollbar-track:horizontal {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb:horizontal {
  background-color: var(--thumbBG);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}
.boards {
  display: inline-flex;
  flex: 1;
  height: 100%;
  width: 100%;
  border-top: 1px solid rgb(212, 212, 212);
}

.board {
  background: #f5f5f5;
  margin: 0 0.5rem;
  padding: 0px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.board h3 {
  padding: 16px !important;
  min-width: 300px;
  width: 100%;
  margin: 0;
  background-color: #ffff;
  font-weight: bold;
  font-size: 18px;
  color: #1c1c2e;
}

.dropzone {
  padding: 16px;
  min-width: 300px;
  min-height: 200px;
  justify-content: center;
  height: 100%;
}

.kanbanCard {
  background-color: #ffff;
  padding: 16px;
  width: 250px;
  margin: auto;
  margin-bottom: 2rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 16px;
}

.description {
  color: #434343;
  font-weight: normal;
  font-size: 14px;
}

.red {
  border-left: 5px solid #e2163b;
}
.purple {
  border-left: 5px solid #4515cf;
}
.blue {
  border-left: 5px solid #158ccf;
}
.yellow {
  border-left: 5px solid #efa20c;
}
.green {
  border-left: 5px solid #5ad111;
}

.highlight {
  background-color: #d7d7d7cc;
}
.kanbanCard,
.dropzone {
  transition: 400ms;
}
.is-dragging,
.darkmode .is-dragging {
  cursor: move !important;
  cursor: -webkit-grabbing;
  opacity: 0.3;
}
.over {
  background: #e9e9e9;
}

.form-inline {
  display: flex;
  align-items: center;
  justify-content: center;
}
label {
  margin: 0 !important;
}
input {
  margin: 0rem 1rem 0rem 0.5rem !important;
}

.priority {
  cursor: pointer;
  color: #989898;
}
.is-priority,
.darkmode .is-priority {
  cursor: pointer;
  color: #ff7a00;
}
.delete {
  color: #e2163b;
  cursor: pointer;
}
.invisibleBtn:focus,
#theme-btn:focus {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: none !important;
}
.invisibleBtn {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
}

/* dark mode */
.darkmode {
  background-color: #1b1c28;
}
.darkmode * {
  color: white;
  background-color: #1b1c28;
}
.darkmode .kanbanCard {
  background-color: #1b1c28;
}
.darkmode .controls {
  background-color: #1b1c28;
}
.darkmode .form-control {
  box-shadow: none;
  border: none;
  background-color: #252632;
  color: white;
}
.darkmode .form-control:focus {
  box-shadow: none;
  border: none;
  background-color: #252632;
  color: white;
}
.darkmode .form-inline {
  background-color: #1b1c28;
}
.darkmode .btn-dark {
  background-color: #252632;
  border: none;
}
.darkmode .btn-dark:hover {
  background-color: #292a36 !important;
}

.darkmode .dropzone {
  background-color: #292a36 !important;
}
.darkmode .boards {
  border-top: 1px solid #252632;
  scrollbar-color: dark;
}
.darkmode h3 {
  background-color: #1b1c28;
}
.darkmode .over {
  background-color: #15151d !important;
}
.darkmode .delete {
  color: #dc3545;
}
.darkmode #theme-btn {
  color: white !important;
}
.darkmode h3 {
  color: white !important;
}

/* loading */
.loader {
  border: 16px solid white; /* Light grey */
  border-top: 16px solid #1d1f20; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  background-color: transparent;
  /* Light grey */
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
  0% {
    transform: rotate(0deg);
  }
}
#loadingScreen {
  position: absolute;
  z-index: 30;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Backlogs  */

/* ===== SPRINT CONTAINER ===== */
.scrum-backlog {
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  width: 100%;
}

/* ===== TICKETS ===== */
.scrum-card {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  min-width: 720px; /* ← largura mínima para forçar scroll quando necessário */
  max-width: 100%;
}

/* ===== CONTADOR (se for usar) ===== */
.scrum-counters .badge {
  font-size: 0.75rem;
  padding: 0.35em 0.5em;
}

/* ===== STATUS SELECT DROPDOWN ===== */
.scrum-status-dropdown {
  min-width: 160px !important;
  max-width: 100%;
  width: 160px !important;
}

/* ===== AVATAR ===== */
.scrum-avatar img {
  object-fit: cover;
}

/* ===== TABELA WRAPPER (força scroll horizontal em mobile) ===== */
.scrum-table-wrapper {
  overflow-x: auto;
  width: 100%;
  padding-bottom: 0.5rem;
}

/* ===== ACCORDION VISUAL AJUSTES ===== */
.accordion-button.no-arrow::after {
  display: none !important;
}

.accordion-button:focus {
  box-shadow: none !important;
  outline: none !important;
}

.accordion-button:not(.collapsed) {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none;
}

/* ===== BOTÃO CONCLUIR SPRINT ===== */
.scrum-btn-concluir {
  font-weight: 500;
  padding: 4px 12px;
  font-size: 0.85rem;
  border-radius: 6px;
  white-space: nowrap;
}

.scrum-equipe-block {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.scrum-equipe-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.scrum-equipe-scroll {
  display: inline-flex;
  white-space: nowrap;
  gap: 4px;
  min-width: 100%;
}

.emoji-reaction {
  cursor: pointer;
  font-size: 1rem;
  margin-right: 6px;
  transition: transform 0.1s;
}
.emoji-reaction:hover {
  transform: scale(1.2);
}