/* =====================================================================================
   е-Портал ПУ · pu3-vendor.css
   Новият дизайн за добавките, които страниците ползват: bootstrap-table, bootstrap-datepicker,
   select2, chosen, jQuery UI, както и Bootstrap класовете, които те генерират сами
   (.btn, .dropdown-menu, .pagination, .form-control, .table…). Токените са от pu3.css.
   ===================================================================================== */

/* ---------- Bootstrap класове, които генерират добавките (ограничени до новата обвивка) ---------- */
.pu-app .btn, .pu-auth .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid #c9d3df;
  background: var(--surface); color: var(--blue); font: 700 14px/1.2 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.pu-app .btn:hover { background: var(--blue-50); color: var(--ink); }
.pu-app .btn-primary, .pu-app .btn-info, .pu-app .btn-success { background: var(--blue); border-color: var(--blue); color: #fff; }
.pu-app .btn-primary:hover, .pu-app .btn-info:hover, .pu-app .btn-success:hover { background: var(--ink); color: #fff; }
.pu-app .btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.pu-app .btn-warning { background: var(--warn-bg); border-color: #e7cf9c; color: var(--warn-ink); }
.pu-app .btn-sm, .pu-app .btn-xs { min-height: 34px; padding: 0 10px; font-size: 13.5px; }
.pu-app .btn-group { display: inline-flex; flex-wrap: wrap; gap: 6px; position: relative; }
.pu-app .btn[disabled], .pu-app .btn.disabled { opacity: .55; cursor: not-allowed; }
.pu-app .caret { display: inline-block; width: 0; height: 0; border-top: 5px solid; border-left: 4px solid transparent; border-right: 4px solid transparent; }

.pu-app .form-control {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: 15px var(--sans);
}
.pu-app textarea.form-control { padding: 10px 12px; min-height: 96px; }
.pu-app .form-control:focus { border-color: var(--blue); outline: 3px solid rgba(18, 63, 102, .18); outline-offset: 0; }
.pu-app .input-group { display: flex; align-items: stretch; }
.pu-app .input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pu-app .input-group-addon, .pu-app .input-group-btn > .btn { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--field); border-left: 0; background: var(--paper-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.pu-app .dropdown-menu {
  display: none; position: absolute; z-index: 60; top: calc(100% + 4px); right: 0; min-width: 200px; max-height: 320px; overflow: auto;
  margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.pu-app .open > .dropdown-menu { display: block; }
.pu-app .dropdown-menu > li > a, .pu-app .dropdown-menu > li > label, .pu-app .dropdown-item {
  display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14.5px; cursor: pointer;
}
.pu-app .dropdown-menu > li > a:hover, .pu-app .dropdown-menu > li > label:hover, .pu-app .dropdown-item:hover { background: var(--blue-50); }
.pu-app .dropdown-menu input[type=checkbox] { accent-color: var(--blue); width: 16px; height: 16px; }

.pu-app .pagination { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pu-app .pagination > li > a, .pu-app .pagination .page-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px;
}
.pu-app .pagination > .active > a, .pu-app .pagination .active .page-link { background: var(--ink); border-color: var(--ink); color: #fff; }
.pu-app .pagination > .disabled > a { opacity: .45; pointer-events: none; }

.pu-app .table { width: 100%; border-collapse: collapse; background: var(--surface); }
.pu-app .table > thead > tr > th, .pu-app .table th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2); font-weight: 700; vertical-align: bottom; }
.pu-app .table > tbody > tr > td, .pu-app .table td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); font-size: 14.5px; vertical-align: middle; }
.pu-app .table-hover > tbody > tr:hover > td { background: #fcfbf8; }
.pu-app .table-striped > tbody > tr:nth-child(odd) > td { background: var(--paper-2); }
.pu-app .table-bordered { border: 1px solid var(--line); }
.pu-app .table-bordered td, .pu-app .table-bordered th { border: 1px solid var(--line-2); }

.pu-app .alert { padding: 14px 16px; border-radius: var(--radius); background: var(--info-bg); color: var(--info-ink); margin-bottom: 14px; font-size: 15px; }
.pu-app .alert-success { background: var(--ok-bg); color: var(--ok-ink); }
.pu-app .alert-warning { background: var(--warn-bg); color: var(--warn-ink); }
.pu-app .alert-danger { background: var(--bad-bg); color: var(--bad-ink); }
.pu-app .label, .pu-app .badge { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; border-radius: 99px; padding: 2px 9px; background: var(--neutral-bg); color: var(--neutral-ink); }
.pu-app .label-success, .pu-app .badge-success { background: var(--ok-bg); color: var(--ok); }
.pu-app .label-danger, .pu-app .badge-danger { background: var(--bad-bg); color: var(--bad); }
.pu-app .label-warning, .pu-app .badge-warning { background: var(--warn-bg); color: var(--warn); }
.pu-app .label-info, .pu-app .label-primary, .pu-app .badge-info { background: var(--info-bg); color: var(--info); }

.pu-app .pull-right, .pu-app .float-right { float: right; }
.pu-app .pull-left, .pu-app .float-left { float: left; }
.pu-app .clearfix::after { content: ""; display: table; clear: both; }
.pu-app .hidden, .pu-app .hide { display: none !important; }
.pu-app .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pu-app .text-center { text-align: center; }
.pu-app .text-right { text-align: right; }
.pu-app .text-danger { color: var(--bad); }
.pu-app .text-success { color: var(--ok); }
.pu-app .text-muted { color: var(--muted); }
.pu-app .collapse:not(.in):not(.show) { display: none; }
.pu-app .tab-content > .tab-pane:not(.active) { display: none; }
.pu-app .fade { opacity: 1; }

/* ---------- Стар .modal блок (докато страницата не е преработена към <dialog>) ---------- */
.pu-app .modal { display: none; position: fixed; inset: 0; z-index: 80; background: rgba(10, 32, 54, .45); overflow-y: auto; padding: 24px 16px; }
.pu-app .modal.pu-modal-open { display: block; }
.pu-app .modal-dialog { max-width: 600px; margin: 6vh auto; }
.pu-app .modal-lg { max-width: 900px; }
.pu-app .modal-content { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
.pu-app .modal-header { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); background: var(--surface) !important; color: var(--ink) !important; }
.pu-app .modal-header .close { order: 2; margin-left: auto; border: 0; background: none; font-size: 22px; color: var(--muted); cursor: pointer; width: 40px; height: 40px; }
.pu-app .modal-title { font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 0; }
.pu-app .modal-body { padding: 20px 22px; }
.pu-app .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line-2); background: var(--paper-2); }
body.pu-modal-locked { overflow: hidden; }

/* ---------- bootstrap-table ---------- */
.bootstrap-table { width: 100%; }
.bootstrap-table .fixed-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 0 12px; }
.bootstrap-table .fixed-table-toolbar::after { content: none; }
.bootstrap-table .fixed-table-toolbar .bs-bars { flex: 1 1 auto; }
.bootstrap-table .fixed-table-toolbar .columns { display: flex; flex-wrap: wrap; gap: 6px; float: none !important; order: 3; }
.bootstrap-table .fixed-table-toolbar .search { flex: 1 1 260px; max-width: 360px; float: none !important; margin: 0 !important; }
.bootstrap-table .fixed-table-toolbar .search input {
  width: 100%; height: 42px; padding: 0 12px 0 38px; border: 1px solid var(--field); border-radius: var(--radius-sm); font: 15px var(--sans);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23586474' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E") no-repeat 12px center;
}
.bootstrap-table .fixed-table-container { border: 1px solid var(--line) !important; border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.bootstrap-table .fixed-table-body { overflow-x: auto; }
.bootstrap-table .fixed-table-container .table { margin: 0; border: 0; }
.bootstrap-table .fixed-table-container .table thead th { padding: 0; }
.bootstrap-table .fixed-table-container .table thead th .th-inner { padding: 10px 14px; white-space: nowrap; }
.bootstrap-table .fixed-table-container .table thead th .sortable { cursor: pointer; background-image: none !important; padding-right: 26px; position: relative; }
.bootstrap-table .fixed-table-container .table thead th .sortable::after { content: "↕"; position: absolute; right: 10px; opacity: .45; }
.bootstrap-table .fixed-table-container .table thead th .asc::after { content: "↑"; opacity: 1; }
.bootstrap-table .fixed-table-container .table thead th .desc::after { content: "↓"; opacity: 1; }
.bootstrap-table .fixed-table-container .table thead th .fht-cell { display: none; }
.bootstrap-table .fixed-table-container .table thead th .filter-control { padding: 0 10px 10px; }
.bootstrap-table .fixed-table-container .table thead th .filter-control input,
.bootstrap-table .fixed-table-container .table thead th .filter-control select { width: 100%; height: 34px; border: 1px solid var(--field); border-radius: 8px; padding: 0 8px; font: 13.5px var(--sans); text-transform: none; letter-spacing: 0; }
.bootstrap-table .fixed-table-container .table tbody td { border-left: 0; border-right: 0; }
.bootstrap-table .fixed-table-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; }
.bootstrap-table .fixed-table-pagination::after { content: none; }
.bootstrap-table .fixed-table-pagination .pagination-detail, .bootstrap-table .fixed-table-pagination div.pagination { float: none !important; margin: 0; color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bootstrap-table .fixed-table-pagination .page-list { display: inline-flex; align-items: center; gap: 6px; }
.bootstrap-table .fixed-table-pagination .page-list .btn-group { position: relative; }
.bootstrap-table .fixed-table-pagination .page-list .dropdown-menu { top: auto; bottom: calc(100% + 4px); left: 0; right: auto; min-width: 90px; }
.bootstrap-table .fixed-table-loading:not(.open) { display: none; }
.bootstrap-table .fixed-table-loading { background: rgba(255, 255, 255, .8) !important; }
.bootstrap-table .no-records-found td { text-align: center; color: var(--muted); padding: 30px 14px; }
.bootstrap-table .fixed-table-toolbar .dropdown-menu { right: 0; left: auto; }
.bootstrap-table .fixed-table-toolbar .keep-open .dropdown-menu label { gap: 8px; }
.bootstrap-table .detail-icon { color: var(--blue); }
.bootstrap-table .glyphicon, .bootstrap-table .fa { font-style: normal; }
.bootstrap-table .glyphicon-refresh::before, .bootstrap-table .fa-sync::before, .bootstrap-table .fa-refresh::before { content: "⟳"; }
.bootstrap-table .glyphicon-th::before, .bootstrap-table .fa-th-list::before, .bootstrap-table .fa-columns::before { content: "▦"; }
.bootstrap-table .glyphicon-list-alt::before, .bootstrap-table .fa-toggle-off::before, .bootstrap-table .fa-toggle-on::before { content: "☰"; }
.bootstrap-table .glyphicon-export::before, .bootstrap-table .fa-download::before { content: "⤓"; }
.bootstrap-table .glyphicon-collapse-down::before, .bootstrap-table .fa-caret-square-down::before { content: "⇕"; }
.bootstrap-table .glyphicon-fullscreen::before, .bootstrap-table .fa-arrows-alt::before { content: "⤢"; }

/* ---------- bootstrap-datepicker ---------- */
.datepicker.dropdown-menu { display: block; position: absolute; z-index: 90; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); font: 14px var(--sans); color: var(--text); }
.datepicker table { border-collapse: collapse; }
.datepicker td, .datepicker th { width: 36px; height: 34px; text-align: center; border-radius: 8px; cursor: pointer; border: 0; }
.datepicker th { font-weight: 700; color: var(--muted); }
.datepicker td.day:hover, .datepicker td span:hover, .datepicker th.prev:hover, .datepicker th.next:hover, .datepicker th.datepicker-switch:hover { background: var(--blue-50); }
.datepicker td.active, .datepicker td.active:hover, .datepicker td span.active { background: var(--blue) !important; color: #fff; }
.datepicker td.today { box-shadow: inset 0 0 0 1px var(--brass); }
.datepicker td.old, .datepicker td.new, .datepicker td.disabled { color: #b6ae9c; }
.datepicker td span { display: inline-block; width: 31%; height: 40px; line-height: 40px; margin: 1%; border-radius: 8px; }
.datepicker-dropdown::before, .datepicker-dropdown::after { display: none; }

/* ---------- select2 ---------- */
.select2-container { min-width: 180px; font: 15px var(--sans); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { min-height: 44px; border: 1px solid var(--field) !important; border-radius: var(--radius-sm) !important; background: var(--surface); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: 12px; color: var(--text); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--blue-50); border: 0; border-radius: 99px; padding: 2px 10px; margin-top: 7px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--blue) !important; }
.select2-dropdown { border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow); overflow: hidden; z-index: 95; }
.select2-results__option { padding: 8px 12px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--blue) !important; }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--field) !important; border-radius: 8px; height: 38px; padding: 0 10px; }

