@font-face {
    font-family: InterVariable;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('inter-4.1/InterVariable.woff2') format('woff2');
}

@font-face {
    font-family: InterVariable;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('inter-4.1/InterVariable-Italic.woff2') format('woff2');
}

/* static fonts */
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("inter-4.1/Inter-Thin.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url("inter-4.1/Inter-ThinItalic.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("inter-4.1/Inter-ExtraLight.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url("inter-4.1/Inter-ExtraLightItalic.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("inter-4.1/Inter-Light.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("inter-4.1/Inter-LightItalic.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("inter-4.1/Inter-Regular.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("inter-4.1/Inter-Italic.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("inter-4.1/Inter-Medium.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("inter-4.1/Inter-MediumItalic.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("inter-4.1/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("inter-4.1/Inter-SemiBoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("inter-4.1/Inter-Bold.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("inter-4.1/Inter-BoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("inter-4.1/Inter-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("inter-4.1/Inter-ExtraBoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("inter-4.1/Inter-Black.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("inter-4.1/Inter-BlackItalic.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-Thin.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-ThinItalic.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-ExtraLight.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-ExtraLightItalic.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-Light.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-LightItalic.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-Regular.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-Italic.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-Medium.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-MediumItalic.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-SemiBoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-Bold.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-BoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-ExtraBoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-Black.woff2") format("woff2");
}

@font-face {
    font-family: InterDisplay;
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("inter-4.1/InterDisplay-BlackItalic.woff2") format("woff2");
}

@font-face {
    font-family: 'remixicon';
    font-display: swap;
    src: url('remixicon-4.6.woff2') format("woff2");
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    --color--base: #ffffff;
    --color--contrast: #585d63;
    --color--accent-1: #4ad169;
    --color--accent-2: #2377fc;
    --color--accent-3: #ff5200;
    --color--accent-4: #c392ea;
    --color--blue: #8dc3cc;
    --color--blue--light: #c7ebea;
    --color--orange: #d9c07e;
    --color--orange--light: #fdf2d3;
    --color--gray--light: #e6e6e8;
    --color--accent-1--light: #4ad16922;
    --border-radius: .375rem;
    --logo-height: 142px;
}

html, body, iframe {
    block-size: 100%;
    margin: 0;
}

body {
    font-family: Inter, sans-serif;
    background-color: var(--color--base);
    color: var(--color--contrast);
}

h1, h2, h3, h4, h5, h6 {
    font-family: InterDisplay, sans-serif;
}

.essential #pharmacy-total .kpi h4,
h3 {
    display: block;
    font-size: 1.17em;
    font-weight: bold;
}

@supports (font-variation-settings: normal) {
    body, h1, h2, h3, h4, h5, h6 {
        font-family: InterVariable, sans-serif;
    }
}

thead th button,
:any-link {
    color: var(--color--accent-1);
    text-decoration: underline;
}

[x-cloak] {
    display: none !important;
}

table[data-chart-options],
.sr-only {
    position: absolute !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(1px 1px 1px 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
}

#viewport {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
}

#viewport > header {
    text-align: center;
    position: relative;
    overflow: hidden;
}

#viewport > header, #viewport > div {
    max-width: 15rem;
    background-color: #f5f6f8;
}

#viewport > header, #viewport > header h1, #viewport > div, #viewport > div [class^="icon-"] span {
    transition: all .5s ease;
}

#viewport > div {
    overflow-x: hidden;
    justify-content: space-between;
    padding: 0 .75rem .75rem 1.5rem;
}

#main-categories [id^="sub-category-"]::before,
[class^="icon-"]::before,
label[for="fold-sidebar"]::after {
    /*noinspection CssNoGenericFontName*/
    font-family: 'remixicon';
    font-style: normal;
    font-size: 1.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: inherit;
    margin-inline-end: .5ch;
}

label[for="fold-sidebar"]::after {
    position: absolute;
    inset-block-start: .5ch;
    inset-inline-end: .5ch;
    content: '\f45c';
}

#fold-sidebar:checked ~ header label[for="fold-sidebar"]::after {
    content: '\f45e';
}

label:has(input[type=radio]),
label[for="fold-sidebar"]::after,
button,
select,
#snackbar [role="alert"],
#viewport > div summary {
    cursor: pointer;
}

#fold-sidebar:checked ~ header:not(:has(+ div:hover)),
#fold-sidebar:checked ~ div:not(:hover) {
    max-width: 3.75rem;
}

@media (min-width: 48.01em) {
    #fold-sidebar:checked ~ div:not(:hover) {
        padding-inline-start: .75rem;
    }

    #fold-sidebar:checked ~ div:not(:hover) summary::after,
    #fold-sidebar:checked ~ div:not(:hover) [class^="icon-"] span {
        opacity: 0;
    }

    #fold-sidebar:checked ~ div:not(:hover) ul ul {
        padding-inline-start: 0;
    }

    #fold-sidebar:checked ~ header:not(:has(+ div:hover)) h1::before {
        width: 60px;
        background-image: url('logo-no-text.svg');
    }
}

