html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

mark {
    background-color: yellow;
    padding: 0;
    margin: 0;
}

/* MENU */
/* Navbar vždy nad obsahem stránky */
nav.navbar {
    position: relative;
    z-index: 1080;
    /* výš než běžný obsah */
}

/* Pro jistotu i menu samotné */
.navbar .dropdown-menu {
    z-index: 1090;
}

/* Card styles */
.card-body {
    padding: 1.3rem;
}

.text-headline,
.text-headline a {
    font-weight: bold;
    text-align: left;
    padding: 10px 0;
    color: rgb(226, 0, 116);
}

.label-wrap {
    text-wrap: wrap;
    display: flex;
}

h3.section-title {
    font-size: 1.2em;
    margin-bottom: 1em;
    color: rgb(226, 0, 116);
}

h3.section-title-detail {
    font-size: 1.2em;
    color: rgb(0, 0, 0);
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: 1em;
}

.text-bold {
    font-weight: bold;
}

.text-size-small {
    font-size: 0.875em;
}

.text-color-magenta {
    color: rgb(226, 0, 116) !important;
}

.text-color-petroleum {
    color: rgb(64, 144, 159) !important;
}

.nav-link:hover,
.dropdown-item:hover {
    color: rgb(226, 0, 116) !important;
}

.kategorie-popis {
    color: #888;
}

h4.obor-title {
    font-size: 1.1em;
    color: #666;
}

.d-none {
    display: none !important;
}

/* FORMS */
#form-calc .form-control,
#form-char .form-control,
#form-char-b .form-control,
#form-koef .form-control,
#form-vaha .form-control {
    width: 80px;
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-align: center;
}

.form-check-input-red {
    margin-left: 5px !important;
}

.form-check-input-red:checked {
    background-color: darkred !important;
    border-color: darkred !important;
    color: darkred !important;
}

.form-check-input-red::selection {
    background-color: rgba(139, 0, 0, 0.1) !important;
    color: darkred !important;
}

.form-check-input-red:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(139, 0, 0, 0.25);
}

.form-check-input-bigger {
    height: 20px;
    width: 20px;

}

.form-check-label-bigger{
    padding: 3px 0px 0px 3px;
}

.dragging {
    opacity: 0.5;
    border: 2px dashed #999;
    background-color: darkred;
}

.argument-drop-target {
    background-color: #a94442 !important;
    border: 2px dashed #a94442;
}

.argument-list {
    transition: background-color 0.3s ease, border 0.3s ease;
}

/* DRAG AND DROP – náhled položky a cílové listy */
.argument-item.drag-over {
    border: 2px dashed #0d6efd;
    background-color: #e6f0ff;
}

.argument-list.drag-target {
    border: 2px dashed #0d6efd;
    border-radius: 8px;
    background-color: #f8fbff;
    padding: 8px;
}

/* Globální drop marker – náhled pozice vložení */
.drop-marker {
    height: 12px;
    border-top: 2px solid #60a5fa;
    margin: 4px 0;
}

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Argument detail - Toggle */
.argument-toggle:hover {
    color: #0d6efd;
}

/* Argumenty - Background colors */
.bg-arg-filter {
    background-color: #fff9ed;
    /* velmi světlá oranžová */
}

.bg-arg-free {
    background-color: #f3fcf6;
    /* velmi světlá zelená */
}

/* MODAL */
.modal-dialog {
    max-width: 40%;
}

/* Brandované outline primary */
.btn-outline-primary {
    --bs-btn-color: rgb(226, 0, 116);
    --bs-btn-border-color: rgb(226, 0, 116);
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: rgb(226, 0, 116);
    --bs-btn-hover-border-color: rgb(226, 0, 116);
    --bs-btn-focus-shadow-rgb: 10, 191, 83;
    --bs-btn-active-color: white;
    --bs-btn-active-bg: rgb(226, 0, 116);
    --bs-btn-active-border-color: rgb(226, 0, 116);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: rgb(226, 0, 116);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgb(226, 0, 116);
    --bs-gradient: none;
}

/* Button Toggle Collapse */
.btn-toggle-collapse .when-expanded {
    display: none;
}

.btn-toggle-collapse.collapsed .when-collapsed {
    display: inline;
}

.btn-toggle-collapse.collapsed .when-expanded {
    display: none;
}

.btn-toggle-collapse:not(.collapsed) .when-collapsed {
    display: none;
}

.btn-toggle-collapse:not(.collapsed) .when-expanded {
    display: inline;
}

/**************************
 ***     LOGIN PAGE     ***
 **************************/
.vh-center {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
}

.password-toggle {
    cursor: pointer;
}

/**************************
 ***     INDEX PAGE     ***
 **************************/
.tile-card {
    display: block;
    text-decoration: none !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
    height: 100%;
    aspect-ratio: 1 / 1;
}

.tile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.icon-stack {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    margin: 0 auto .75rem auto;
    line-height: 1;
}