/* ---------- chosen ---------- */
/* основна подредба (bootstrap-chosen.css вече не се зарежда): падащото меню е скрито до .chosen-with-drop */
.chosen-container { position: relative; display: inline-block; vertical-align: middle; -webkit-user-select: none; user-select: none; }
.chosen-container .chosen-drop { position: absolute; top: 100%; left: 0; z-index: 1010; width: 100%; background: var(--surface); clip: rect(0,0,0,0); clip-path: inset(100% 100%); }
.chosen-container.chosen-with-drop .chosen-drop { clip: auto; clip-path: none; }
.chosen-container-single .chosen-single { position: relative; display: block; overflow: hidden; white-space: nowrap; text-decoration: none; cursor: pointer; }
.chosen-container-single .chosen-single span { display: block; overflow: hidden; margin-right: 30px; text-overflow: ellipsis; white-space: nowrap; }
.chosen-container-single .chosen-default { color: var(--muted); }
.chosen-container-single .chosen-single div { position: absolute; top: 0; right: 8px; display: block; width: 18px; height: 100%; }
.chosen-container-single .chosen-single div b { display: block; width: 100%; height: 100%; background: none !important; }
.chosen-container-single .chosen-single div b::after { content: "▾"; color: var(--muted); }
.chosen-container-single .chosen-single abbr { position: absolute; top: 0; right: 28px; text-decoration: none; }
.chosen-container-single .chosen-single abbr::after { content: "×"; color: var(--muted); font-size: 18px; }
.chosen-container-single .chosen-search { position: relative; padding: 6px; white-space: nowrap; }
.chosen-container-single .chosen-search input[type=text] { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--field); border-radius: 6px; font: inherit; }
.chosen-container .chosen-results { position: relative; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0 0 6px; max-height: 260px; list-style: none; }
.chosen-container .chosen-results li { display: none; margin: 0; padding: 9px 12px; line-height: 1.3; list-style: none; }
.chosen-container .chosen-results li.active-result { display: list-item; cursor: pointer; }
.chosen-container .chosen-results li.highlighted { color: #fff; }
.chosen-container .chosen-results li.result-selected { font-weight: 700; }
.chosen-container .chosen-results li.no-results { display: list-item; color: var(--muted); }
.chosen-container-multi .chosen-choices { position: relative; overflow: hidden; margin: 0; list-style: none; cursor: text; display: flex; flex-wrap: wrap; gap: 4px; }
.chosen-container-multi .chosen-choices li { list-style: none; }
.chosen-container-multi .chosen-choices li.search-field input[type=text] { border: 0; outline: 0; background: transparent; min-height: 34px; font: inherit; width: auto; }
.chosen-container-multi .chosen-choices li.search-choice { position: relative; }
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close { position: absolute; top: 4px; right: 8px; text-decoration: none; }
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close::after { content: "×"; color: var(--muted); }
.chosen-container .chosen-results li em { font-style: normal; text-decoration: underline; }
.chosen-container { font: 15px var(--sans); min-width: 180px; }
.chosen-container-single .chosen-single { height: 44px; line-height: 42px; border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--surface); box-shadow: none; padding-left: 12px; color: var(--text); }
.chosen-container-single .chosen-single div b { background-position-y: 12px; }
.chosen-container-multi .chosen-choices { min-height: 44px; border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--surface); padding: 4px 6px; }
.chosen-container-multi .chosen-choices li.search-choice { background: var(--blue-50); border: 0; border-radius: 99px; box-shadow: none; padding: 5px 24px 5px 10px; }
.chosen-container .chosen-drop { border: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow); }
.chosen-container .chosen-results li.highlighted { background: var(--blue); }