#viewport > #fold-sidebar:checked ~ div:not(:hover) [class^="icon-"] {
    max-inline-size: 100%;
}

.table-scroll,
#viewport > div > nav {
    overflow-x: auto;
}

nav ul ul {
    padding-inline-start: .75rem;
}

.tabs :any-link,
nav :any-link {
    text-decoration: none;
    color: inherit;
}

.tabs li[aria-current],
nav [aria-current] :any-link {
    background-color: #e7eaef;
}

.tabs li:hover,
nav :any-link:hover, nav summary:hover {
    background-color: #ededf7;
}

nav :any-link, [class^="icon-"]::before, [class^="icon-"] span {
    display: inline-block;
    vertical-align: middle;
}

#viewport > div [class^="icon-"] {
    text-align: start;
    min-inline-size: 100%;
    border-radius: 10px;
    white-space: nowrap;
}

#viewport > div [class^="icon-"], #viewport > div summary {
    padding: .5em;
}

#viewport > div summary {
    list-style: none;
    position: relative;
}

#viewport > div summary::-webkit-details-marker {
    display: none;
}

#viewport > div summary::after {
    content: '▸';
    position: absolute;
    right: 0;
    transition: transform 300ms;
}

#viewport > div [open] summary::after {
    transform: rotate(90deg);
}

.icon-home::before {
    content: '\ee1f';
}

.icon-calculator::before {
    content: '\eb1f';
}

.icon-view::before {
    content: '\ecb5';
}

.icon-objectives::before {
    content: '\ed4a';
}

.icon-edit::before {
    content: '\efe0';
}

.icon-dashboard::before {
    content: '\ec10';
}

.icon-lists::before {
    content: '\f44c';
}

.icon-logout::before {
    content: '\eedc';
}

.icon-report::before {
    content: '\eccd';
}

.icon-sales::before {
    content: '\ef69';
}

.icon-salespeople::before {
    content: '\f1ee';
}

.icon-families::before {
    content: '\ed8a';
}

.icon-purchases::before {
    content: '\f120';
}

.icon-stocks::before {
    content: '\f1c7';
}

.icon-generics::before {
    content: '\ef2a';
}

.icon-management::before {
    content: '\f0e6';
}

.icon-laboratory::before {
    content: '\ef56';
}

.icon-delete::before {
    content: '\ec2a';
}

.icon-excel::before {
    content: '\ecdd';
}

.sort-handle {
    margin-inline-end: .5ch;
    cursor: grab;
}

.sort-handle::before {
    content: '⠿';
}

h1 {
    line-height: 0;
    margin: 0;
}

h1::before {
    content: '';
    display: inline-block;
    width: 241px;
    height: var(--logo-height);
    background: url('logo.svg') top center no-repeat;
    transition: height .5s, width .5s;
}