.icon-stack i {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.25rem;
    transition: opacity .15s ease;
}

.icon-gray {
    color: #6b7280;
    opacity: 1;
}

.icon-magenta {
    opacity: 0;
}

.tile-card:hover .icon-gray {
    opacity: 0;
}

.tile-card:hover .icon-magenta {
    opacity: 1;
}

.tile-title {
    position: relative;
    height: 1.4em;
    font-weight: 700;
    margin-bottom: .25rem;
    text-align: center;
}

.tile-title .title-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s ease;
    white-space: nowrap;
}

.tile-title .title-gray {
    color: #6b7280;
    opacity: 1;
}

.tile-title .title-magenta {
    opacity: 0;
}

.tile-card:hover .tile-title .title-gray {
    opacity: 0;
}

.tile-card:hover .tile-title .title-magenta {
    opacity: 1;
}

.tile-desc {
    color: #6b7280;
    font-size: .95rem;
    margin: 0;
    text-align: center;
}

.section-block {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* --- EDITACE O/Č (strom) --- */
:root {
    --inactive-tint: rgba(220, 53, 69, 0.02);
    --inactive-border: rgba(220, 53, 69, 0.25);
}

li.draggable[data-active="0"]>.item-row {
    opacity: .55;
}

li.draggable[data-active="0"] {
    background: var(--inactive-tint);
    border-color: var(--inactive-border);
}

/* Kaskáda INACTIVE pro charakteristiky (typ → char → kat) */
li.draggable[data-entity="typ"][data-active="0"]>.item-row {
    opacity: .55;
}

li.draggable[data-entity="typ"][data-active="0"] {
    background: var(--inactive-tint);
    border-color: var(--inactive-border);
}

li.draggable[data-entity="typ"][data-active="0"] .node-children li.draggable[data-entity="char"]>.item-row {
    opacity: .55;
}

li.draggable[data-entity="typ"][data-active="0"] .node-children li.draggable[data-entity="char"] {
    background: var(--inactive-tint);
    border-color: var(--inactive-border);
}

li.draggable[data-entity="typ"][data-active="0"] .node-children li.draggable[data-entity="char"] .node-children li.draggable[data-entity="kat"]>.item-row {
    opacity: .55;
}

li.draggable[data-entity="typ"][data-active="0"] .node-children li.draggable[data-entity="char"] .node-children li.draggable[data-entity="kat"] {
    background: var(--inactive-tint);
    border-color: var(--inactive-border);
}

li.draggable[data-entity="char"][data-active="0"]>.item-row {
    opacity: .55;
}

li.draggable[data-entity="char"][data-active="0"] {
    background: var(--inactive-tint);
    border-color: var(--inactive-border);
}

li.draggable[data-entity="char"][data-active="0"] .node-children li.draggable[data-entity="kat"]>.item-row {
    opacity: .55;
}

li.draggable[data-entity="char"][data-active="0"] .node-children li.draggable[data-entity="kat"] {
    background: var(--inactive-tint);
    border-color: var(--inactive-border);
}

.tree-wrap {
    padding: 24px;
}

.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.sortable-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.sortable-list>.draggable {
    margin: 6px 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.item-row .title {
    font-weight: 600;
}

.item-row .meta {
    color: #6b7280;
    font-size: 12px;
}

.item-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.node-children {
    padding: 8px 12px 12px 24px;
}

.toggle {
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.badge-obor,
.badge-kod {
    background: #ecfeff;
    color: #075985;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 12px;
}

.small-help {
    color: #6b7280;
    font-size: 12px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

ul.sortable-list[data-entity="cin"]:empty {
    min-height: 72px;
    border: 2px dashed #e5e7eb;
    border-radius: 10px;
    padding: 12px;
}

ul.sortable-list[data-entity="cin"].drag-over {
    outline: 2px dashed #60a5fa;
    outline-offset: 4px;
}

.draggable.dragging {
    opacity: .5;
}

.item-row.obor-drop-target {
    box-shadow: inset 0 0 0 2px #60a5fa;
    border-radius: 10px;
}

.item-row.inactive {
    opacity: .4;
}

.item-row.inactive {
    opacity: .55;
}

li.draggable[data-entity="obor"][data-active="0"]>.item-row {
    opacity: .55;
}

li.draggable[data-entity="obor"][data-active="0"] {
    background: var(--inactive-tint);
    border-color: var(--inactive-border);
}

li.draggable[data-entity="obor"][data-active="0"] .node-children li.draggable[data-entity="cin"]>.item-row {
    opacity: .55;
}

li.draggable[data-entity="obor"][data-active="0"] .node-children li.draggable[data-entity="cin"] {
    background: var(--inactive-tint);
    border-color: var(--inactive-border);
}

li.draggable[data-entity="cin"][data-active="0"]>.item-row {
    opacity: .55;
}

li.draggable[data-entity="cin"][data-active="0"] {
    background: var(--inactive-tint);
    border-color: var(--inactive-border);
}

/* Ikony uvnitř btnů nemají chytat click */
.item-actions .btn .bi,
.toggle .bi {
    pointer-events: none;
}

/* ARGUMENTY.PHP */
.argument-list.is-empty {
    min-height: 72px;
    border: 2px dashed #e5e7eb;
    border-radius: 10px;
    padding: 12px;
}

.argument-list .argument-item.inactive {
    opacity: .55;
    background: var(--inactive-tint);
    border-color: var(--inactive-border);
}

.argument-list .argument-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.badge-arg-limit {
    display: inline-block;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1px 6px;
    font-size: 11px;
}

.argument-item .arg-title {
    font-weight: 600;
    font-size: 1rem;
    color: #111;
}

.argument-item.active {
    background: #fff;
}

.arg-chip {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #374151;
}

.arg-chip--limited {
    /*border-color: #dbeafe;
    background: #eff6ff;*/
    border-color: #f7b5ae;
    background-color: #f7b5ae;
    color: #1e3a8a;
}

/* Prázdná kategorie (fallback – stejně používáme .is-empty z JS) */
.argument-list:empty {
    min-height: 72px;
    border: 2px dashed #e5e7eb;
    border-radius: 10px;
    padding: 12px;
}

.argument-list.drag-over {
    outline: 2px dashed #60a5fa;
    outline-offset: 4px;
}

.argument-detail{
    font-size: 0.8em;
    color: #444;
}


/* Button Toggle Collapse */
.btn-toggle-collapse .when-expanded,
.btn-toggle-collapse .when-collapsed {
    display: none;
}

.btn-toggle-collapse[aria-expanded="false"] .when-collapsed {
    display: inline;
}

.btn-toggle-collapse[aria-expanded="true"] .when-expanded {
    display: inline;
}

.text{
    font-weight: bold;
}



/* FORM - produkt_cinnost_form.php */
/* --- Výběrové panely --- */
.filter-panel {
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #fff;
    padding: 16px;
}

.checkbox-grid .form-check {
    margin-bottom: .35rem;
}

.checkbox-grid .form-check-input {
    cursor: pointer;
}

.checkbox-grid .form-check-label {
    cursor: pointer;
}

.btn-white {
    background: #fff;
    border: 1px solid #e5e7eb;
}


/* PRODUKTOVÉ LISTY */
/* Grid rozložení pro seznam podkladů */
ul.sortable-list[data-entity="list"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding-left: 0;
}

ul.sortable-list[data-entity="list"]>li.draggable {
    list-style: none;
}

/* Dlaždice */
.list-tile {
    /*border: 1px solid #ddd;*/
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    background: #f8f9fa;
    /*box-shadow: 0 1px 0 rgba(0, 0, 0, .02);*/
}

.list-tile.is-default {
    background: #eaffea;
    /*border-color: 1px #20c997;*/
    /*opacity: .8;*/
}

.list-tile.is-inactive {
    opacity: .55;
    /*background-color: rgba(10, 191, 83, 0.1);*/
    background: var(--inactive-tint);
    border-color: var(--inactive-border);
}

.list-tile .thumb {
    height: 180px;
    background: #f8f9fa;
    padding: 20px 0px 20px 0px;
    /*border-bottom: 1px solid #eee;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-tile .thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.list-tile .tile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    align-items: center;
    justify-content: center;
     /*border-bottom: 1px solid #eee;*/
}

.list-tile .tile-body {
    padding: 10px;
    text-align: center;
    justify-content: center;
    min-height: 70px;
}

.list-tile .tile-body h6 {
    margin: 2px 0 2px 0;
}


.list-tile.is-default .thumb {
    background: #eaffea;
    /* i horní náhled */
    /*border-bottom-color: #20c997;*/
    /* oddělovač pod náhledem */
}

.list-tile .tile-actions {
    background-color: rgb(225, 225, 225);
}

.list-tile.list-tile.is-default .tile-actions{
    background-color: rgba(10, 191, 83, 0.2);  
}

.list-tile button{
    background-color: rgb(250, 250, 250);

}

.list-tile.is-default button:hover{
    background-color: #51596C;

}

.list-tile.list-tile.is-default button.default {
    background-color: rgba(10, 191, 83, 0.8);
    color: #FFF;
    border-color: rgba(10, 191, 83, 0.8);  
}

.list-tile.list-tile.is-default button {
    background-color: rgba(10, 191, 83, 0.2);
    border-color: rgba(10, 191, 83, 0.8)
}

.list-tile.is-default button:hover {
    background-color: rgba(10, 191, 83, 0.8)
}

.list-tile.list-tile.is-default button[disabled] {
    background-color: rgba(10, 191, 83, 0.02);
    border-color: rgba(10, 191, 83, 0.8);
    opacity: 0.2;
}

.list-tile .badge {
    padding: 0px 5px 0px 5px;
    border-radius: 0px;
    /*font-size: 0.7em;*/
}