/**
 * Kitchen Optimizer colors
 */
:root {
    /* Colors */
    --grey-1: #333;

    --green-0: #06251a;
    --green-1: #0C4B33;
    --green-2: #458651;
    --green-3: #97b879;
    --green-4: #cbddb9;
    --green-5: #e3ebdc;

    /* Components */
    --bg_header: #fff;
    --cl_header: var(--green-0);
    --bg_navbar: var(--green-5);
    --cl_navbar: var(--green-0);
    --bg_content: #fff;
    --cl_content: var(--green-0);
}

/* Font colors */
.cl-green-0 { color: var(--green-0); }
.cl-green-1 { color: var(--green-1); }
.cl-green-2 { color: var(--green-2); }
.cl-green-3 { color: var(--green-3); }
.cl-green-4 { color: var(--green-4); }
.cl-green-5 { color: var(--green-5); }

/* Background colors */
.bg-green-0 { background-color: var(--green-0); }
.bg-green-1 { background-color: var(--green-1); }
.bg-green-2 { background-color: var(--green-2); }
.bg-green-3 { background-color: var(--green-3); }
.bg-green-4 { background-color: var(--green-4); }
.bg-green-5 { background-color: var(--green-5); }

/* Login page */
#page-login-content {
    height: calc(100% - 145px);
}
#page-login-content > .row {
    height: 100%;
    display: flex;
    align-items: stretch;
}
#page-login-content > .row > #page-login-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--green-5);
}
#page-login-bg {
    background: no-repeat  center -200px url("/static/kitchen_optimizer/img/page-login-bg.0293d68f16df.jpg") var(--green-2);
    background-size: cover;
}

/**
 * Themes
 */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --bg_header: #253c33;
        --cl_header: #fff;
        --bg_navbar: #253c33;
        --cl_navbar: #fff;
        --bg_content: #191d1b;
        --cl_content: #fff;
    }
}
html[data-theme="dark"] {
    --bg_header: #253c33;
    --cl_header: #fff;
    --bg_navbar: #253c33;
    --cl_navbar: #fff;
    --bg_content: #191d1b;
    --cl_content: #fff;
}

/**
 * Layout
 */
html, body {
    height: 100%;
}


/**
 * Font awesome icons
 */
.fa-solid {
    height: 15px;
    width: 15px;
    background-color: var(--green-2);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}
.fa-solid.fa-user-group     {mask-image: url("/static/img/fa-icons/user-group-solid.78bd4ecf9042.svg");}
.fa-solid.fa-user-plus      {mask-image: url("/static/img/fa-icons/user-plus-solid.b6e725ebc46e.svg");}


/**
 * Navbar
 */
.navbar {
    padding: 10px 20px 10px 10px;
    .nav-link {
        font-size: 16px;
    }
}



/**
 * Scrollbar
 */
/* width */
::-webkit-scrollbar {
    width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--green-1);
    box-shadow: inset 0 0 5px grey;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--green-2);
    border-radius: 10px;
}


/**
 * Header
 */
.admin-interface #header {
    background: var(--bg_header);
    color: var(--cl_header);
}
.admin-interface #header-logo {
    width: 40px;
    height: auto;
    margin-right: 10px;
}
.admin-interface #branding h1 a:link,
.admin-interface #branding h1 a:visited,
.admin-interface #header a:link,
.admin-interface #header a:visited,
.admin-interface #logout-form button,
.admin-interface #header #user-tools a,
.admin-interface #header #user-tools #logout-form button {
    color: var(--cl_navbar);
}
.admin-interface .theme-toggle svg.theme-icon-when-auto,
.admin-interface .theme-toggle svg.theme-icon-when-dark,
.admin-interface .theme-toggle svg.theme-icon-when-light {
    fill: var(--cl_navbar);
    color: white;
}


/**
 * Breadcrumb
 */
 .admin-interface div.breadcrumbs {
    background: var(--green-2);
    color: #fff;
}


/**
 * Titles
 */
.admin-interface h1 {
    color: var(--cl_content);
}

.admin-interface .module h2,
.admin-interface .module caption,
.admin-interface .module.filtered h2 {
    background: var(--green-2);
    color: white;
}