h1 span,
.login-page label span,
form > h3,
#fold-sidebar,
.row-actions span,
.essential #pharmacy-total h3,
.essential #main-categories h4,
form[enctype="multipart/form-data"][hx-trigger="input changed"] input[type=file],
form[enctype="multipart/form-data"][hx-trigger="input changed"] footer,
label[for="fold-sidebar"] span {
    position: absolute;
    left: -9999px;
}

main {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: .5rem 1.5rem .5rem .75rem;
}

main, #viewport > div {
    overflow-y: auto;
}

main > :first-child, .login-page h2 {
    margin-block-start: 0;
}

main.htmx-request::after, dialog.htmx-request::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #0003 url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="%23494949"%3E%3Crect y="10" width="15" height="120" rx="6"%3E%3Canimate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/%3E%3Canimate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/%3E%3C/rect%3E%3Crect x="30" y="10" width="15" height="120" rx="6"%3E%3Canimate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/%3E%3Canimate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/%3E%3C/rect%3E%3Crect x="60" width="15" height="140" rx="6"%3E%3Canimate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/%3E%3Canimate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/%3E%3C/rect%3E%3Crect x="90" y="10" width="15" height="120" rx="6"%3E%3Canimate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/%3E%3Canimate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/%3E%3C/rect%3E%3Crect x="120" y="10" width="15" height="120" rx="6"%3E%3Canimate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/%3E%3Canimate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/%3E%3C/rect%3E%3C/svg%3E') center no-repeat;
}

.essential #main-categories > div > section,
.login-page #viewport, #viewport > div, form, label, fieldset {
    display: flex;
}

.essential #main-categories > div > section,
.essential #main-categories > div > section > div,
.login-page form, #viewport > div, #viewport > div form, label, .login-page fieldset, fieldset.vertical {
    flex-direction: column;
}

form, label, .login-page fieldset {
    gap: 1em;
}

form[enctype="multipart/form-data"][hx-trigger="input changed"] {
    flex-direction: column;
    inline-size: max-content;
    margin: 0 auto;
}

form[enctype="multipart/form-data"][hx-trigger="input changed"] label {
    cursor: pointer;
    border: 1px dashed black;
}

p.success,
form[enctype="multipart/form-data"][hx-trigger="input changed"] label {
    padding: 1em;
}

.validation-summary-valid,
.field-validation-valid,
form br {
    display: none;
}

.validation-summary-errors ul {
    padding-inline-start: 1em;
}

.management thead select,
.table-scroll,
form, .login-page input, iframe {
    inline-size: 100%;
}

form, fieldset {
    flex-flow: wrap;
}

fieldset {
    gap: 1.5rem;
    border: none;
    padding: 0;
    margin: 0;
}

fieldset.vertical {
    gap: 1rem;
}

legend {
    float: right;
}

fieldset.date-range {
    gap: .5rem;
}

fieldset.date-range legend {
    inline-size: 100%;
}

fieldset.date-range label {
    flex-direction: row;
    align-items: center;
}

label {
    gap: .5em;
    align-items: stretch;
}

.validation-summary-errors, .field-validation-error, label:has(:user-invalid), label:has(.input-validation-error) {
    color: var(--color--accent-3);
}

select:user-invalid, input:user-invalid, .input-validation-error {
    border: none;
    outline: 2px solid var(--color--accent-3);
}

input, button, select {
    font: inherit;
}

select,
.multiselect-dropdown ul,
input[type="text"],
input[type="search"],
input[type="date"],
input[type="number"],
input[type="password"] {
    border: 1px solid var(--color--gray--light);
    padding: .426rem .9375rem;
    line-height: 1.625;
}

.section-actions a,
input[type="text"],
input[type="search"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
button {
    font-size: 0.9375rem;
    border-radius: var(--border-radius);
}

thead input[type="search"] {
    padding-block: 2px;
}

label:has(> input[type=checkbox], > input[type=radio]) {
    flex-direction: row;
    align-items: center;
    gap: 0;
}

.section-actions a,
.success,
.essential #pharmacy-total .kpi h4,
.essential #main-categories h5,
button, article h3, .pagination button[aria-current="page"] {
    color: var(--color--base);
    background-color: var(--color--accent-1);
}

.section-actions a,
button {
    border: none;
    padding: .4812rem 1.25rem;
    font-weight: 500;
    text-decoration: none;
}

#filters footer button {
    min-height: 7.8ex;
}

