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

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body,
input,
button,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #333;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;

  & + fieldset {
    margin-top: 20px;
  }
}

textarea,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="email"],
input[type="password"],
select {
  width: 100%;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

input[type="search"] {
  border-radius: 50px;
  padding-left: 40px;
  padding-right: 40px;
}

input[type="button"],
input[type="submit"],
button,
.button {
  background-color: #0d6efd;
  border: 1px solid #0d6efd;
  color: #fff;
  border: none;
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all ease 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  &:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    text-decoration: none;
  }

  &.danger {
    background-color: #dc3545;
    border-color: #dc3545;

    &:hover {
      background-color: #bb2d3b;
      border-color: #b02a37;
    }
  }
}

.badge {
  font-size: 12px;
  font-weight: 300;
  color: #0d6efd;
  /* display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #e7f1ff;
  border: 1px solid #b6d4fe;
  margin-right: 5px; */
}

.button-link {
  background: none;
  border: none;
  color: #004E98;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  &:hover {
    text-decoration: underline;
    background: transparent !important;
    box-shadow: none !important;
  }
}

.button-outline {
  background-color: #fff;
  border: 1px solid #0d6efd;
  color: #0d6efd;
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all ease 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;

  &:hover {
    background-color: #efefef !important;
    box-shadow: none !important;
    text-decoration: none;
  }
}

.button-outline--danger {
  border: 1px solid #dc3545;
  color: #dc3545;
}

.button--small {
  font-size: 14px;
  padding: 1px 10px;
  min-height: 27px;
}

.button--block {
  display: flex-block;
  width: 100%;
}

.button-group {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
}

.button-group-tight {
  display: inline-flex;
  align-items: flex-start;
  gap: 0;

  form {
    display: inline-flex;
  }

  .button, .button-outline {
    border-radius: 0;
    margin-right: -1px;
  }

  .button-outline:first-child, form:first-child .button-outline  {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .button-outline:last-child, form:last-child .button-outline {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

.logo {
  a {
    color: #0d6efd;

    &:hover {
      text-decoration: none;
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  /* margin: 0; */
  /* font-weight: normal; */
  margin: 0;
  line-height: 1.2;
}

h1, h2 {
  font-family: calibre, sans-serif;
  font-weight: 500;
}

h1 {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 20px;
}

h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  color: #999;
  margin-bottom: 5px;
}

.text-muted {
  color: #999;
}

.text-danger {
  color: #dc3545;
}

.text-center {
  text-align: center;
}

p {
  margin-top: 0;
  margin-bottom: 15px;
}


header,
main,
footer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 15px;
}

main {
  max-width: 1400px;
}

.narrow {
  max-width: 600px;
  margin: 0 auto;
}

main {
  padding: 50px 15px;
}

hgroup {
  margin-bottom: 50px;
  text-align: center;

  &.left {
    text-align: left;
  }
}

a {
  color: #0d6efd;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

label {
  display: block;
}

mark {
  padding: 0;
  background: linear-gradient(to right, rgb(132, 38, 108.5), rgb(111.2, 57.1, 132.9), rgb(93.45, 63.5, 153.8), rgb(67.2, 71.6, 157.4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mb5 {
  margin-bottom: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb50 {
  margin-bottom: 50px;
}

.checked {
  text-decoration: line-through;
  color: #999 !important;

  a {
    color: #999 !important;
  }
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
  }

  a {
    text-decoration: none;
  }
}

.alert {
  padding: 8px 15px;
  margin-bottom: 30px;
  border-radius: 6px;
  background: #efefef;
  border: 1px solid #d6d8db;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}



.avatar-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.avatar {
  border-radius: 50%;
  overflow: hidden;
  display: block;
  border: 1px solid #0d6efd;
  /* filter: grayscale(100%); */
  box-shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .01698),.0335rem .067rem .402rem rgba(129, 145, 181, .024),.0625rem .125rem .75rem rgba(129, 145, 181, .03),.1125rem .225rem 1.35rem rgba(129, 145, 181, .036),.2085rem .417rem 2.502rem rgba(129, 145, 181, .04302),.5rem 1rem 6rem rgba(129, 145, 181, .06),0 0 0 .0625rem rgba(129, 145, 181, .015);
  width: 25px;
  height: 25px;
  position: relative;
  
  img {
    /* aspect-ra  tio: 1/1; */
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* border: 1px solid red; */
  }
}

.grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 30px;
}

article {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 30px;
  box-shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .01698),.0335rem .067rem .402rem rgba(129, 145, 181, .024),.0625rem .125rem .75rem rgba(129, 145, 181, .03),.1125rem .225rem 1.35rem rgba(129, 145, 181, .036),.2085rem .417rem 2.502rem rgba(129, 145, 181, .04302),.5rem 1rem 6rem rgba(129, 145, 181, .06),0 0 0 .0625rem rgba(129, 145, 181, .015);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  transition: all ease 0.5s;
  position: relative;

  h4 {
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 4px;
  }

  &.pinned {
    /* outline: blue solid 2px; */
  }

  &.overdue {
    /* outline: red solid 2px; */
  }

  &.archived {
    opacity: 0.9;
    /* transform: scale(0.95); */
  }

  header, footer{ 
    padding: 0;
    margin: 0;
    max-width: none;
  }

  header {
    /* display: flex;
    justify-content: space-between; */
    margin: 0 -31px;
    margin-bottom: 10px;
    padding: 0 31px 10px 31px;
    border-bottom: 1px solid #efefef;
    position: relative;
  }

  footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    
    li {
      display: flex;
      gap: 10px;
    }
  }

  .description {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;

    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    }

  }
  
  .avatar-group {
    position: absolute;
    top: -10px;
    left: 28px;
  }

  .due-date {
    position: absolute;
    top: -10px;
    right: 20px;
    text-align: center;
    overflow: hidden;
    padding: 0;
    width: 45px;
    background-color: #fff;
    /* box-shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .01698),.0335rem .067rem .402rem rgba(129, 145, 181, .024),.0625rem .125rem .75rem rgba(129, 145, 181, .03),.1125rem .225rem 1.35rem rgba(129, 145, 181, .036),.2085rem .417rem 2.502rem rgba(129, 145, 181, .04302),.5rem 1rem 6rem rgba(129, 145, 181, .06),0 0 0 .0625rem rgba(129, 145, 181, .015); */
    border-radius: 7px;
  }
  .due-date__month {
    line-height: 1.0em;
    text-transform: uppercase;
    font-size: 12px;
    background: #0d6efd;
    color: #fff;
    padding: 2px 0;
    border-radius: 7px 7px 0 0;
  }
  
  .due-date__day {
    font-size: 25px;
    line-height: 1.0em;
    border: 1px solid #ddd;
    border-top: 0;
    padding: 3px 0;
    border-radius: 0 0 7px 7px;
    font-weight: 100;
  }

  &.overdue .due-date__month {
    background: red;
  }
}

.with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.with-icon-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.field-with-icon {
  position: relative;

  svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #999;
  }
}

.dropdown {
  position: relative;
}

.dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 0);
  right: 0;
  width: 200px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 10px;

  &:after, &:before {
    bottom: 100%;
    right: 7px;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #fff;
    border-width: 5px;
    margin-left: -5px;
  }
  &:before {
    border-color: rgba(204, 204, 204, 0);
    border-bottom-color: #cccccc;
    border-width: 6px;
    margin-left: -6px;
  }
}

