/* Horreo's own styles, on top of Pico CSS. Pico is styled through its variables wherever it can
   be; rules of their own are kept for what Pico has no variable or component for. */

/* Pico grows the font up to 131% on wide screens; an application with tables and forms reads
   better at the size of the browser. Being later and as specific, this wins over Pico's
   breakpoints. */
:root {
  --pico-font-size: 100%;
}

/* The forms in the navigation bar, such as the one that signs out, are inline, and their buttons
   as small as its links. Pico gives every submit button a margin below, as the end of a form,
   with [type="submit"], which this selector has to outweigh. */
nav form {
  margin: 0;
}

nav form [type="submit"] {
  margin: 0;
  padding: 0.375rem 0.75rem;
}

/* Messages that the user must notice, such as why sign-in failed. */
[role="alert"] {
  padding: var(--pico-spacing);
  border-left: 0.25rem solid var(--pico-del-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color);
  color: var(--pico-del-color);
}

/* Pages that only tell something, such as that the user has no organization, and pages of a
   single form: a card, narrower than the page. */
.notice {
  max-width: 36rem;
  margin: 5vh auto 0;
}

/* What a list shows when it has nothing, in place of the list and of its actions: a notice with
   the action to add the first item, centered. */
.notice.empty {
  text-align: center;
}

.form-page {
  max-width: 36rem;
  margin: 0 auto;
}

.form-page .grid {
  margin-top: var(--pico-spacing);
}

/* The buttons that end a form, side by side, are as tall as each other: Pico's margin below
   submit buttons would make the grid stretch the others to it. */
.form-page .grid [type="submit"] {
  margin-bottom: 0;
}

/* The brand, Horreo's icon, which leads home. The icon draws itself dark or light, as the
   browser's color scheme, which is the one Pico follows. */
nav .brand {
  display: inline-flex;
  padding-top: 0;
  padding-bottom: 0;
}

nav .brand img {
  display: block;
  height: 2.5rem;
  width: auto;
}

.organization-switcher li.separated {
  border-top: 1px solid var(--pico-muted-border-color);
}

/* The organization switcher is the second part of the brand, and its menu lists the
   organizations; the one the page is in is marked. */
.organization-switcher summary {
  font-weight: 600;
}

.organization-switcher [aria-current="page"] {
  font-weight: 600;
  color: var(--pico-primary);
}

/* The sections of the organization the page is in, under the main navigation; the one the page
   is in is marked. */
nav.sections {
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: var(--pico-spacing);
}

nav.sections a {
  color: var(--pico-muted-color);
}

nav.sections a[aria-current="page"] {
  font-weight: 600;
  color: var(--pico-primary);
}

/* The link to the settings of the organization, an icon beside its switcher, muted unless the
   page is the settings. */
nav .settings-link {
  display: inline-flex;
  align-items: center;
  color: var(--pico-muted-color);
}

nav .settings-link:hover,
nav .settings-link[aria-current="page"] {
  color: var(--pico-primary);
}

nav .settings-link svg {
  vertical-align: middle;
}

/* The help of a group of fields, below them, as muted as that of a field. */
fieldset > small {
  display: block;
  margin-top: calc(var(--pico-spacing) * -0.5);
  margin-bottom: var(--pico-spacing);
  color: var(--pico-muted-color);
}

/* The heading of a page, with the action that the page leads to beside it. */
.page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pico-spacing);
  margin-bottom: var(--pico-spacing);
}

.page-heading hgroup {
  margin-bottom: 0;
}

.page-heading .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pico-spacing) / 2);
}

/* Pico gives buttons a margin below, as the end of a form, which would make the actions beside
   them taller than they are. */
.page-heading .actions button {
  margin-bottom: 0;
}

/* The catalog of materials: the tree of categories beside the materials of the one selected,
   and above them on narrow screens. */
.catalog {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: calc(var(--pico-spacing) * 2);
  align-items: start;
}

@media (max-width: 768px) {
  .catalog {
    grid-template-columns: minmax(0, 1fr);
  }
}

.categories nav ul {
  display: block;
  margin: 0;
  padding: 0;
}

.categories nav ul ul {
  padding-left: var(--pico-spacing);
}

.categories nav li {
  display: block;
  padding: 0;
  list-style: none;
}

.categories nav a {
  display: block;
  margin: 0;
  padding: 0.25rem 0.5rem;
  border-radius: var(--pico-border-radius);
  color: var(--pico-muted-color);
  text-decoration: none;
}

.categories nav a:hover {
  color: var(--pico-color);
}

.categories nav a[aria-current="page"] {
  background: var(--pico-secondary-background);
  color: var(--pico-secondary-inverse);
  font-weight: 600;
}

.categories [role="button"] {
  width: 100%;
  margin-top: var(--pico-spacing);
}

.filters {
  font-size: 0.875em;
  text-align: right;
}

