/*
 * 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.
 */
header {
  margin-bottom: 10px;
  nav {
    a:link,
    a:visited {
      &.on {
        color: black;
      }
    }
    a:hover,
    a:active {
      text-decoration: none;
      color: blue;
    }
  }
  h3 {
    margin: 0;
  }
}
h3 small {
  font-size: 65%;
}
.btn-link {
  background: none;
  margin: 0;
  padding: 0;
  &.delete {
    color: red;
  }
}

.lh1 {
  line-height: 1;
}

a.action:hover,
a.action:active {
  text-decoration: none;
  color: palegoldenrod;
}
table tr {
  td,
  th {
    &:last-child {
      text-align: right;
    }
  }
}

table#receipts {
  td,
  th {
    font-size: 14px;
  }
}

form.in_place {
  margin-top: 10px;
  input,
  select {
    padding: 2px;
    border: 1px solid aqua;
    width: 60%;
  }
  button {
    background: none;
    padding: 0;
  }
  div {
    margin-top: 5px;
  }
}

td.group-heading {
  text-align: center !important;
}

section.item-category {
  display: grid;
  grid-template-columns: 0.75fr 100px 1fr;
  gap: 10px;
}
div#receipt-items {
  form {
    font-size: 11px;
    input,
    select {
      padding: 2px;
    }
    button {
      background: none;
      padding: 0;
    }
    label[for="item_receipt_id"],
    select#item_receipt_id {
      display: none;
    }
  }
}
button.plain {
  background: none;
  padding: 4px;
}

::backdrop {
  backdrop-filter: blur(3px);
}