.reporting-part {
    margin: 1px;
    width: 15px;
    height: 15px;
    display:inline-block;
}

.open > .dropdown-menu {
    display: block;
}

#form {
    background-color: rgb(236, 234, 234);
    border: 1px solid rgb(236, 234, 234);
    box-shadow: 5px 5px 5px gray;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 15px;
} 
.form {
    width: auto;
    background-color: #e2e2e2;
    padding: 10px;
    margin-bottom: 10px;
} 
.currency {
    color: lightgray;
    font-weight: bold;
    width: 1%; 
    white-space: nowrap;
}

.border-column-left {
    border-left: 1px solid rgb(100, 100, 100) !important;
}
.border-column-right {
    border-right: 1px solid rgb(100, 100, 100) !important;
}
table.dataTable {
    color: black;
    border-left: 1px solid #EBEBEB !important;
    border-top: 1px solid #EBEBEB !important;
    /* background-image: url("../public/images/RaceX_transparent_transparent.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center; */
}
.percent-column {
    width: 1%;
    white-space: nowrap;
    font-weight: bold;
}
.mini-column {
    width: 1%;
    white-space: nowrap;
}
.mini-column-without-padding {
    width: 1%;
    white-space: nowrap;
    padding-left: 1px !important;
    padding-right: 1px !important;
}
a {
    color: #e8550b;
}
a:hover {
    color: rgb(170, 57, 0);
    text-decoration: underline;
    text-decoration-color: #e00c0f;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
a.no-hover:hover {
    text-decoration: none;
}
.column-500 {
    width: 500px;
}
.column-350 {
    width: 250px;
}
.column-300 {
    width: 300px;
}
.column-250 {
    width: 250px;
}
.column-200 {
    width: 200px;
}
.column-150 {
    width: 150px;
}
.column-125 {
    width: 125px;
}
.column-110 {
    width: 110px;
}
.column-100 {
    width: 100px;
}
.column-70 {
    width: 70px;
}
.column-50 {
    width: 50px;
}

.active_page {
    color: white !important;
    text-decoration: underline;
    text-decoration-color: #e60000;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
h2 {
    color: #e53e3e;
    font-weight: bold;
    /* text-decoration: underline;
    text-decoration-color: #e00c0f;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px; */
}
h3 {
    color: #ef6724;
    font-weight: bold;
    /* text-decoration: underline;
    text-decoration-color: #e8550b;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px; */
}
/* h4 {
    color: gray;
    font-weight: bold;
} */

.back-button:hover {
    animation: wiggle 2s linear;
}

@keyframes wiggle {
    0%, 7% {
      transform: rotateZ(0);
    }
    15% {
      transform: rotateZ(-15deg);
    }
    20% {
      transform: rotateZ(10deg);
    }
    25% {
      transform: rotateZ(-10deg);
    }
    30% {
      transform: rotateZ(6deg);
    }
    35% {
      transform: rotateZ(-4deg);
    }
    40%, 100% {
      transform: rotateZ(0);
    }
  }

.subtext {
    font-size: 80%;
    color: #6c757d;
}

.caret {
    display: none;
}
.dropdown-menu {
    font-size: 15px;
}
.btn-group, .multiselect {
    width: 100% !important;
    font-family: 'Inter', sans-serif;
}
.multiselect-container {
    max-height: 600px;
    overflow-y: auto;
}
.filters-container {
    padding: 10px;
    /* border: 1px solid #e8550b; */
    border-radius: 5px;
}
.btn-custom {
    color: white;
    padding: 7px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 16px !important;
    /* height: 60%; */
    /* margin-top: 1.3rem !important; */
    background-color: #777777;
    border-color: #929292;
    font-family: 'Inter', sans-serif;
}
.btn-custom:hover {
    /* box-shadow: inset 0px 0px 5px black;
    background-image: linear-gradient(to bottom right, rgb(109, 108, 108) 20%, rgb(104, 103, 103) 60%);
    border-color: black;
    color: lightgray; */
    background-color: rgb(88, 88, 88);
}

.btn-only-icon-custom {
    color: #c40a1c;
    background-color: transparent;
    padding: 7px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif;
    border-radius: 300px !important;
}
.btn-only-icon-custom:hover {
    box-shadow: inset 0px 0px 5px rgb(105, 105, 105);
    border-radius: 300px !important;
    /* background-image: linear-gradient(to bottom right, rgb(109, 108, 108) 20%, rgb(104, 103, 103) 60%); */
    /* border-color: rgb(138, 137, 137); */
    filter: brightness(0.5);
}

.btn-only-icon-custom-primary {
    color: #c4450a;
    background-color: transparent;
    padding: 7px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
    font-size: 20px !important;
    font-family: 'Inter', sans-serif;
    border-radius: 300px !important;
}
.btn-only-icon-custom-primary:hover {
    box-shadow: inset 0px 0px 5px rgb(105, 105, 105);
    border-radius: 300px !important;
    /* background-image: linear-gradient(to bottom right, rgb(109, 108, 108) 20%, rgb(104, 103, 103) 60%); */
    /* border-color: rgb(138, 137, 137); */
    filter: brightness(0.5);
}

.btn-danger-fill-custom2 {
    color: white;
    /* background-image: linear-gradient(to bottom right, rgb(236, 54, 54) 20%, rgb(150, 2, 2) 60%); */
    background-color: #E53E3E;
    padding: 7px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif;
}
.btn-danger-fill-custom2:hover {
    /* box-shadow: inset 0px 0px 5px black;
    background-image: linear-gradient(to bottom right, rgb(109, 108, 108) 20%, rgb(104, 103, 103) 60%);
    border-color: black;
    color: lightgray; */
    background-color: #c92c2c;
}

.btn-light-warning-custom {
    color: white;
    /* background-image: linear-gradient(to bottom right, #ec5204 20%, #ef6724 60%); */
    background-color: #D8A613;
    padding: 7px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif;
}
.btn-light-warning-custom:hover {
    background-color: #ac8510;
}

.export-table-wrap {
    width: 65%;
    margin: 0 auto;
}
.btn-warning-custom2 {
    color: white;
    /* background-image: linear-gradient(to bottom right, #ec5204 20%, #ef6724 60%); */
    background-color: #ef6724;
    padding: 7px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif;
}
.btn-warning-custom2-left {
    color: white;
    background-image: linear-gradient(to right, #EF6724 40%, rgb(119, 119, 119) 60%);
    padding: 7px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif;
}
.btn-warning-custom2-right {
    color: white;
    background-image: linear-gradient(to right, rgb(119, 119, 119) 40%, #EF6724 60%);
    padding: 7px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 16px !important;
    border-color: grey;
    font-family: 'Inter', sans-serif;
}
.btn-warning-custom2-left:hover, .btn-warning-custom2-right:hover {
    box-shadow: inset 0px 0px 5px black;
    /* background-image: linear-gradient(to bottom right, rgb(109, 108, 108) 20%, rgb(104, 103, 103) 60%); */
    border-color: black;
    color: lightgray;
}
.btn-warning-custom2:hover {
    background-color: #c9571f;
}
.btn-success2 {
    color: white;
    /* background-image: linear-gradient(to bottom right, #227522 20%, #009200 60%); */
    background-color: #38A169;
    /* border-color: #e8550b; */
    padding: 7px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif;
}
.btn-success2-left {
    color: white;
    background-image: linear-gradient(to right, #38A169 40%, rgb(119, 119, 119) 60%);
    /* border-color: #e8550b; */
    padding: 7px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 16px !important;
    border-color: grey;
    font-family: 'Inter', sans-serif;
}
.btn-success2-right {
    color: white;
    background-image: linear-gradient(to right, rgb(119, 119, 119) 40%, #38A169 60%);
    /* border-color: #e8550b; */
    padding: 7px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 16px !important;
    border-color: grey;
    font-family: 'Inter', sans-serif;
}
.btn-success2-left:hover, .btn-success2-right:hover {
    box-shadow: inset 0px 0px 5px black;
    background-image: linear-gradient(to bottom right, #2c7e52 20%, #236341 60%);
    border-color: black;
    color: lightgray;
}
.btn-success2:hover {
    background-color: #267c4e;
}
input[type="checkbox"] {
    accent-color: #e8550b;
}
.hideable-column {
    display: none;
}
.calc-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 220px;
    right: 0;
    background: #d5d5d5;
    border-top: 1px solid #e7eaec;
    padding: 12px 20px;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    margin: 0;
}
body.mini-navbar .calc-bottom-bar {
    left: 70px;
}
body.canvas-menu .calc-bottom-bar {
    left: 0;
}
body:has(.calc-bottom-bar) .wrapper-content {
    padding-bottom: 90px;
}
/* Animate.css na .wrapper-content vytváří dočasný transform → ten dělá containing block pro position:fixed potomky.
   Na stránkách s sticky barem proto animaci vypneme. */
body:has(.calc-bottom-bar) .wrapper-content.animated {
    animation: none;
}
.negative-row {
    color: red;
}
/* Oranžová obdoba negative-row - např. plán směn: nepřítomnost jen v části dne */
.warning-row {
    color: #DD6B20;
}

/* Hledání v hlavním menu (filterSideMenu v customJS.js) */
.menu-search {
    padding: 0 15px 10px 15px;
}
/* Při hledání jsou všechny podnabídky rozbalené - nezávisle na stavu metisMenu */
#side-menu.menu-searching .collapse {
    display: block !important;
    height: auto !important;
}
#side-menu .menu-search-hidden {
    display: none !important;
}
/* Sbalené menu (jen ikony) - na pole není místo */
body.mini-navbar .menu-search {
    display: none;
}

/* Plán směn – užší ibox detailu týdne (stejná šířka jako 4. vrstva hrubé marže) */
.shift-plan-detail-ibox {
    width: 75%;
}
/* Plán směn – ikona stavu potvrzení týdne v přehledu (fajfka / křížek) */
.shift-plan-status-icon {
    font-size: 20px;
}
.shift-plan-status-confirmed {
    color: #38A169; /* stejná zelená jako btn-success2 */
}
/* Plán směn – den s 0 odpracovanými hodinami (volno, nepracovní den) zašedlý */
.inactive-row {
    color: #A0AEC0;
}

/* Plán směn – rozbalená úprava dne pod řádkem (tlačítko Změnit) a značka dne předvyplněného z Aktionu */
.shift-day-edit > td {
    background-color: #F7FAFC;
}
.shift-day-mode-label {
    font-weight: normal;
}
.shift-plan-aktion-label {
    margin-left: 4px;
    font-size: 10px;
}
.shift-plan-aktion-warning {
    font-size: 12px;
    color: #DD6B20;
}
/* Výchozí plán směn - časy od/do pod sebou, vedle nich popelnice na vymazání dne */
.shift-plan-day {
    display: flex;
    align-items: center;
    gap: 2px;
}
.shift-plan-day-times {
    flex: 1;
    min-width: 0;
}
.shift-plan-clear-day {
    padding: 0 2px;
}
/* Schvalování směn - klikací řádky a modal detailu ve stylu mimořádných odměn */
.shift-approval-row {
    cursor: pointer;
}
.shift-approval-no-data {
    text-align: center;
    font-size: 18px;
    padding: 20px;
}
.shift-approval-detail-table {
    border: 2px solid lightgray;
    border-radius: 10px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.shift-approval-detail-table tr {
    background-color: white;
}
.shift-approval-history {
    max-height: 300px;
    overflow: auto;
}
.shift-approval-history-table {
    background-color: #f3f3f3;
}

/* Statistika nákupů - porovnání materiálů. Váhy: vybraný materiál zeleně, jiný sortiment zašedlý (disabled).
   Štítek má barvu své křivky v grafu (nastavuje JS), proto jen písmo a odsazení tady. */
.material-compare-button svg {
    vertical-align: -0.125em;
}
.material-compare-button.material-compare-selected {
    color: #38A169;
}
.material-compare-button:disabled {
    color: #CBD5E0;
    cursor: not-allowed;
}
.material-compare-badge {
    display: inline-block;
    color: white;
}
.material-compare-badge a {
    color: white;
}
.material-compare-chart {
    width: 100%;
    height: 450px;
    max-height: 450px;
}

/* RappeX Log – log jako plain text, zalomený do šířky stránky */
.rappex-log {
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.rappex-log-error {
    color: red;
}
.rappex-log-warning {
    color: #e8550b;
}

.table-dark-custom {
    /* border: 2px solid rgb(71, 71, 71); */
    box-shadow: 5px 5px 5px gray;
    /* background-image: linear-gradient(to bottom right, rgb(133, 133, 133) 20%, rgb(219, 219, 219) 60%); */
    background-image: linear-gradient(to bottom right, rgb(233 233 233) 20%, rgb(237 237 237) 60%);
}
.table-dark-custom > tbody > tr > th, .table-dark-custom > thead > tr > th, .table-dark-custom > tfoot > tr > th {
    /* background-image: linear-gradient(to bottom, #686868, #363636);
    color: white;
    border-color: rgb(185, 185, 185); */
    background-image: linear-gradient(to bottom, #e1e1e1, #a5a5a5);
    color: #000000;
    border-color: rgb(193 193 193);
}
.table-dark-custom > tbody > tr > td {
    /* background-color: #bebdbd; */
    color: black;
    border-color: rgb(212, 212, 212);
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.table-bordered-custom {
    border: 1px solid #EBEBEB;
    box-shadow: 5px 5px 5px gray;
}

.table-bordered-custom > tbody > tr > td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.table-bordered-custom > tbody > tr > td > input {
    height: 2.05rem !important;
}

.bg-orange {
    /* background-color: #e8550b !important; */
    background-image: linear-gradient(to bottom, #fa9460, #e8550b);
    color: white;
}
.text-orange {
    color: #e8550b;
}
.value-changed {
    color: red !important;
    font-weight: bold;
}
input.value-changed {
    border: 1px solid red;
}
.bg-orange2 {
    /* background-color: #f372322d !important; */
    background-image: linear-gradient(to right, #fa936000 40%, #e8370b48);
}
.bg-green {
    /* background-color: #e8550b !important; */
    background-image: linear-gradient(to bottom, #91fa60, #0fbd09);
}
.bg-yellow {
    /* background-color: #ffc000 !important; */
    background-image: linear-gradient(to bottom, #e9ddbf, #ffc000) !important;
    color: black !important;
}
.bg-red {
    /* background-color: #e00c0f !important; */
    background-image: linear-gradient(to bottom, #f58789, #e00c0f);
    color: white;
}
.bg-blue {
    background-image: linear-gradient(to bottom, #87c9f5, #210ce0);
    color: white;
}

.search-button {
    color: white;
    padding: 7px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 16px !important;
    /* height: 60%; */
    margin-top: 1.3rem !important;
    background-color: #929292;
    border-color: #929292;
    font-family: 'Inter', sans-serif;
}
.search-button:hover {
    /* box-shadow: inset 0px 0px 5px black;
    background-image: linear-gradient(to bottom right, #696868 20%, #4e4e4e 60%);
    border-color: black;
    color: lightgray; */
    background-color: #686767;
}

input[type="range"] {
    appearance: none;
    background-image: linear-gradient(to right, rgb(219, 219, 219), rgb(133, 133, 133) 30%);
    fill: #e8550b;
    stroke: none;
    border-radius: 20px;
    border: 1px solid white;
    overflow: hidden;
}
input[type="range"]::-webkit-slider-thumb {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    height: 20px;
    width: 20px;
    background-color: white;
    border-radius:  50%;
    border: 2px solid white;
    box-shadow: -407px 0 0 400px #e8550b;
    /* background-image: url("/public/images/X.png"); */
    background-size: cover;
    cursor: pointer;
  }

  .hidden {
    visibility: hidden;
  }
  .hidden_total {
    visibility: hidden;
    display: none;
  }

  /* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #363636; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #555; 
    border-radius: 20px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #727272; 
  }

  ul.no-bullets {
    list-style-type: upper-roman; /* Remove bullets */
    padding-left: 20px; 
    margin: 0px; 
  }

  .swal2-title {
    text-decoration: none !important;
  }

  .swal2-container {
    z-index: 2300;
  }

.expandable_input:focus {
    width: 350px;
    outline: none;
}

/* Varianta pro tabulku materiálů v kalkulátoru. Roztažený input "vyskočí" nad sousední buňky - v toku by
   roztáhl celý sloupec a tabulka by vytekla z obrazovky. Bez top/left zůstane na svém místě, z-index ho dá nad sousedy. */
.expandable_input2:focus {
    width: 200px;
    position: absolute;
    z-index: 10;
    outline: none;
}

.expandable_input2 {
    transition: all 0s ease 0s;
}

/* V tabulce materiálů kalkulátoru roztažený název vyskočí nad sousední buňky místo roztažení tabulky.
   Jen tady - jinde (přehled kalkulací, tooling) se expandable_input chová dál po staru. */
#material_table .expandable_input:focus {
    position: absolute;
    z-index: 10;
}

.expandable_input {
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
}

/* Stejně jako expandable_input2 - roztažený input vyskočí nad sousední buňky a neodsune zbytek tabulky */
.expandable_input_small:focus {
    width: 125px;
    position: absolute;
    z-index: 10;
    outline: none;
}

.expandable_input_small {
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
}

[data-href] {
    cursor: pointer;
}

.modal-xxl {
    max-width: 1100px;
}

.modal-xxxl {
    max-width: 1600px;
    margin-top: 150px !important;
}

.nav-link {
    background-color: #ebebeb;
    color: gray !important;
    border-left: 1px solid rgb(212, 212, 212) !important;
    border-right: 1px solid rgb(212, 212, 212) !important;
}
.rowSelect {
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -o-transform: scale(1.5); /* Opera */
    transform: scale(1.5);
    margin-top: 5px;
}
.bigCheckbox {
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -o-transform: scale(1.5); /* Opera */
    transform: scale(1.5);
    margin-top: 5px;
}
.btn-group2 {
    display: contents !important;
}
.label-custom {
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    color: gray;
    margin-bottom: 0px;
}
/* Logo firmy v hlavičce štítkovacích stránek */
.customer-logo {
    margin-bottom: 20px;
}
th {
    text-transform: uppercase;
    color: #808080;
}
.special-bonus-1 {
    /* background-image: linear-gradient(to bottom right, rgb(236, 54, 54) 20%, rgb(150, 2, 2) 60%); */
    background-color: transparent;
    border-radius: 3px;
    border: 2px solid #3275CA;
    color: #3275CA;
    font-weight: bold;
    margin: 5px;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
}
.special-bonus-2 {
    /* background-image: linear-gradient(to bottom right, rgb(255, 134, 22) 20%, rgb(255, 94, 0) 60%); */
    background-color: transparent;
    border-radius: 3px;
    border: 2px solid #D8A613;
    color: #D8A613;
    font-weight: bold;
    margin: 5px;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
}
.special-bonus-3 {
    /* background-image: linear-gradient(to bottom right, rgb(255, 134, 22) 20%, rgb(255, 94, 0) 60%); */
    background-color: transparent;
    border-radius: 3px;
    border: 2px solid #D8A613;
    color: #D8A613;
    font-weight: bold;
    margin: 5px;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
}
.special-bonus-4 {
    /* background-image: linear-gradient(to bottom right, rgb(236, 54, 54) 20%, rgb(150, 2, 2) 60%); */
    background-color: #E53E3E;
    border-radius: 3px;
    color: white;
    font-weight: bold;
    margin: 5px;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
}
.special-bonus-5 {
    /* background-image: linear-gradient(to bottom right, rgb(179, 178, 178) 20%, rgb(138, 138, 138) 60%); */
    background-color: transparent;
    border-radius: 3px;
    color: #979797;
    border: 2px solid #979797;
    font-weight: bold;
    margin: 5px;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
}
.special-bonus-6 {
    /* background-image: linear-gradient(to bottom right, #227522 20%, #009200 60%); */
    background-color: #38A169;
    border-radius: 3px;
    color: white;
    font-weight: bold;
    margin: 5px;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
}
.special-bonus-7 {
    /* background-image: linear-gradient(to bottom right, #227522 20%, #009200 60%); */
    background-color: transparent;
    border-radius: 3px;
    border: 2px solid #9A50C8;
    color: #9A50C8;
    font-weight: bold;
    margin: 5px;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
}
/* Purchase Request status badges */
.purchase-status-1 { background-color: transparent; border-radius: 3px; border: 2px solid #3275CA; color: #3275CA; font-weight: bold; margin: 5px; padding: 2px 5px; text-transform: uppercase; font-size: 12px; display: inline-block; }
.purchase-status-2 { background-color: transparent; border-radius: 3px; border: 2px solid #D8A613; color: #D8A613; font-weight: bold; margin: 5px; padding: 2px 5px; text-transform: uppercase; font-size: 12px; display: inline-block; }
.purchase-status-3 { background-color: transparent; border-radius: 3px; border: 2px solid #D8A613; color: #D8A613; font-weight: bold; margin: 5px; padding: 2px 5px; text-transform: uppercase; font-size: 12px; display: inline-block; }
.purchase-status-4 { background-color: #E53E3E; border-radius: 3px; color: white; font-weight: bold; margin: 5px; padding: 2px 5px; text-transform: uppercase; font-size: 12px; display: inline-block; }
.purchase-status-5 { background-color: #38A169; border-radius: 3px; color: white; font-weight: bold; margin: 5px; padding: 2px 5px; text-transform: uppercase; font-size: 12px; display: inline-block; }
.purchase-status-6 { background-color: #6C8EBF; border-radius: 3px; color: white; font-weight: bold; margin: 5px; padding: 2px 5px; text-transform: uppercase; font-size: 12px; display: inline-block; }
.purchase-status-7 { background-color: #2D7D46; border-radius: 3px; color: white; font-weight: bold; margin: 5px; padding: 2px 5px; text-transform: uppercase; font-size: 12px; display: inline-block; }

/* Počet + ikona košíku ve sloupci "Ve stejném obchodě" na Požadavcích k objednání – rámeček a barva podle stavu
   požadavku, aby jednotlivé skupiny byly opticky oddělené jako chipy stavů výš.
   Stačí stavy pod schváleno (1-4), vyšší se v tom sloupci nezobrazují. */
.purchase-status-icon-1, .purchase-status-icon-2, .purchase-status-icon-3, .purchase-status-icon-4 {
    background-color: transparent; border-radius: 3px; border: 2px solid; font-weight: bold;
    margin: 2px; padding: 2px 5px; font-size: 12px; display: inline-block; white-space: nowrap;
}
.purchase-status-icon-1 { border-color: #3275CA; color: #3275CA; }
.purchase-status-icon-2 { border-color: #D8A613; color: #D8A613; }
.purchase-status-icon-3 { border-color: #D8A613; color: #D8A613; }
.purchase-status-icon-4 { border-color: #E53E3E; color: #E53E3E; }

.btn-in-table-row {
    padding: 1px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    font-size: 20px !important;
    margin-top: 0px !important;

}
.pageTopBar {
    background-image: linear-gradient(to left, #e8e8eb, #dbdbdb 90%);
}
.filterField {
    font-size: 20px !important;
    height: 44px !important;
    border: 1px solid transparent;
    border-radius: 5px !important;
    width: 100%;
}
.alert {
    position: absolute;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    left: 10px;
    top: -50px;
    width: 98%;
    height: 40px;
    z-index: 100;
}
.basic_hover:hover {
    filter: brightness(1.1); /* Darken the text color */
    text-decoration: underline;
    text-decoration-color: #e00c0f;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.grade_input {
    width: 45px;
    text-align: center !important;
    -moz-appearance: textfield;
    font-size: 16px;
}
.grade_selectbox {
    width: 75px;
    text-align: center !important;
    font-size: 14px;
}
.prev_grade {
    font-size: 10px;
}
.grade_input::-webkit-outer-spin-button, .grade_input::-webkit-inner-spin-button {
    appearance: textfield;
    -webkit-appearance: none;
}
.grade_input:read-only {
    background-color: transparent;
    border: none;
}
.light-placeholder::placeholder {
    color: rgb(189, 186, 186);
}
.light-placeholder {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}
.flag {
    width: 40px;
    height: auto;
    box-shadow: 0 3px 4px #3f3f3f;
}
.flag:hover {
  transform: scale(1.1);
}
.grossMarginDatatable, .grossMarginDatatable2 {
    table-layout: fixed;
    width: 100% !important;
}
.table > tfoot > tr {
    background-color:rgb(245, 244, 244);
}

.switch_button {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.switch_text {
    color: rgb(82, 82, 82);
    font-size: 14px;
    font-weight: bold;
    margin-top: 8px !important;
    margin-right: 6px !important;
}

/* skrytý checkbox */
.switch_button input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* tělo switche */
.slider_button {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  transition: 0.25s;
  border-radius: 999px;
}

/* kolečko */
.slider_button::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s;
  border-radius: 50%;
}

/* zapnuto */
.switch_button input:checked + .slider_button {
  background-color: #f0831d;
}

.switch_button input:checked + .slider_button::before {
  transform: translateX(24px);
}

/* disabled */
.switch_button input:disabled + .slider_button {
  opacity: 0.5;
  cursor: not-allowed;
}

.sticky_thead {
    position: sticky;
    top: 0;
    background: white;
    /* důležité */
    z-index: 100;
}
.sticky_table_wrapper {
    max-height: 70vh;
    overflow-y: auto;
}

.table-compact > tbody > tr > td {
    padding-top: 4px !important;
    padding-bottom: 0px !important;
}

/* Tlačítko historie / plánovaných změn mzdové kategorie - signalizace pending changes */
.has-pending-change {
    color: #f8ac59 !important;
}
.has-pending-change i {
    font-size: 1.2em;
}

/* Modal historie mzdové kategorie - musí být nad changeSalaryModal kvůli pořadí v DOM */
#salaryChangesHistoryModal {
    z-index: 2262 !important;
}


@-moz-document url-prefix() {
    .navbar-static-side {
        scrollbar-width: thin;
    }
    html {
        scrollbar-width: thin;
    }
}

/* ===========================================================
   Porovnání SN (Gross Margin - 3. vrstva, klik na sloupec)
   =========================================================== */
.compare-panel .compare-header {
    margin-bottom: 12px;
}
.compare-table {
    table-layout: auto;
    width: 100%;
}
.compare-table thead th {
    background-color: #f4f5f7;
    vertical-align: middle;
}
.compare-table .compare-first-col {
    text-align: left;
    white-space: nowrap;
    width: 1%;
    vertical-align: middle;
}
.compare-table tfoot .compare-first-col {
    text-transform: uppercase;
}
.compare-table .compare-sn-col {
    min-width: 160px;
}
.compare-table .compare-sn-label {
    font-weight: 700;
    font-size: 0.95rem;
    word-break: break-all;
}
.compare-table .compare-cell {
    text-align: center;
    vertical-align: middle;
}
.compare-table .compare-cell-main {
    font-weight: 600;
    font-size: 0.95rem;
}
.compare-table .compare-cell-sub {
    font-size: 0.78rem;
    line-height: 1.2;
    margin-top: 2px;
}
.compare-table .compare-time {
    font-variant-numeric: tabular-nums;
}
.compare-table .compare-empty {
    background-color: #fafafa;
}
.compare-table .compare-section-header td {
    background-color: #e8eaed;
    font-size: 0.9rem;
    padding: 6px 12px;
}

pre {
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px 16px;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.4;
}
pre code {
    background: transparent;
    padding: 0;
    color: #333;
    font-family: 'Consolas', 'Courier New', monospace;
}

/* ===================== NOTIFIKACE (zvoneček v top baru) ===================== */
.notification-dropdown {
    position: relative;
}
.notification-dropdown > a {
    position: relative;
    padding: 0 12px !important;
}
/* Kategorie bez aktivních notifikací – ikona zůstává viditelná, jen zašedlá */
.notification-dropdown.is-empty > a {
    opacity: 0.4;
}
.notification-dropdown.is-empty > a:hover {
    opacity: 0.7;
}
.notification-badge {
    position: absolute;
    top: 8px;
    right: 4px;
    background-color: #e53e3e;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    text-align: center;
}
.notification-menu {
    min-width: 320px;
    max-width: 380px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 4px 0;
}
/* Podnadpis skupiny záznamů (např. "RFQ ke schválení" nad výpisem) */
.notification-subhead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #495057;
}
.notification-subhead .notification-label {
    flex: 1;
}
/* Řádek konkrétního záznamu ve výpisu – odsazený pod podnadpisem */
.notification-item.notification-entry {
    padding-left: 30px !important;
    font-weight: 400;
    align-items: flex-start;
}
/* Název + datum ve sloupci pod sebou (název může být dlouhý) */
.notification-entry-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.notification-entry-main .notification-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Datum (změny stavu / vložení) pod názvem */
.notification-date {
    margin-top: 2px;
    font-size: 0.72rem;
    color: #6c757d;
    white-space: nowrap;
}
.notification-item.notification-entry.notification-new {
    font-weight: 600;
}
.notification-menu-title {
    padding: 8px 14px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6c757d;
    border-bottom: 1px solid #e9ecef;
}
.notification-menu-title i {
    margin-right: 6px;
}
.notification-empty {
    padding: 16px;
    text-align: center;
    color: #6c757d;
}
.notification-empty i {
    color: #28a745;
    margin-right: 6px;
}
.notification-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    border-left: 3px solid transparent;
}
.notification-item:hover {
    background-color: #f5f5f5;
    text-decoration: none;
}
.notification-item .notification-label {
    flex: 1;
    color: #333;
}
.notification-item .notification-count {
    background-color: #adb5bd; /* přečteno – šedá */
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 11px;
    text-align: center;
}
.notification-warning { border-left-color: #e8550b; }
.notification-danger  { border-left-color: #e53e3e; }
.notification-info    { border-left-color: #0073e6; }
/* Nové (nepřečtené) – barevná pilulka podle severity */
.notification-new .notification-count { background-color: #e8550b; }
.notification-new.notification-info .notification-count { background-color: #0073e6; }
.notification-new.notification-danger .notification-count { background-color: #e53e3e; }

/* Úklidové listy – grid checkboxů pro výběr pracovníků */
.worker-checkbox-grid {
    column-count: 2;
    column-gap: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px 16px;
    background-color: #fafafa;
}
.worker-checkbox-item {
    break-inside: avoid;
}
.worker-checkbox-item input[type="checkbox"] {
    margin-right: 6px;
}
@media (max-width: 768px) {
    .worker-checkbox-grid {
        column-count: 1;
    }
}

/* „Nové od posledního otevření" – tracking přes localStorage */
.notification-item.notification-new {
    background-color: #fff7ed;
    font-weight: 600;
}
.notification-new-badge {
    background-color: #28a745;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 8px;
    letter-spacing: 0.3px;
}

/* Drag and drop pro řazení skupin v tabulkách (např. Části nabídky v kalkulátoru) */
.drag-handle {
    cursor: grab;
    color: #888;
    font-size: 18px;
}
.drag-handle:hover {
    color: #333;
}
.drag-handle:active {
    cursor: grabbing;
}
.sortable-ghost {
    opacity: 0.4;
    background: #f0f8ff;
}
.sortable-chosen {
    background: #fffceb;
}

/* ========================================
   Mastermodel labels — strom forem 300/350
   ======================================== */
#mastermodelTreeModal .modal-form-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}
.mastermodel-tree-info-bar {
    padding: 8px 12px;
    margin-bottom: 12px;
    background: #f1f5f9;
    border-radius: 4px;
    font-size: 13px;
}
.mastermodel-tree-info {
    color: #555;
}
.mastermodel-tree-info .selected-count {
    font-weight: 600;
    color: #1a73e8;
}
.modal-tree-container .mastermodel-tree {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 4px;
    padding: 8px 12px;
    max-height: 60vh;
    overflow-y: auto;
}
.tree-node {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: 3px;
}
.tree-node:hover {
    background: #eef3f9;
}
.tree-node-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    width: 100%;
    font-weight: normal;
}
.tree-checkbox {
    transform: scale(1.2);
    margin-right: 4px;
}
.tree-skupzbo-badge {
    display: inline-block;
    min-width: 38px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    background: #d0d7de;
    color: #1f2328;
}
.tree-node-skupzbo-300 .tree-skupzbo-badge {
    background: #fff4ce;
    color: #6b5800;
}
.tree-node-skupzbo-350 .tree-skupzbo-badge {
    background: #d1e7dd;
    color: #0a5538;
}
.tree-node-skupzbo-250 .tree-skupzbo-badge {
    background: #cfe2ff;
    color: #084298;
}
.tree-regcis {
    font-family: monospace;
    font-weight: 600;
    min-width: 110px;
}
.tree-name {
    color: #333;
    flex: 1;
}
.tree-strana,
.tree-mesic {
    font-size: 11px;
    color: #666;
    background: #fff;
    border: 1px solid #d0d7de;
    padding: 1px 6px;
    border-radius: 3px;
}

/* Detailový footer nákupních požadavků — při více stavech je akčních tlačítek moc a přetékaly z modalu, ať zalomí na další řádek */
.modal-footer-wrap {
    flex-wrap: wrap;
}

/* Našeptávač dílů pro zkopírování materiálů v kalkulátoru — nahrazuje nativní <datalist>,
   kterému nejde nastavit šířka ani počet viditelných řádků */
.materials-autocomplete {
    position: relative;
}

.materials-list-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    width: 800px;
    max-width: 90vw;
    max-height: 400px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #e7eaec;
}

.materials-list-item {
    display: block;
    padding: 4px 10px;
    border-bottom: 1px solid #f1f1f1;
    color: #000;
}

.materials-list-item:hover,
.materials-list-item.active {
    background-color: #f3f3f4;
    color: #000;
    text-decoration: none;
}

/* Obal pro Chart.js grafy s pevnou výškou. Výška musí být na obalu, ne na <canvas> - s inline výškou
   na canvasu a maintainAspectRatio: false se graf při každém překreslení nafoukne a roste donekonečna */
.chart-container {
    position: relative;
    height: 450px;
}

/* Vodorovný posuvník pro tabulky s hodně sloupci (např. známky po měsících za celou historii) */
.table-scroll-x {
    overflow-x: auto;
}

/* Alert v horní liště – že je přepnuto na jiného uživatele, se nesmí dát přehlédnout.
   Selektory musí být přes .navbar-top-links, protože Inspinia dává položkám lišty
   natvrdo padding 20px a min-height 50px, což by ten odkaz rozhodilo. */
.navbar-top-links li.impersonation-bar {
    /* Fixně na střed obrazovky – v liště je vpravo mezi ostatními položkami, tady se z toho vyvazuje */
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2045;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    /* Barvy jsou stejné jako v hlavním menu: pozadí #363636, běžný text #a7b1c2, zvýrazněný bílý */
    background-color: #363636;
    color: #a7b1c2;
    /* Písmo jako položky menu – Inter dědí z body, 13px a polotučné */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    /* Stín, aby to vypadalo vystouplé nad lištou */
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.impersonation-bar > i {
    font-size: 17px;
    line-height: 1;
}

/* Jméno bílé jako aktivní položka menu, velké počáteční písmeno řeší bootstrapí text-capitalize */
.impersonation-user {
    color: #fff;
}

/* Návrat je obyčejný odkaz – v menu se podtrhává červeně, tady stejně */
.navbar-top-links li.impersonation-bar a {
    display: inline-block;
    min-height: 0;
    margin: 0;
    padding: 0;
    background-color: transparent;
    color: #a7b1c2;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.navbar-top-links li.impersonation-bar a:hover,
.navbar-top-links li.impersonation-bar a:focus {
    background-color: transparent;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: red;
}

.navbar-top-links li.impersonation-bar a i {
    font-size: 13px;
    vertical-align: -1px;
}

/* Sloupce s příznaky ve Správě uživatelů. Proti mini-column nechává nadpis zalomit – víceslovné
   popisky na jednom řádku roztáhnou tabulku přes celou obrazovku a DataTables ji pak jen scrolluje */
.flag-column {
    width: 1%;
    white-space: normal;
    text-align: center;
    vertical-align: middle !important;
}