.dropdown:hover .dropdown__menu {
  display: block;
}

.pagination {
  text-align: center;
}

.counter {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
}

.high {
  border-color: blue;
}

.flash {
  position:fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);

  max-width: 100%;
  width: max-content;
  padding: 0 var(--space-m);

}
.flash__message {
  font-size: 14px;
  color: #fff;
  padding: 2px 10px;
  background-color: #333;
  animation: appear-then-fade 4s both;
  border-radius: 999px;

  & + & {
    margin-top: 10px;
  }
}

@keyframes appear-then-fade {
  0%, 100% {
    opacity:0
  }
  5%, 60% {
    opacity:1
  }
}

.actions {
  display: flex;
  gap: 10px;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.project-description {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  /* padding: 20px;
  box-shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .01698),.0335rem .067rem .402rem rgba(129, 145, 181, .024),.0625rem .125rem .75rem rgba(129, 145, 181, .03),.1125rem .225rem 1.35rem rgba(129, 145, 181, .036),.2085rem .417rem 2.502rem rgba(129, 145, 181, .04302),.5rem 1rem 6rem rgba(129, 145, 181, .06),0 0 0 .0625rem rgba(129, 145, 181, .015); */
}

.todos {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .01698),.0335rem .067rem .402rem rgba(129, 145, 181, .024),.0625rem .125rem .75rem rgba(129, 145, 181, .03),.1125rem .225rem 1.35rem rgba(129, 145, 181, .036),.2085rem .417rem 2.502rem rgba(129, 145, 181, .04302),.5rem 1rem 6rem rgba(129, 145, 181, .06),0 0 0 .0625rem rgba(129, 145, 181, .015);
  /* padding: 20px; */
  /* font-size: 15px; */

  ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 0;
  }

  li {
    display: flex;
    align-items: center;
    align-content: center;
    gap: 10px;
    padding: 10px 15px;

    /* border-radius: 10px; */
    border-bottom: 1px solid #eee;

    /* &:nth-child(odd) {
      background-color: #efefef50;
    } */

    &.in-progress {
      background-color: #fff;
      /* transform: translateX(20px); */
    }

    .button_to {
      margin-left: auto;
      display: flex;
    }
  }

  a {
    color: #333;
    text-decoration: none;
  }

  .new {
    padding: 10px 15px;
    display: flex;
    gap: 10px;
  }

}

