/*
 * 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.
 */
@import url("/assets/purecss/build/pure-bf5603cd.css");
@import url("/assets/purecss/build/grids-responsive-4f617ad4.css");

@import url("/assets/rails-messages-32e9028a.css");
@import url("/assets/div-tables-ab26990e.css");

/* The menu stays put at the top of the window while the page scrolls under it, so moving between
   screens never means scrolling back up first. It sits above the transaction list's own sticky column
   headings, which pass underneath it. */
nav {
    position: sticky;
    top: 0;
    z-index: 10;

    .pure-menu {
        background-color: #333; /* Dark background color */
    }

    .pure-menu .pure-menu-link {
        color: #fff; /* White text color */
    }

    .pure-menu .pure-menu-link:hover {
        color: #000; /* Light gray text color on hover */
    }

    .pure-menu-selected .pure-menu-link {
        background-color: #000;
    }

    /* Your own login sits at the far end, apart from the five screens the application is about.  The
       flex is what makes that possible at all: Pure lays horizontal menu items out as inline-block, and
       margin-left: auto does nothing to one of those. */
    .pure-menu-list {
        display: flex;
    }

    .pure-menu-item.nav-end {
        margin-left: auto;
    }
}

body div.container {
    margin-left: 2rem;
    margin-right: 2rem;
}

.form-buttons {
    margin-top: 20px; /* Add space above the buttons */
}

/* Every screen that is not a top-level destination opens with one of these strips, so the way back is
   always in the same place and the reader does not have to look for it under the data — or, on a form with
   a list beneath it, off the bottom of the page.  Two class names because the strips hold different things:
   Back, Edit and Destroy on a Show screen, Back and Show on a form.  They are laid out identically. */
.show-actions,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    /* Space above as well as below: on a screen with no heading of its own the strip is the first thing
       under the sticky menu bar, and would otherwise touch it. */
    margin: 1em 0;
}

/* button_to wraps its button in a form, which is what has to be pushed to the far end of the strip.
   Destroy is kept away from Edit deliberately: it is the one action on the strip that cannot be undone. */
.show-actions form.show-actions-destroy {
    margin-left: auto;
}

/* Pure ships only the primary variant, so the error one that every delete button in the app already asks
   for has to be defined here — without it they are ordinary grey buttons, and the transaction rows, the
   rules list and Destroy above all read as though nothing were at stake. */
.pure-button-error,
a.pure-button-error {
    background-color: #ca3c3c;
    color: #fff;
}

.pure-g {
    margin-top: 1em; /* Adjust the value as needed */
    margin-bottom: 1em; /* Adjust the value as needed */
}

.account-grid .account-field {
    display: flex;
    gap: 0.5em;
    /* border-box, or the gutter is added to the grid unit's width and a column no longer fits. */
    box-sizing: border-box;
    padding-right: 2em;
    margin-bottom: 0.5em;
}

/* A fixed label width keeps the values aligned down each column of the grid. */
.account-grid .account-field-label {
    flex: 0 0 9.5em;
}

.credit-sign-container {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    label {
        display: inline-block !important;
        width: min-content !important;
    }
}

td.currency {
    text-align: right;
}

td.positive {
    color: #3ad210;
}

td.negative {
    color: #ee0000;
}

/* The enrolment QR.  Capped rather than left at its natural size: the SVG has a viewBox and no
   dimensions, so it would otherwise grow to fill the width of the page. */
.qr-code svg {
    width: 12em;
    height: 12em;
}

/* Pure spaces the fields of a stacked form but not the buttons beneath them: `.pure-controls` is given a
   margin only under `.pure-form-aligned`, so in a stacked form the submit button sits hard against the last
   field.  The same 1.5em the aligned forms get, so the two read alike.

   A stacked form is what a narrow column wants — the CSV analyser panel is a third of the width, where an
   aligned form's ten-em label and eleven-em button indent have nowhere to go. */
.pure-form-stacked .pure-controls {
    margin-top: 1.5em;
}