/*
 * Bootstrap 4 -> 5 compatibility shim
 * Recreates utility classes that were renamed/removed in Bootstrap 5 so the
 * existing markup keeps working without touching hundreds of views.
 * Structural cases (input-group wrappers, custom-control, .close) are handled
 * here best-effort; the remaining ones are migrated in the views directly.
 */

/* ----- Directional spacing (ml/mr/pl/pr -> margin/padding start/end) ----- */
.m-0{margin:0 !important}.m-1{margin:.25rem !important}.m-2{margin:.5rem !important}.m-3{margin:1rem !important}.m-4{margin:1.5rem !important}.m-5{margin:3rem !important}

.ml-0{margin-left:0 !important}.ml-1{margin-left:.25rem !important}.ml-2{margin-left:.5rem !important}.ml-3{margin-left:1rem !important}.ml-4{margin-left:1.5rem !important}.ml-5{margin-left:3rem !important}.ml-auto{margin-left:auto !important}
.mr-0{margin-right:0 !important}.mr-1{margin-right:.25rem !important}.mr-2{margin-right:.5rem !important}.mr-3{margin-right:1rem !important}.mr-4{margin-right:1.5rem !important}.mr-5{margin-right:3rem !important}.mr-auto{margin-right:auto !important}
.pl-0{padding-left:0 !important}.pl-1{padding-left:.25rem !important}.pl-2{padding-left:.5rem !important}.pl-3{padding-left:1rem !important}.pl-4{padding-left:1.5rem !important}.pl-5{padding-left:3rem !important}
.pr-0{padding-right:0 !important}.pr-1{padding-right:.25rem !important}.pr-2{padding-right:.5rem !important}.pr-3{padding-right:1rem !important}.pr-4{padding-right:1.5rem !important}.pr-5{padding-right:3rem !important}

@media (min-width:576px){
  .ml-sm-0{margin-left:0 !important}.ml-sm-1{margin-left:.25rem !important}.ml-sm-2{margin-left:.5rem !important}.ml-sm-3{margin-left:1rem !important}.ml-sm-4{margin-left:1.5rem !important}.ml-sm-5{margin-left:3rem !important}.ml-sm-auto{margin-left:auto !important}
  .mr-sm-0{margin-right:0 !important}.mr-sm-1{margin-right:.25rem !important}.mr-sm-2{margin-right:.5rem !important}.mr-sm-3{margin-right:1rem !important}.mr-sm-4{margin-right:1.5rem !important}.mr-sm-5{margin-right:3rem !important}.mr-sm-auto{margin-right:auto !important}
  .pl-sm-0{padding-left:0 !important}.pl-sm-1{padding-left:.25rem !important}.pl-sm-2{padding-left:.5rem !important}.pl-sm-3{padding-left:1rem !important}
  .pr-sm-0{padding-right:0 !important}.pr-sm-1{padding-right:.25rem !important}.pr-sm-2{padding-right:.5rem !important}.pr-sm-3{padding-right:1rem !important}
}
@media (min-width:768px){
  .ml-md-0{margin-left:0 !important}.ml-md-1{margin-left:.25rem !important}.ml-md-2{margin-left:.5rem !important}.ml-md-3{margin-left:1rem !important}.ml-md-4{margin-left:1.5rem !important}.ml-md-5{margin-left:3rem !important}.ml-md-auto{margin-left:auto !important}
  .mr-md-0{margin-right:0 !important}.mr-md-1{margin-right:.25rem !important}.mr-md-2{margin-right:.5rem !important}.mr-md-3{margin-right:1rem !important}.mr-md-4{margin-right:1.5rem !important}.mr-md-5{margin-right:3rem !important}.mr-md-auto{margin-right:auto !important}
  .pl-md-0{padding-left:0 !important}.pl-md-1{padding-left:.25rem !important}.pl-md-2{padding-left:.5rem !important}.pl-md-3{padding-left:1rem !important}
  .pr-md-0{padding-right:0 !important}.pr-md-1{padding-right:.25rem !important}.pr-md-2{padding-right:.5rem !important}.pr-md-3{padding-right:1rem !important}
}
@media (min-width:992px){
  .ml-lg-0{margin-left:0 !important}.ml-lg-1{margin-left:.25rem !important}.ml-lg-2{margin-left:.5rem !important}.ml-lg-3{margin-left:1rem !important}.ml-lg-auto{margin-left:auto !important}
  .mr-lg-0{margin-right:0 !important}.mr-lg-1{margin-right:.25rem !important}.mr-lg-2{margin-right:.5rem !important}.mr-lg-3{margin-right:1rem !important}.mr-lg-auto{margin-right:auto !important}
  .pl-lg-0{padding-left:0 !important}.pl-lg-3{padding-left:1rem !important}
  .pr-lg-0{padding-right:0 !important}.pr-lg-3{padding-right:1rem !important}
}
@media (min-width:1200px){
  .ml-xl-0{margin-left:0 !important}.ml-xl-2{margin-left:.5rem !important}.ml-xl-3{margin-left:1rem !important}.ml-xl-auto{margin-left:auto !important}
  .mr-xl-0{margin-right:0 !important}.mr-xl-2{margin-right:.5rem !important}.mr-xl-3{margin-right:1rem !important}.mr-xl-auto{margin-right:auto !important}
}

