/*
 * 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.
 */

 .justify-end {
  justify-content: flex-end;
 }

 .day-block {
  padding: 20px;
  background-color: rgba(0,0,0,0.1);
 }

 .main-logo img {
  width: auto;
  height: 30px;
 }

 .border-bottom {
  border-bottom: 1px solid #e7ecf0;
 }

 .w-half {
  width: 50%;
 }

 .w-quarter {
  width: 25%;
 }

 @media screen and (max-width: 768px) {
  .w-half {
    width: 100%;
  }
 }

 .stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
 }

 .dashboard-stats {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
 }

 .entries-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
 }

 .entries-filters div,
 .entries-filters .form-control {
  width: 100%;
 }

 .dashboard-tasks {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
 }

 .dashboard-tasks .card {
  width: 50%;
 }

 .avatar-preview {
  width: 200px;
  height: auto;
  border-radius: 10px;
  margin-bottom: 20px;
 }
 
 .custom-form-group {
  max-width: 250px;
 }

 .deadline {
  background-color: rgb(255, 156, 156);
 }

 .deadline .deadline-date {
  color: #000;
 }

 .pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination a,
.pagination span {
  padding: 6px 12px;
  margin: 0 2px;
  text-decoration: none;
  color: #007bff;
  border-radius: 4px;
}

.pagination .current {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination a:hover {
  background-color: #e9ecef;
}

.flip-card {
    perspective: 1000px;
    height: 200px; /* każda karta ma swoją wysokość */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card-inner.flipped {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0; /* zamiast width/height 100% */
    backface-visibility: hidden;
    border-radius: 0.75rem; /* zaokrąglenie */
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* Sticky note look */
.sticky-note {
    transform: rotate(-1deg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sticky-note:nth-child(2n) {
    transform: rotate(1.5deg);
}

.sticky-note:hover {
    transform: scale(1.05) rotate(0deg);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    z-index: 10;
}

.modal-overlay {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 12;
}

.modal-window {
    position: absolute;
    width: 100%;
    top: calc(50% - 150px);
    top: calc(50% - 150px);
    left: calc(50% - 300px);
    max-width: 600px;
    background: white;
    z-index: 13;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

 @media screen and (max-width: 768px) {
  .dashboard-stats {
    flex-direction: column;
  }
  .dashboard-tasks {
    flex-direction: column;
  }
  .dashboard-tasks .card {
    width: 100%;
  }
  .w-quarter {
    width: 100%;
  }
  .entries-filters {
    flex-direction: column;
  }
 }