/*----------------------------------------------------------------------------*/
/* Core application */

/* Colors */

:root {
    --main: #bea172; /* Sterling palette: Auric */
    --main-dark: #857150; /* color-mix(in srgb, var(--main), black 30%); */
    --main-light: #e4dfd7; /* color-mix(in srgb, var(--main), white 80%); */
    --main-extra-light: #f9f6f1; /* color-mix(in srgb, var(--main), white 90%); */

    --alert: #c00;
    --success: #060;
    --warn: #fcc;
    --highlight: #ffc;
    --info: #def;
    --item-price-changed: #090;
    --wait: #f90;
}

/*----------------------------------------------------------------------------*/
/* Input fields */

input,
textarea,
select {
    font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 13px; /* For Firefox */
}

input[type="text"],
input[type="date"],
input[type="password"],
textarea {
    padding: 4px 8px;
    border: 1px solid var(--main-dark);
    border-radius: 4px;
    background-color: var(--white);
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
    background-color: var(--highlight);
}

textarea.resizeable { /* Resizeable 1-row text field */
    width: 600px;
    max-width: 600px;
    max-height: 300px;
    field-sizing: content;
}

input[type="button"],
input[type="file"]::file-selector-button,
button,
a.button {
    padding: 4px 12px;
    margin: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--main), white 40%);
    border-radius: 4px;
    background-color: var(--main-dark);
    color: var(--white) !important;
    text-decoration: none;
}

input[type="button"]:hover,
input[type="file"]::file-selector-button:hover,
button:hover,
a.button:hover {
    background-color: var(--main-light);
    color: var(--dark-grey) !important;
    cursor: pointer;
}

input[type="radio"],
input[type="checkbox"] {
    margin-right: 6px;
}

input:disabled {
    background-color: var(--white);
    cursor: default;
}

input[readonly], textarea[readonly] {
    background-color: var(--light-grey);
    cursor: not-allowed;
}

select {
    padding: 4px 8px;
    margin: 2px 6px 2px 0;
    border: 1px solid var(--main-dark);
    border-radius: 4px;
    background-color: var(--white);
}

select option {
    background-color: var(--white);
}

select:focus {
    background-color: var(--highlight);
}

optgroup {
    background-color: var(--white);
}

/*----------------------------------------------------------------------------*/
/* Text */

.alert {
    color: var(--alert) !important;
}