button[disabled], .pagination button {
    background-color: #f2f2f4;
    color: #6d6d6d;
}

.multiselect-dropdown {
    display: inline-block;
    position: relative;
}

.multiselect-dropdown select {
    display: none;
}

.multiselect-dropdown button {
    display: inline-flex;
    text-align: start;
    color: inherit;
    font-weight: inherit;
    background-color: ButtonFace;
    padding-inline-end: .25em;
    align-items: center;
    gap: 1.25em;
}

.multiselect-dropdown button::after {
    content: '';
    background: url('data:image/svg+xml,%3Csvg width="48px" height="48px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M24,27.2,13.4,16.6a1.9,1.9,0,0,0-3,.2,2.1,2.1,0,0,0,.2,2.7l12,11.9a1.9,1.9,0,0,0,2.8,0l12-11.9a2.1,2.1,0,0,0,.2-2.7,1.9,1.9,0,0,0-3-.2Z"/%3E%3C/svg%3E') center / contain no-repeat;
    display: inline-block;
    width: 1em;
    height: 1em;
}

.tabs,
.multiselect-dropdown ul, nav ul {
    list-style: none;
    margin: 0;
}

.multiselect-dropdown ul {
    display: none;
    background-color: var(--color--base);
    position: absolute;
    z-index: 1;
    padding: .25em .25ch;
    border-radius: 10px;
    inline-size: 100%;
    min-width: 16ch;
    max-height: 15em;
    overflow: auto;
    resize: both;
}

.multiselect-dropdown ul[style*="height"] {
    max-height: unset;
}

.multiselect-dropdown [aria-expanded = "true"] + ul {
    display: block;
}

.multiselect-dropdown li:first-child {
    padding-block-end: .15em;
    border-block-end: 1px solid var(--color--gray--light);
}

.multiselect-dropdown li:nth-child(2) {
    padding-block-start: .15em;
}

.login-page #viewport {
    background: #f8f7fa;
    align-items: center;
    flex-direction: column-reverse;
    --padding: .75rem;
}

.login-page #fold-sidebar, .login-page header label {
    display: none;
}

.login-page #viewport > header, .login-page main {
    background-color: var(--color--base);
    inline-size: 100%;
    max-inline-size: calc(16.75rem + var(--padding) * 2);
    padding: 0 var(--padding);
}

.login-page main {
    padding-block-start: var(--padding);
    margin: auto 0 0;
    border-start-start-radius: var(--border-radius);
    border-start-end-radius: var(--border-radius);
    box-shadow: 0 -0.3875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
}

.login-page #viewport > header {
    padding-block-end: var(--padding);
    margin: 0 0 auto;
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
    box-shadow: 0 0.3875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
}

.login-page form {
    border-block: 1px solid var(--color--gray--light);
    padding-block: 1em;
}

#sales {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(38ch, 1fr));
    gap: 1em;
}

article:not(.kpi) {
    margin-block-end: 1em;
}

article:not(.kpi),
.essential #pharmacy-total .kpi,
#main-categories > div > section {
    inline-size: 100%;
    box-shadow: rgba(0, 0, 0, 0.05) 0 6px 24px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px;
    border-radius: 6px;
}

.essential #pharmacy-total .kpi h4,
.essential #main-categories h5,
article h3 {
    padding: .25rem .5rem;
    text-transform: uppercase;
}

article h3,
.essential #pharmacy-total .kpi h4,
#main-categories :is(h4, h5) {
    margin-block: 0;
}