.row {
  display: flex;
  gap: 30px;

  .col {
    flex: 1;
  }

  .col-9 {
    flex-basis: calc(100%/12 * 9);
  }
  
  .col-10 {
    flex-basis: calc(100%/12 * 10);
  }

  .col-3 {
    flex-basis: calc(100%/12 * 3);
  }

  .col-2 {
    flex-basis: calc(100%/12 * 2);
  }
}

.animate-in {
  h1 {
    animation: bounce 1s;
    transform-origin: center bottom;
    animation-fill-mode: both;
  }
}

.animate-out {
  animation: fade-out 0.25s ease-out;
}

.bounce {
  animation: bounce 1s;
  transform-origin: center bottom;
  animation-fill-mode: both;
}

@keyframes bounce {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

@keyframes fade-in {
  from { box-shadow: 0 0 §; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(4rem); }
  to { transform: translateX(0); }
}

@keyframes slide-out {
  from { transform: translateX(0); }
  to { transform: translateX(4rem); }
}


/* app/assets/application.css */
.modal-mask {
  position: fixed;
  z-index: 2;
  left: 0;
  right : 0;
  top: 0;
  bottom: 0;
  background: #ffffff99;
  /* backdrop-filter: blur(4px); */
}
.modal-content {
  position: fixed;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  word-break: break-word;
  border-radius: 6px;
  background: #fff;
  padding: 20px;
  box-shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .01698),.0335rem .067rem .402rem rgba(129, 145, 181, .024),.0625rem .125rem .75rem rgba(129, 145, 181, .03),.1125rem .225rem 1.35rem rgba(129, 145, 181, .036),.2085rem .417rem 2.502rem rgba(129, 145, 181, .04302),.5rem 1rem 6rem rgba(129, 145, 181, .06),0 0 0 .0625rem rgba(129, 145, 181, .015);
}
.modal-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  /* margin-bottom: 15px; */
}

.tag-filter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-wrap: wrap;
}

.tag-filter-item {
  /* display: block; */
  /* display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  background-color: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer; */
  color: #666;
  text-decoration: none;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
}

.tag-filter-item:hover {
  /* background-color: #e9ecef;
  border-color: #adb5bd; */
}

.tag-filter-item.active {
  /* background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd; */
  color: #999;
  text-decoration: none;
}

.tag-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 5px;
}

.tag-checkboxes .checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tag-checkboxes .checkbox-item input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.tag-checkboxes .checkbox-item label {
  margin: 0;
  cursor: pointer;
  font-size: 16px;
}

.tag {
  font-size: 15px;
  /* display: inline-flex;
  padding: 0 8px;
  border: 1px solid #0d6efd;
  border-radius: 15px; */
  /* color: #ccc; */
  /* padding: 2px 8px; */
  /* border-radius: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: #fff;
  border: 1px solid #ddd; */
}

.tag-danger {
  color: lightcoral;
}

.rich-text {
  a {
    color: #0d6efd;
  }
}

.activeDropzone ul {
  border: 2px dashed #0d6efd;
}

.activeItem, .dropTarget {
  background-color: #e7f1ff;
  /* border: 2px dashed #0d6efd; */
}

.calendar {
  display: flex;
  gap: 20px;
}

.calendar__day {
  flex: 1;
  /* background: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .01698),.0335rem .067rem .402rem rgba(129, 145, 181, .024),.0625rem .125rem .75rem rgba(129, 145, 181, .03),.1125rem .225rem 1.35rem rgba(129, 145, 181, .036),.2085rem .417rem 2.502rem rgba(129, 145, 181, .04302),.5rem 1rem 6rem rgba(129, 145, 181, .06),0 0 0 .0625rem rgba(129, 145, 181, .015); */
  border-top: 2px solid transparent;
  padding-top: 10px;
}

.calendar__day--today {
  /* border-color: #0d6efd; */
  /* background: #efefef; */
}

.calendar__day--today small {
  color : #0d6efd;
}

/* Todo Lock Indicator */
.locked-indicator {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  opacity: 0.7;
  cursor: help;
  margin-left: 4px;
}

.todo-name.locked {
  color: #999;
  opacity: 0.7;
  cursor: not-allowed;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* AI Suggestions */
.hidden {
  display: none !important;
}