/**
 * Navbar
 */
.main.shifted > #nav-sidebar {
    padding: 15px;
}
.main > #nav-sidebar {
    background: var(--green-4);
    padding: 0;
}

/* Navbar theme */
.main > #nav-sidebar {
    background: var(--bg_navbar);
    color: var(--cl_navbar);
}

.admin-interface #nav-filter {
    margin: 10px 0 20px 0;
    border-radius: 30px;
    padding: 8px 20px;
    background: white;
    color: var(--green-1);
    border: none;
    outline: none;
}

/**
 * Navbar tables
 */
.admin-interface :is(#content-main, #nav-sidebar) .module {
    background: none;
    margin-bottom: 20px;
}
.admin-interface table,
.admin-interface :is(#content-main, #nav-sidebar) .module table {
    background: white;
}
.admin-interface table caption,
.admin-interface :is(#content-main, #nav-sidebar) .module table caption {
    padding: 8px 20px;
}
.admin-interface :is(#content-main, #nav-sidebar) .module table caption {
    border-radius: 10px 10px 0 0;
}
.admin-interface :is(#content-main, #nav-sidebar) .module.collapsed table caption {
    border-radius: 10px 10px 10px 10px;
}
.admin-interface tr,
.admin-interface :is(#content-main, #nav-sidebar) .module tr {
    
}
.admin-interface :is(#content-main, #nav-sidebar) .module tr th {
    padding: 8px 10px 8px 40px;
    border-radius: 0;
}
.admin-interface :is(#content-main, #nav-sidebar) .module tr td {
    padding: 8px 8px 8px 10px;
    border-radius: 0;
}
.admin-interface tr:nth-child(even),
.admin-interface :is(#content-main, #nav-sidebar) .module tr:nth-child(odd) {
    background: none;
    color: var(--green-1);
    border-radius: 0;
}
.admin-interface :is(#content-main, #nav-sidebar) .module tr.current-model {
    background: var(--green-4);
}
.admin-interface :is(#content-main, #nav-sidebar) .module a.addlink {
    display: inline-block;
    background-position: 4px center;
    background-color: var(--green-1);
    padding: 3px 8px 3px 22px;
    border-radius: 8px;
    color: #fff;
}
.admin-interface :is(#content-main, #nav-sidebar) .module:not(.collapsed) table {
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

/* Sidebar icons */
tr th {
    position: relative;
}
tr th::before {
    position: absolute;
    left: 15px;
    height: 15px;
    width: 15px;
    text-align: center;
    content: "";
    background-color: var(--green-1);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

/* 1. Entreprise */
tr.model-mycompany th::before               {mask-image: url("/static/img/fa-icons/building-solid.490ab28b55bc.svg");}
tr.model-employee th::before                {mask-image: url("/static/img/fa-icons/users-solid.42803404655d.svg");}
tr.model-room th::before                    {mask-image: url("/static/img/fa-icons/location-dot-solid.c1856cf31f20.svg");}
tr.model-storageplace th::before            {mask-image: url("/static/img/fa-icons/warehouse-solid.4bc01be3c79b.svg");}
tr.model-cleaningtime th::before            {mask-image: url("/static/img/fa-icons/clock-solid.253dc6f94b7d.svg");}
tr.model-surfacetoclean th::before          {mask-image: url("/static/img/fa-icons/broom-solid.1f0614d421ae.svg");}

/* 2. Achats */
tr.model-supplier th::before                {mask-image: url("/static/img/fa-icons/truck-solid.0171b3c0a908.svg");}
tr.model-ingredient th::before              {mask-image: url("/static/img/fa-icons/wheat-awn-solid.696d0a5b6031.svg");}
tr.model-reception th::before               {mask-image: url("/static/img/fa-icons/truck-ramp-box-solid.694fc221076d.svg");}
tr.model-receptioningredient th::before     {mask-image: url("/static/img/fa-icons/box-open-solid.132b1f35ac90.svg");}
tr.model-ingredientcategory th::before      {mask-image: url("/static/img/fa-icons/jar-solid.1f6d592b7328.svg");}

/* 3. Production */
tr.model-recipecategory th::before          {mask-image: url("/static/img/fa-icons/list-solid.7e8792627cca.svg");}
tr.model-recipe th::before                  {mask-image: url("/static/img/fa-icons/book-solid.5d7cd6057529.svg");}
tr.model-production th::before              {mask-image: url("/static/img/fa-icons/box-archive-solid.97298836f339.svg");}
tr.model-productionrecipe th::before        {mask-image: url("/static/img/fa-icons/cheese-solid.92b58b82b3d9.svg");}
tr.model-cookingaction th::before           {mask-image: url("/static/img/fa-icons/kitchen-set-solid.016057beaefe.svg");}

/* 4. Stock */
tr.model-inventory th::before               {mask-image: url("/static/img/fa-icons/warehouse-solid.4bc01be3c79b.svg");}
tr.model-inventoryingredient th::before     {mask-image: url("/static/img/fa-icons/clipboard-list-solid.4abc157c9213.svg");}
tr.model-inventoryrecipe th::before         {mask-image: url("/static/img/fa-icons/list-check-solid.7cabd1b561b0.svg");}
tr.model-ingredientproxy th::before         {mask-image: url("/static/img/fa-icons/boxes-stacked-solid.07b7c8f27abe.svg");}

/* 5. Prévisions */
tr.model-forecast th::before                {mask-image: url("/static/img/fa-icons/cloud-sun-solid.0c6dac105ea6.svg");}
tr.model-ingredientforecastproxy th::before {mask-image: url("/static/img/fa-icons/dolly-solid.ddc0807a2000.svg");}
tr.model-recipeingredientproxy th::before   {mask-image: url("/static/img/fa-icons/people-carry-box-solid.2959f1b02e0c.svg");}

/* 7. Higyène */
tr.model-surfacetocleanproxy th::before     {mask-image: url("/static/img/fa-icons/calendar-check-solid.d00a2be71093.svg");}
tr.model-cleaningrecord th::before          {mask-image: url("/static/img/fa-icons/broom-solid.1f0614d421ae.svg");}
tr.model-storageplaceproxy th::before       {mask-image: url("/static/img/fa-icons/chart-line-solid.014e6e8f3c59.svg");}
tr.model-temperaturecontrol th::before      {mask-image: url("/static/img/fa-icons/temperature-three-quarters-solid.73a39d4bc7cc.svg");}

/* Authentification */
tr.model-group th::before                   {mask-image: url("/static/img/fa-icons/users-solid.42803404655d.svg");}
tr.model-user th::before                    {mask-image: url("/static/img/fa-icons/user-solid.881ffb60caf0.svg");}

/* Cliqual */
tr.model-ciqualingredient th::before        {mask-image: url("/static/img/fa-icons/puzzle-piece-solid.fc255f64c295.svg");}

/* Interface Admin */
tr.model-theme th::before                   {mask-image: url("/static/img/fa-icons/palette-solid.c1ab95c4b674.svg");}

/* Utilities */
tr.model-allergen th::before                {mask-image: url("/static/img/fa-icons/shrimp-solid.0d270f5754bd.svg");}
tr.model-day th::before                     {mask-image: url("/static/img/fa-icons/calendar-day-solid.29c53c9d26b1.svg");}
tr.model-month th::before                   {mask-image: url("/static/img/fa-icons/calendar-days-solid.7dd487bdfdd3.svg");}
tr.model-week th::before                    {mask-image: url("/static/img/fa-icons/calendar-week-solid.67ab2917ac99.svg");}
tr.model-vatrate th::before                 {mask-image: url("/static/img/fa-icons/percent-solid.1f0562f0480b.svg");}



/**
 * Content
 */
#main > #content-start {
    background: var(--bg_content);
    color: var(--cl_content);
}


/**
 * Filtres
 */
.admin-interface .module.filtered #changelist-filter {
    border-radius: 10px 10px 0 0;
}


/**
 * Forms
 */
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
input[type=tel],
textarea,
select,
.vTextField,
#changelist .actions select {
    border-radius: 8px !important;
}