/* ----- Float utilities (left/right -> start/end) ----- */
.float-left{float:left !important}
.float-right{float:right !important}
.float-none{float:none !important}
@media (min-width:576px){.float-sm-left{float:left !important}.float-sm-right{float:right !important}.float-sm-none{float:none !important}}
@media (min-width:768px){.float-md-left{float:left !important}.float-md-right{float:right !important}.float-md-none{float:none !important}}
@media (min-width:992px){.float-lg-left{float:left !important}.float-lg-right{float:right !important}.float-lg-none{float:none !important}}
@media (min-width:1200px){.float-xl-left{float:left !important}.float-xl-right{float:right !important}.float-xl-none{float:none !important}}

/* ----- Text alignment (left/right -> start/end) ----- */
.text-left{text-align:left !important}
.text-right{text-align:right !important}
@media (min-width:576px){.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}
@media (min-width:768px){.text-md-left{text-align:left !important}.text-md-right{text-align:right !important}}
@media (min-width:992px){.text-lg-left{text-align:left !important}.text-lg-right{text-align:right !important}}

/* ----- Borders (left/right) ----- */
.border-left{border-left:1px solid var(--bs-border-color) !important}
.border-right{border-right:1px solid var(--bs-border-color) !important}
.border-left-0{border-left:0 !important}
.border-right-0{border-right:0 !important}

/* ----- Font weight (font-weight-* -> fw-*) ----- */
.font-weight-light{font-weight:300 !important}
.font-weight-lighter{font-weight:lighter !important}
.font-weight-normal{font-weight:400 !important}
.font-weight-bold{font-weight:700 !important}
.font-weight-bolder{font-weight:bolder !important}
.font-italic{font-style:italic !important}

/* ----- AdminLTE 3 text helpers (dropped in AL4; BS5 only ships fw- and fs- utils) ----- */
.text-bold,.text-bold.table td,.text-bold.table th{font-weight:700 !important}
.text-italic{font-style:italic !important}
.text-xs{font-size:.75rem !important}
.text-sm{font-size:.875rem !important}
.text-md{font-size:1rem !important}
.text-lg{font-size:1.25rem !important}
.text-xl{font-size:2rem !important}