/* ---------- jQuery UI (datepicker / autocomplete / dialog) ---------- */
.ui-widget { font-family: var(--sans) !important; }
.ui-datepicker { padding: 8px; border: 1px solid var(--line) !important; border-radius: var(--radius); background: var(--surface) !important; box-shadow: var(--shadow); z-index: 90 !important; }
.ui-datepicker .ui-datepicker-header { background: var(--ink); color: #fff; border: 0; border-radius: 8px; }
.ui-datepicker td a, .ui-datepicker td span { text-align: center !important; border-radius: 6px; border: 0 !important; background: none !important; }
.ui-datepicker td a.ui-state-active { background: var(--blue) !important; color: #fff !important; }
.ui-autocomplete { border: 1px solid var(--line) !important; border-radius: var(--radius-sm); box-shadow: var(--shadow); background: var(--surface) !important; padding: 4px; max-height: 300px; overflow: auto; z-index: 95 !important; }
.ui-autocomplete .ui-menu-item-wrapper { padding: 8px 10px; border-radius: 6px; border: 0 !important; }
.ui-autocomplete .ui-state-active { background: var(--blue-50) !important; color: var(--ink) !important; }

@media (max-width: 960px) {
  .bootstrap-table .fixed-table-toolbar .search { max-width: none; }
  .pu-app .modal-dialog { margin: 0 auto; }
}