/* Quantities line up on the right, so that their digits do. */
th.number,
td.number {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.on-hand strong {
  font-size: 1.25em;
}

/* Obsolete materials, shown only when asked for, are muted. */
tr.obsolete td {
  color: var(--pico-muted-color);
}

/* Forms of a single button, beside others or in a table, as marking a purchase as ordered. */
form.inline {
  display: inline-block;
  margin: 0;
}

form.inline button {
  margin: 0;
}

/* Buttons that look like links, as removing a line of a table. */
button.link {
  padding: 0;
  border: none;
  background: none;
  color: var(--pico-primary);
  text-decoration: underline;
  font-size: inherit;
}

button.link.remove {
  color: var(--pico-del-color);
}

/* The actions of a row, as changing the role of a member and removing them: on one line, apart. */
td.row-actions {
  white-space: nowrap;
  text-align: right;
}

td.row-actions form.inline + form.inline,
td.row-actions [role="button"] + form.inline {
  margin-left: var(--pico-spacing);
}

/* What is pending in the overview: what it is, with how many, and each linked beside it. */
table.pending th {
  width: 14rem;
  white-space: nowrap;
  vertical-align: top;
}

/* The buttons that buy what is low, from each supplier, in a row. */
.buys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pico-spacing);
  align-items: center;
  margin-top: var(--pico-spacing);
}

/* The period of the reports of the overview, as a button in its heading, with its choices
   below it, on the right; the one chosen is marked. */
.period-picker {
  margin-bottom: 0;
}

.period-picker summary {
  margin-bottom: 0;
}

.period-picker [aria-current] {
  font-weight: 600;
}

/* A bar of a table, as the revenue of a month, as long as its share of the longest. */
th.bar-column,
td.bar-column {
  width: 30%;
}

.bar {
  display: inline-block;
  height: 0.75rem;
  border-radius: 0.25rem;
  background: var(--pico-primary-background);
  vertical-align: middle;
}

/* The preferred offer of a material, in the color of the application. */
.tag.preferred {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

/* The role of an administrator, in the color of the application. */
.tag.role-admin {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

.muted {
  color: var(--pico-muted-color);
}

/* The totals of a purchase, a narrow table of amounts. */
table.totals {
  width: auto;
  min-width: 20rem;
}

table.totals tr.total th,
table.totals tr.total td {
  font-weight: 600;
}

/* Tags in a heading, as the status of a purchase beside its name, are as small as elsewhere. */
h1 .tag {
  font-size: 0.875rem;
  font-weight: 500;
  vertical-align: middle;
}

/* Whether a material is bought or made: a small icon in a circle, quieter than its tags. */
.kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--pico-muted-color);
  vertical-align: middle;
}

.kind svg {
  width: 1.05em;
  height: 1.05em;
}

/* In the catalog, the icons go on the right of the cell of the name, so that they line up from
   one material to the next. */
.with-kind {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--pico-spacing) / 2);
}

.with-kind .kinds {
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.25rem;
}

/* The statuses of purchases. */
.tag.status-received {
  background: var(--pico-ins-color);
  color: var(--pico-primary-inverse);
}

.tag.status-cancelled {
  background: var(--pico-del-color);
  color: var(--pico-primary-inverse);
}

/* The statuses of manufacturing orders: done as a purchase received, and in progress in the
   color of the application, as what is being worked on. */
.tag.status-done {
  background: var(--pico-ins-color);
  color: var(--pico-primary-inverse);
}

.tag.status-in_progress {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

/* The statuses of sales: delivered as a purchase received, lost and returned as cancelled,
   since they went wrong, and those on the way in the color of the application. */
.tag.status-delivered {
  background: var(--pico-ins-color);
  color: var(--pico-primary-inverse);
}

/* The payment of a sale, a tag of its own beside its status: unpaid in grey, outlined so that it
   is not taken for a status, and paid in a color of each method, always the same, so that a list
   of sales tells them apart at a glance. */
.tag.unpaid {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--pico-secondary-background);
  color: var(--pico-secondary);
}

.tag.paid {
  color: #fff;
}