/* AdminLTE 3 colour-name text helpers (text-red/green/blue/...), dropped in AL4. */
.text-red{color:#dc3545 !important}
.text-green{color:#28a745 !important}
.text-blue{color:#007bff !important}
.text-light-blue{color:#3c8dbc !important}
.text-aqua{color:#17a2b8 !important}
.text-navy{color:#001f3f !important}
.text-teal{color:#20c997 !important}
.text-olive{color:#3d9970 !important}
.text-lime{color:#01ff70 !important}
.text-yellow{color:#ffc107 !important}
.text-orange{color:#fd7e14 !important}
.text-fuchsia{color:#f012be !important}
.text-purple{color:#6f42c1 !important}
.text-maroon{color:#d81b60 !important}
.text-gray{color:#6c757d !important}
.text-black{color:#000 !important}

/* Row-level colour/weight classes (set on <tr> via DataTableRowCssClass / createdRow)
   must reach the cell text. BS5 .table assigns an explicit colour to each cell, which
   beats a colour merely inherited from the row, so push the row classes down to the
   cells explicitly. */
tr.text-red > th, tr.text-red > td { color:#dc3545 !important }
tr.text-danger > th, tr.text-danger > td { color:var(--bs-danger) !important }
tr.text-green > th, tr.text-green > td { color:#28a745 !important }
tr.text-success > th, tr.text-success > td { color:var(--bs-success) !important }
tr.text-muted > th, tr.text-muted > td { color:#6c757d !important }
tr.text-bold > th, tr.text-bold > td { font-weight:700 !important }

/* ----- Screen-reader only (sr-only -> visually-hidden) ----- */
.sr-only,
.sr-only-focusable:not(:focus){
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ----- Buttons block (btn-block removed) ----- */
.btn-block{display:block;width:100%}
.btn-block+.btn-block{margin-top:.5rem}

/* ----- Badge color variants (badge-* -> text-bg-*) ----- */
/* Use the original AdminLTE 3 / Bootstrap 4 palette (BS5 changed success/info/dark). */
.badge-primary{color:#fff;background-color:#3c8dbc}
.badge-secondary{color:#fff;background-color:#6c757d}
.badge-success{color:#fff;background-color:#28a745}
.badge-danger{color:#fff;background-color:#dc3545}
.badge-warning{color:#1f2d3d;background-color:#ffc107}
.badge-info{color:#fff;background-color:#17a2b8}
.badge-light{color:#1f2d3d;background-color:#f8f9fa}
.badge-dark{color:#fff;background-color:#343a40}
.badge-pill{border-radius:50rem}

/* ----- Form group (removed in BS5) ----- */
.form-group{margin-bottom:1rem}
.form-row{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}
.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}

/* ----- Input group append/prepend (wrappers removed in BS5) ----- */
.input-group-append,
.input-group-prepend{display:flex}
.input-group-append{margin-left:-1px}
.input-group-prepend{margin-right:-1px}
.input-group-append .btn,
.input-group-prepend .btn{position:relative;z-index:2}

/* ----- Custom form controls (custom-* -> form-check/form-select) ----- */
.custom-control{position:relative;display:block;min-height:1.5rem;padding-left:1.5rem}
.custom-control-inline{display:inline-flex;margin-right:1rem}
.custom-control-input{position:absolute;left:0;z-index:-1;width:1rem;height:1.25rem;opacity:0}
.custom-control-label{position:relative;margin-bottom:0;vertical-align:top;cursor:pointer}
.custom-control-label::before{position:absolute;top:.25rem;left:-1.5rem;display:block;width:1rem;height:1rem;content:"";background-color:#fff;border:1px solid var(--bs-border-color)}
.custom-checkbox .custom-control-label::before{border-radius:.25rem}
.custom-switch .custom-control-label::before{left:-2.25rem;width:1.75rem;border-radius:.5rem}
.custom-switch{padding-left:2.25rem}
.custom-control-input:checked~.custom-control-label::before{color:#fff;border-color:var(--bs-primary);background-color:var(--bs-primary)}
.custom-control-input:checked~.custom-control-label::after{position:absolute;top:.25rem;left:-1.5rem;display:block;width:1rem;height:1rem;content:"";background:no-repeat 50%/50% 50%}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e")}
/* Switch knob (the sliding circle). The generic checkbox ::after above only renders
   on :checked, so a switch had no visible handle; define the round knob for the switch
   in both states and slide it to the right when checked. Must come after the generic
   rule so it wins for .custom-switch. */
.custom-switch .custom-control-label::after{position:absolute;top:calc(.25rem + 2px);left:calc(-2.25rem + 2px);display:block;width:calc(1rem - 4px);height:calc(1rem - 4px);content:"";background-color:#adb5bd;background-image:none;border-radius:.5rem;transition:transform .15s ease-in-out,background-color .15s ease-in-out}
.custom-switch .custom-control-input:checked~.custom-control-label::after{left:calc(-2.25rem + 2px);top:calc(.25rem + 2px);width:calc(1rem - 4px);height:calc(1rem - 4px);background-color:#fff;background-image:none;transform:translateX(.75rem)}
.custom-select{display:inline-block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem 1.75rem .375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;vertical-align:middle;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;border:1px solid #ced4da;border-radius:.25rem;appearance:none}
.custom-select-sm{height:calc(1.5em + .5rem + 2px);padding-top:.25rem;padding-bottom:.25rem;font-size:.875rem}
.custom-file{position:relative;display:inline-block;width:100%;height:calc(1.5em + .75rem + 2px);margin-bottom:0}
.custom-file-input{position:relative;z-index:2;width:100%;height:calc(1.5em + .75rem + 2px);margin:0;opacity:0}
.custom-file-label{position:absolute;top:0;right:0;left:0;z-index:1;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem}
.custom-file-label::after{position:absolute;top:0;right:0;bottom:0;z-index:3;display:block;padding:.375rem .75rem;line-height:1.5;color:#495057;content:"Procházet";background-color:#e9ecef;border-left:inherit;border-radius:0 .25rem .25rem 0}

/* ----- Native <select class="form-control"> -> render like BS5 .form-select -----
 * In BS5 a native select needs .form-select to get the dropdown caret/padding.
 * Much of the codebase (and the DataTable enum/bool filters) still emits
 * <select class="form-control">, so we restyle those to match BS5 selects.
 * Multiple/size selects keep the plain list look. Select2-enhanced selects are
 * hidden by Select2, so this only affects genuine native selects. */
select.form-control:not([multiple]):not([size]){
  padding:.375rem 2.25rem .375rem .75rem;
  -moz-padding-start:calc(.75rem - 3px);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:16px 12px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
select.form-control-sm:not([multiple]):not([size]){
  padding-right:2rem;
  background-position:right .5rem center;
}
/* Some compact inline selects (e.g. the filter-builder operator pickers) set their
   own tiny padding via an inline style, which overrides the right padding above and
   leaves the option text running under the dropdown caret. Force room for the caret. */
select.form-control.d-inline-block:not([multiple]):not([size]){
  padding-right:1.6rem !important;
  background-position:right .4rem center !important;
}

/* ----- Close button (.close -> .btn-close) ----- */
/* BS5 .modal-header is a flexbox, where float:right is ignored and the button ends
   up right next to the title. margin-left:auto pushes it to the right edge in the
   flex header, while float:right still handles any non-flex usage. */
.close{
  float:right;
  margin-left:auto;
  font-size:1.5rem;
  font-weight:700;
  line-height:1;
  color:#000;
  text-shadow:0 1px 0 #fff;
  opacity:.5;
  background:transparent;
  border:0;
  padding:0;
}
.close:hover{color:#000;text-decoration:none;opacity:.75}

/* ----- Dropdown menu alignment (dropdown-menu-right -> dropdown-menu-end) ----- */
.dropdown-menu-right{right:0;left:auto}
.dropdown-menu-left{right:auto;left:0}

/* ----- No gutters (removed -> g-0) ----- */
.no-gutters{margin-right:0;margin-left:0}
.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}

/* ----- Bootstrap 4 reboot defaults that BS5 changed ----- */
/* BS5 underlines links by default; BS4/AdminLTE 3 did not. */
a{text-decoration:none}

/* BS4 gave every <label> a bottom margin; BS5 removed it. Restoring it keeps the
   old form rhythm and the absolutely-positioned copy icons aligned. */
label{margin-bottom:.5rem}
.form-check-label,.form-check label,.custom-control-label{margin-bottom:0}
/* AdminLTE 3 made every form label bold (dropped in AL4); restore it. */
label:not(.form-check-label):not(.custom-file-label):not(.custom-control-label){font-weight:700}

/* BS5 only greys out :disabled controls; BS4 also greyed [readonly]. */
.form-control[readonly]:not(.flatpickr-input){background-color:#e9ecef;opacity:1}

/* ----- .btn-default (AdminLTE 3 light button, dropped in BS5) ----- */
.btn-default{
  color:#1f2d3d;
  background-color:#f4f6f9;
  border-color:#ced4da;
}
.btn-default:hover{
  color:#1f2d3d;
  background-color:#e2e6ea;
  border-color:#c1c9d0;
}
.btn-default:focus,.btn-default.focus{
  box-shadow:0 0 0 .2rem rgba(206,212,218,.5);
}
.btn-default:active,.btn-default.active{
  background-color:#dae0e5;
  border-color:#b1bbc4;
}

/* ----- Cards: AdminLTE 3 spacing between stacked blocks ----- */
.card{margin-bottom:1rem}

/* Restore Bootstrap 4 / AdminLTE 3 inner spacing (BS5 tightened these). */
.card{
  --bs-card-spacer-y:1.25rem;
  --bs-card-spacer-x:1.25rem;
  --bs-card-cap-padding-y:.75rem;
  --bs-card-cap-padding-x:1.25rem;
}

/* BS5 table cell padding is .5rem; BS4 / AdminLTE 3 used .75rem. */
.table{
  --bs-table-cell-padding-y:.75rem;
  --bs-table-cell-padding-x:.75rem;
}

/* ----- Row gutters on non-column children -----
 * BS5 applies the row gutter (padding) to EVERY direct child of .row, while BS4
 * only padded actual columns. Modal <form> wrappers placed between buttons in a
 * .row therefore eat horizontal space in BS5 and push buttons onto a new line.
 * Neutralise width for such wrappers (forms without a col-* class). */
.row > form:not([class*="col-"]){
  padding-left:0;
  padding-right:0;
  flex:0 0 0;
  min-width:0;
}

/* ----- AL3 .content-header (renamed .app-content-header in AL4) still used in a view ----- */
.content-header{padding:.75rem .5rem .25rem}
.content-header h1{font-size:1.8rem;margin:0}