.highlight {
    background-color: var(--highlight);
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.small {
    font-size: 80%;
}

.success {
    color: var(--success) !important;
}

button.success {
    background-color: var(--success) !important;
    color: var(--white) !important;
}

.tinybox {
    border: 1px solid;
    border-radius: 3px;
    padding: 2px;
    font-size: 67%;
    text-decoration: none;
}

/*----------------------------------------------------------------------------*/
/* Page "tabs" (old third-level navigation) */

.tabs button {
    padding: 4px 12px;
    margin: 0 6px -1px 6px;
    border: 1px solid var(--main);
    border-radius: 4px 4px 0 0;
    background-color: var(--main-light);
    color: var(--dark-grey) !important;
}

.tabs button:hover {
    background-color: var(--main);
    color: var(--white) !important;
    cursor: pointer;
}

.tabs button.active {
    background-color: var(--white);
    border-bottom: 1px solid var(--white);
    font-weight: bold;
    color: var(--dark-grey) !important;
}

/*----------------------------------------------------------------------------*/
/* Pricelist */

.pl_westgate { font-weight: bold; color: #f00; }
.pl_er { font-weight: bold; color: #90e; }
.pl_inspirato { font-weight: bold; color: #e90; }
.pl_gulfstream { font-weight: bold; color: #66f; }

#customer_picker
{
    width: 400px;
}

/*----------------------------------------------------------------------------*/
/* Messaging */

.message {
    border: 1px solid #000;
    border-radius: 6px;
    padding: 1em;
    margin-bottom: 0.5em;
    background-color: var(--highlight);
}

div.emptybox
{
    border: 1px solid var(--main-dark);
    border-radius: 6px;
    padding: 1em;
    margin: 0.5em 0;
    line-height: 1.5;
}

div.infobox
{
    background-color: var(--main-light);
    border: 1px solid var(--main-dark);
    border-radius: 6px;
    padding: 1em;
    margin: 0.5em 0;
    line-height: 1.5;
}

div.messagebox
{
    padding: 1em 1em 1em 32px;
    border: 1px solid color-mix(in srgb, var(--info), blue 30%);
    border-radius: 6px;
    margin: 0.5em 0;
    background: url('/images/icon-info.png') var(--info) no-repeat left 6px center;
}

div.emptybox:empty, div.infobox:empty, div.messagebox:empty {
    display: none;
}

div.warningbox
{
    padding: 1em 1em 1em 32px;
    border: 1px solid color-mix(in srgb, var(--warn), red 30%);
    border-radius: 6px;
    margin: 0.5em 0;
    background: url('/images/icon-warn.png') var(--warn) no-repeat left 6px center;
}

#process_results {
    font-family: monospace;
    white-space: pre-wrap;
    padding: 1em;
    margin-top: 1em;
    border: 1px solid var(--main-dark);
    border-radius: 6px;
}

#process_results:empty {
    display: none;
}

#search_results div.messagebox .button {
    float: right;
    margin-left: 1em;
}

/*----------------------------------------------------------------------------*/
/* Customers */

.addressbox {
    border: 1px solid var(--dark-grey);
    border-radius: 6px;
    padding: 1em;
    margin: 0.5em 0;
}

.hoverhighlight:hover {
    background-color: var(--highlight);
}

/*----------------------------------------------------------------------------*/
/* Popdown */

.popdown
{
    background-color: var(--main-extra-light);
    border: 1px solid var(--main);
    border-radius: 6px;
    padding: 1em;
}

/*----------------------------------------------------------------------------*/
/* Tables */

table {
    border-spacing: 0;
    border-radius: 6px;
    width: 100%;
}

th, td {
    padding: 6px 4px;
    font-size: 13px;
}

.datatable {
    border: 1px solid var(--main);
    border-spacing: 0;
    border-collapse: separate;
    padding: 0;
}

.datatable tr:first-child th:first-child,
.datatable tr:first-child td:first-child { /* Handle top left corner */
    border-radius: 6px 0 0 0;
}

.datatable tr:first-child th:last-child,
.datatable tr:first-child td:last-child { /* Handle top right corner */
    border-radius: 0 6px 0 0;
}

.datatable tr:last-child tfoot:first-child,
.datatable tr:last-child td:first-child { /* Handle bottom left corner */
    border-radius: 0 0 0 6px;
}

.datatable tr:last-child tfoot:last-child,
.datatable tr:last-child td:last-child { /* Handle bottom right corner */
    border-radius: 0 0 6px 0;
}

.datafooter td:first-child,
.datafooter td:last-child { /* No rounded corner on footer row */
    border-radius: 0 !important;
}

.dataheader, .dataheader a {
    background-color: var(--main) !important;
    color: var(--white);
    font-weight: bold;
    text-align: left;
}

.datatable tr:nth-child(even) {
    background-color: var(--main-extra-light);
}

.datatable tr:nth-child(odd) {
    background-color: var(--white);
}

.datatable td.hl { /* Highlight a cell */
    background-color: var(--highlight) !important;
}

.datasection td {
    background-color: var(--main);
    color: var(--white);
    font-weight: bold;
    font-size: 1.2em;
}

.datafooter {
    background-color: var(--main) !important;
    text-align: center;
}

.count { /* Search result count at top of results table */
    font-size: 80%;
    margin: 0.5rem 0;
}

/*----------------------------------------------------------------------------*/
/* Images */

.itemphoto, #search_results img { /* Various item photos */
    border: 1px solid var(--main-dark);
    border-radius: 6px;
}

/*----------------------------------------------------------------------------*/
/* Popover support */

:popover-open {
    border: 1px solid var(--navy);
    border-radius: 6px;
    background-color: var(--white);
    padding: 1em;
    max-width: 80%;
    max-height: 80%;
    top: 40%;
    left: 10%;
    overflow: auto; /* Add scrolling if necessary */
}

/*----------------------------------------------------------------------------*/
/* jQuery UI and jQuery MultiSelect */

.ui-widget {
    font-family: "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.ui-widget-header {
    background-color: var(--main-light);
    border: 1px solid var(--main-dark);
}

.ui-multiselect {
    padding: 4px 8px;
    margin: 2px 6px 2px 0;
    border: 1px solid var(--main-dark);
    border-radius: 4px;
    background-color: var(--white);
    color: var(--deep-grey) !important;
    width: 160px !important;
}

.ui-multiselect-checkboxes li:not(.ui-multiselect-optgroup) {
    font-size: 1em;
}

/*----------------------------------------------------------------------------*/
/* Select2 */

.select2-container {
    border-radius: 4px;
}

.select2-search__field {
    background-color: var(--highlight);
}

/*----------------------------------------------------------------------------*/
/* Miscellaneous */

#itemlist img { /* Item photos in lists (like search results) */
    border: 1px solid var(--dark-grey);
    border-radius: 4px;
    max-width: 33px;
}

.itemphoto { /* Item photos (of any size) */
    border: 1px solid var(--dark-grey);
    border-radius: 4px;
}

.sc { /* Item stock code indicator */
    border: 1px solid;
    border-radius: 4px;
    padding: 1px 3px;
    font-weight: bold;
    font-size: 80%;
}

.sourced { /* Sourced item indicator */
    border: 1px solid var(--deep-grey);
    border-radius: 4px;
    background-color: var(--deep-grey);
    color: var(--white);
    padding: 1px 3px;
    font-weight: bold;
    font-size: 80%;
}

.sourced.discontinued { /* Discontinued sourced items */
    border-color: var(--alert);
    background-color: var(--alert);
}

.wait { /* Message to wait (e.g., during an import) */
    padding: 4px 12px;
    border: 1px solid var(--submenu);
    border-radius: 6px;
    margin: 0.5em 0;
    background: var(--submenu-item);
    color: var(--white);
}

.wait::before {
    font-family: "bootstrap-icons";
    content: "\F293"; /* bi-clock */
    margin-right: 6px;
}