.tag.paid-transfer { background: #3d6fd6; }
.tag.paid-bizum { background: #0b9c9c; }
.tag.paid-card { background: #7c4fd6; }
.tag.paid-paypal { background: #1f4a8f; }
.tag.paid-cash { background: #2f9a55; }
.tag.paid-other { background: #8a6a3a; }

.tag.status-lost,
.tag.status-returned {
  background: var(--pico-del-color);
  color: var(--pico-primary-inverse);
}

.tag.status-confirmed,
.tag.status-preparing,
.tag.status-shipped {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

/* The steps of the life of a sale, back and forward, with their arrows beside their names. */
button.step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* The notice of a returned sale, with the button that puts it back in stock beside it. */
.warning.restock {
  display: flex;
  gap: var(--pico-spacing);
  align-items: center;
  justify-content: space-between;
}

.warning.restock p {
  margin-bottom: 0;
}

/* What should be noticed but stops nothing, as the stock short of what an order takes: as an
   alert, in amber. */
.warning {
  padding: var(--pico-spacing);
  border-left: 0.25rem solid #d9a404;
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color);
}

.tag.short,
.tag.low {
  background: #d9a404;
  color: #1c1c1c;
}

/* The updates of a manufacturing order, oldest first, on a line. */
ol.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

ol.timeline li {
  position: relative;
  margin: 0;
  padding: 0 0 calc(var(--pico-spacing) * 0.75) 1.25rem;
  border-left: 2px solid var(--pico-muted-border-color);
  list-style: none;
}

ol.timeline li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: calc(-0.3rem - 1px);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--pico-primary);
}

ol.timeline li:last-child {
  border-left-color: transparent;
}

ol.timeline p {
  margin-bottom: 0.25rem;
}

.form-page.wide {
  max-width: 48rem;
}

/* Buttons that remove something, outlined in the color of deletions. */
button.remove {
  border-color: var(--pico-del-color);
  color: var(--pico-del-color);
}

/* Tags, as small labels. */
.tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  background: var(--pico-secondary-background);
  color: var(--pico-secondary-inverse);
  font-size: 0.8125em;
  white-space: nowrap;
}

/* The login page: a card centered in the page. */
.login {
  max-width: 24rem;
  margin: 10vh auto 0;
  text-align: center;
}

.login [role="button"] {
  width: 100%;
}

/* Buttons that are an icon, as the pencil that edits what a page shows: square, about as tall as
   the others, with the icon centered. */
[role="button"].icon,
button.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--pico-form-element-spacing-vertical) * 0.9);
  line-height: 1;
}

/* Icons within a line of text, as the pencil beside the reference of a purchase: as tall as the
   text. */
.inline-icon svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* Notes, as those of a bill of materials, keep the lines they were written in. */
.notes {
  white-space: pre-line;
}

/* The sections of a page that hold a list of their own, as the components of a bill of materials:
   cards apart from what the page tells above them, with their heading, and the button that opens
   their form, in the card's header. Within the card, tables are of its color, not of the page's. */
article.section {
  margin-top: calc(var(--pico-spacing) * 2);
  --pico-background-color: var(--pico-card-background-color);
}

article.section table {
  margin-bottom: 0;
}

/* What a section shows when it has nothing, with the action to add the first, centered. */
article.section .empty {
  text-align: center;
}

/* The heading of a section, with the button that opens its form beside it, on the right. */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pico-spacing);
  margin-bottom: var(--pico-spacing);
}

.section-heading hgroup,
.section-heading h2 {
  margin-bottom: 0;
}

/* The buttons that end a form in a dialog: on its right, cancelling first. */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--pico-spacing) / 2);
}

.form-actions > * {
  width: auto;
  margin-bottom: 0;
}

/* What is hidden stays hidden, even where Pico gives it a display of its own. */
[hidden] {
  display: none !important;
}

/* The place of an icon that a material has not, in a list. */
.kind.none {
  visibility: hidden;
}

/* Icon buttons in the rows of a table, as adjusting a lot: smaller, so that rows keep their
   height. */
[role="button"].icon.small,
button.icon.small {
  padding: 0.25rem;
}

[role="button"].icon.small svg,
button.icon.small svg {
  width: 1rem;
  height: 1rem;
}

/* Buttons that remove something for good, as cancelling a sale, filled in the color of
   deletions. */
button.danger {
  border-color: var(--pico-del-color);
  background: var(--pico-del-color);
  color: #fff;
}

/* Dialogs over the page, which every form that a button opens is in: wide enough for a row of
   fields, a title of their own size, and the actions of their form apart from it. */
dialog > article {
  width: min(40rem, 100%);
}

dialog > article h2 {
  margin-bottom: calc(var(--pico-spacing) / 2);
  font-size: 1.25rem;
}

dialog .form-actions {
  margin-top: var(--pico-spacing);
}

dialog .form-actions > * {
  width: auto;
  margin-bottom: 0;
}

/* The long forms, which are pages of their own rendered into dialogs: as wide as their pages
   would be, with a title of the size of those of dialogs. */
dialog.page-form > article.form-page {
  width: min(40rem, 100%);
  max-width: 100%;
  margin: 0;
}

dialog.page-form > article.form-page.wide {
  width: min(48rem, 100%);
}

dialog.page-form h1 {
  margin-bottom: calc(var(--pico-spacing) / 2);
  font-size: 1.25rem;
}

/* The filters of a list, as its sales: a row of dropdowns and a search, which apply as they
   change, each marked in the color of the application while it filters. */
form.list-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--pico-spacing);
  margin-bottom: 0;
}

form.list-filters label {
  margin-bottom: 0;
  color: var(--pico-muted-color);
  font-size: 0.875em;
}

form.list-filters select,
form.list-filters input {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

form.list-filters .set {
  border-color: var(--pico-primary-border);
  color: var(--pico-primary);
}

/* What a list filtered comes to, and the way back to all of it. */
.filter-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pico-spacing);
  margin: var(--pico-spacing) 0 calc(var(--pico-spacing) / 2);
}

.filter-summary .owed {
  color: #d9a404;
}