article h3,
.essential #pharmacy-total .kpi h4,
.essential :is(#stock, #icu-stock) :is(dt, dd),
#main-categories :is(h4, h5),
.kpi,
.login-page h2,
.login-page form footer {
    text-align: center;
}

.change, #sales .change {
    font-size: 87.5%;
    display: block;
}

.essential :is(#stock, #icu-stock) .change[value^="-"],
.essential #stock-management data[value^="-"],
.change, .difference {
    color: var(--color--accent-1);
}

:is(.change,.difference):before {
    content: "➚";
}

.essential :is(#stock, #icu-stock) .change,
.essential #stock-management data,
:is(.change, .difference)[value^="-"] {
    color: var(--color--accent-3);
}

:is(.change,.difference)[value^="-"]:before {
    content: "➘";
}

.difference + .change {
    display: inline;
}

.difference + .change::before {
    content: '(';
}

.difference + .change::after {
    content: ')';
}

.essential :is(#stock, #icu-stock, #stock-management) .change::before {
    content: '';
}

#main-categories h4,
#replacement h4,
#sales > article > div:first-of-type .change,
#main-categories > div > section > div:first-of-type .change,
.essential #pharmacy-total :is(.change, .difference),
.essential :is(#stock, #icu-stock) dd,
.essential #main-categories > div > section > div:first-of-type .kpi data:first-of-type,
#replacement .change {
    font-size: 150%;
}

.kpi {
    border: 1px solid #e5e5e5;
    padding: .15em 1ch;
}

.kpi :is(p, h3, h4, h5, h6) {
    margin: 0;
    font-size: 1em;
    font-weight: normal;
}

#main-categories section > div,
#replacement > article > div,
.essential :is(#stock, #icu-stock) dl,
#sales > article > div {
    display: grid;
    column-gap: 1.5ch;
    margin: 0;
    padding: 1em 1ch;
}

.tabs,
nav ul,
.essential #main-categories > div,
.essential #main-categories > div > section,
.essential #pharmacy-total .kpi,
.essential #main-categories .kpi,
#main-categories > div > section > div > section > div {
    padding: 0;
}

dd {
    margin-inline-start: 0;
}

#sales article > div {
    margin-inline: 1ch;
    grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
    row-gap: .25em;
}

#sales > article > div:first-of-type,
#main-categories section > div:first-of-type,
#pharmacy-total > div:first-of-type {
    justify-content: space-around;
    row-gap: 1em;
}

#sales .kpi {
    white-space: nowrap;
}

#sales > article > div:first-of-type,
#main-categories > div > section > div:first-of-type {
    border-block-end: 1px solid #e5e5e5;
    padding-block-end: 1em;
}

#sales > article > div:first-of-type .kpi data:first-of-type,
#main-categories > div > section > div:first-of-type .kpi data:first-of-type,
.essential #pharmacy-total .kpi data:first-of-type,
#replacement .kpi data:first-of-type {
    font-size: 225%;
}

dt::after, #sales > article > div:last-of-type h4::after {
    content: ': ';
}

dt, dd, #sales > article > div:last-of-type .kpi :is(h4, p) {
    display: inline;
}

dt {
    font-weight: bold;
}

.essential :is(#stock, #icu-stock) dd,
.kpi data,
#replacement h4 {
    font-weight: bold;
}

#main-categories section > :is(h4, h5),
#replacement h4 {
    text-transform: uppercase;
}

.tabs,
#main-categories > div,
#replacement,
#replacement > article > div,
#sales article > div:first-of-type,
#main-categories section > div,
.essential #pharmacy-total > div,
.essential main > div,
.essential :is(#stock, #icu-stock) dl,
#tables {
    display: flex;
    flex-wrap: wrap;
    gap: 1ch;
}

#main-categories > div,
#main-categories > div > section > div,
#replacement > article > div {
    justify-content: center;
}

.essential #main-categories > div > section,
:is(#replacement, #tables) > article {
    flex: 1;
}

#replacement .chart {
    min-width: 50ch;
    flex: 2;
}

#replacement > article > div {
    gap: 5ch;
}

#main-categories > div, #main-categories > div > section, .pagination {
    padding: 1ch;
}

#main-categories > div > section {
    min-width: 25ch;
}

.essential :is(#stock, #icu-stock) dd .change,
td > .change,
#main-categories section > h5 {
    font-size: inherit;
    font-weight: inherit;
}

#main-categories [id^="sub-category-"] {
    min-width: 15ch;
}

#main-categories [id^="sub-category-"]::before {
    display: block;
    width: 1em;
    margin: 0 auto .4em;
}

/* self-care */
#main-categories #sub-category-20::before {
    content: '\f540';
}

/* accessories */
#main-categories #sub-category-64::before {
    content: '\f274';
}

/* efg */
#main-categories #sub-category-62::before {
    content: '\f28E';
}

/* expensive specialties */
#main-categories #sub-category-90::before {
    content: '\ef69';
}

/* specialty */
#main-categories #sub-category-60::before {
    content: '\eb37';
}

/* parapharmacy */
#main-categories #sub-category-10::before {
    content: '\edf5';
}

#tables {
    align-items: start;
}

#salespeople table {
    min-width: 60ch;
}

#superfamilies table {
    min-width: 95ch;
}

.numeric {
    text-align: end;
}

table {
    min-inline-size: 100%;
}

td, th {
    text-align: left;
    padding: .5em .5ch;
}

td .field-validation-error {
    display: block;
}

thead tr:last-child {
    box-shadow: rgba(0, 0, 0, 0.04) 0 3px 5px;;
}

thead tr + tr td {
    padding-block-start: 0;
}

thead tr:has(+ tr) th {
    padding-block-end: .15em;
}

tbody tr:not(:last-child) :is(th, td) {
    border-block-end: 1px solid var(--color--gray--light);
}

thead [aria-sort=ascending]::before {
    content: '↗ ';
}

thead [aria-sort=descending]::before {
    content: '↘ ';
}

thead th button {
    background-color: inherit;
    font: inherit;
    margin: 0;
    padding: 0;
    display: inline;
    text-align: inherit;
}

.section-actions, .row-actions,
.pagination fieldset, .pagination label, .pagination nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5ch;
}

.section-actions,
.pagination fieldset {
    inline-size: 100%;
    justify-content: space-between;
}

#superfamilies input[name="q[superfamily]"] {
    max-inline-size: 20ch;
}

#superfamilies input[name="q[group]"] {
    max-inline-size: 12ch;
}

#superfamilies input[name="q[subgroup]"] {
    max-inline-size: 13ch;
}

.pagination-filter {
    display: none;
}

#superfamilies tfoot td {
    font-weight: bold;
}

.essential #main-categories > div > section,
.essential #pharmacy-total {
    box-shadow: unset;
}

.essential :is(#stock, #icu-stock) dl div,
.essential #main-categories > div > section > div {
    border: none;
}

.essential #pharmacy-total {
    flex: 3;
    min-width: 22em;
}

.essential #pharmacy-total .kpi {
    max-width: 22em;
    border: none;
}

.essential .chart td data:has(+ .difference),
.essential #pharmacy-total .kpi data {
    display: block;
}

.essential main > div > article {
    flex: 1;
}

.essential #main-categories .kpi data {
    display: inline;
}

.essential #main-categories .kpi data:first-of-type {
    padding: .25rem 0 .25rem .5rem;
}

.essential #main-categories .kpi data:last-of-type {
    padding: .25rem .5rem .25rem 0;
}

.essential #main-category-10 .kpi {
    background-color: var(--color--blue--light);
}

.essential main > div:first-of-type .chart thead th:first-of-type,
.essential #pharmacy-total .kpi:nth-of-type(2) h4,
.essential #pharmacy-total .kpi:nth-of-type(3) h4,
.essential #main-category-10 h5 {
    background-color: var(--color--blue);
}

.essential #main-category-60 .kpi {
    background-color: var(--color--orange--light);
}

.essential main > div:first-of-type .chart thead th:last-of-type,
.essential #pharmacy-total .kpi:nth-of-type(5) h4,
.essential #pharmacy-total .kpi:nth-of-type(6) h4,
.essential #main-category-60 h5 {
    background-color: var(--color--orange);
}

.essential main > div:first-of-type .chart th {
    text-align: center;
    text-transform: uppercase;
}

.essential main > div:first-of-type .chart thead th {
    color: var(--color--base);
}

.essential main > div:first-of-type .chart {
    align-self: start;
}

.essential main > div:nth-of-type(3) > div,
.essential main > div:nth-of-type(2) .chart {
    min-width: 26em;
}

.essential main > div:nth-of-type(3) > div,
.essential :is(#stock, #icu-stock) dl div {
    flex: 1;
}

.essential :is(#stock, #icu-stock) dl div {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    row-gap: 1em;
    column-gap: 2ch;
}

.essential #stock-management {
    max-inline-size: 30em;
}

.essential #stock-management tbody tr :is(th, td) {
    border-block-end: none;
}

.essential #stock-management tfoot td {
    border-block-start: 2px solid black;
}

.tabs {
    padding-inline-start: .5em;
    border-bottom: 1px solid #cccccc;
    margin-block-end: .25em;
}

.tabs li {
    border: 1px solid #cccccc;
    border-block-end: none;
    padding: .25em 1.5ch;
}

#objective-form > fieldset > * {
    flex: 1;
}

.management {
    border-collapse: collapse;
}

.management thead td {
    white-space: nowrap;
}

.management thead :is(input, select) {
    padding: .213rem .4587rem;
    line-height: 1.5;
}

.management thead input {
    inline-size: calc(100% - 1ch);
}

.management thead input[maxlength="6"] {
    min-inline-size: 6ch;
}

.management [aria-selected=true] {
    background-color: var(--color--accent-1--light);
}

#objective-salespeople {
    max-height: 30ex;
}

#objective-salespeople:has(h3) {
    margin-top: 1em;
}

#objective-salespeople :is(h3, thead) {
    position: sticky;
    background: var(--color--base)
}

#objective-salespeople h3 {
    top: 0;
}

#objective-salespeople thead {
    top: 1.2rem;
}

#snackbar [role="alert"] {
    background-color: var(--color--contrast);
    color: var(--color--base);
    padding: 2rem;
    min-width: 28.8rem;
    max-width: 56.8rem;
    border-radius: 2px;
    position: fixed;
    translate: -50% 100%;
    left: 50%;
    inset-block-end: 0;
    transition: translate;
    transition-duration: 300ms;
}

#snackbar [role="alert"].open {
    translate: -50%;
}

@media (max-width: 48rem) {
    main {
        padding-inline-end: .75rem;
    }

    #fold-sidebar {
        --is-mobile-menu: 1;
    }

    label[for="fold-sidebar"] {
        position: fixed;
        inset-block-start: 0;
        inset-inline-end: 0;
        z-index: 9999;
    }

    body:not(.login-page) > #viewport > header, #viewport > div {
        position: fixed;
        z-index: 100;
        max-inline-size: 100vw !important;
        inline-size: 100vw !important;
        inset-inline-start: -100%;
    }

    #viewport > header {
        inset-block-start: 0;
    }

    #viewport > div {
        inset-block-start: var(--logo-height);
        inset-block-end: 0;
    }

    body:not(.login-page) > #viewport #fold-sidebar:checked ~ header, #fold-sidebar:checked ~ div {
        inset-inline: 0;
    }

    label[for="fold-sidebar"]::after {
        font-size: 1.5em;
        content: '\ef3e';
    }

    #fold-sidebar:checked ~ header label[for="fold-sidebar"]::after {
        content: '\eb99';
    }

    #fold-sidebar:checked ~ header h1::before {
        width: 241px;
        background-image: url('logo.svg');
    }

    #fold-sidebar:checked ~ div {
        padding-inline-start: .75rem;
    }
}