html {
    font-size: 14px;
}
.sidebar-mini.sidebar-collapse .app-sidebar {
    min-width: 4.6rem !important;
    max-width: 4.6rem !important;
}
.sidebar-mini.sidebar-collapse:not(.sidebar-without-hover) .app-sidebar:hover .sidebar-brand {
        font-size: 0.9rem !important;
}
[v-cloak] { display: none; }
.cursor-pointer { cursor: pointer; }
.text-muted {
    color: #bbb !important;
}
::placeholder {
    color: #999 !important;
    opacity: 1 !important; /* Firefox reduces placeholder opacity by default */
}
/* Bootstrap 5 stileaza .form-control:disabled (gri deschis), dar nu si [readonly] - in development (AdminLTE 2)
   cele doua aratau identic, deci aplicam acelasi fundal si pe campurile readonly ca sa ramana vizual la fel.
   Atentie: :read-only NU inseamna "are atributul readonly" - se potriveste cu orice element needitabil text
   (label, select, checkbox), de-aia folosim [readonly] (selector de atribut), nu pseudo-clasa :read-only */
.form-control[readonly]:not(.form-control-plaintext) {
    background-color: var(--bs-secondary-bg);
    opacity: 1;
}
/* .btn.disabled (fara atributul disabled, doar clasa - ex. butoane dezactivate dinamic din JS) pune
   pointer-events:none implicit in Bootstrap 5, deci :hover nu se mai declanseaza deloc; redam pointer-events
   ca sa arate iconita de "ban" la hover, la fel ca pe inputurile readonly. Butoanele cu atributul disabled=""
   (nu doar clasa) raman needitabile oricum (browserul le blocheaza), CSS-ul de-aici nu le afecteaza click-ul */
.btn.disabled {
    pointer-events: auto;
    cursor: not-allowed;
}
.ts-wrapper {
    .option {
        padding: 7px;
        line-height: 1.3;
    }
    .option.active {
        background-color: #ccc;
    }
}
.form-select-sm .ts-control {
    padding: .25rem .5rem;
}
.breadcrumb {
    padding: 0;
    margin-bottom: 0;
    line-height: 2.5rem;
    font-size: 12px;
}
/* link-urile din breadcrumb in albastrul butoanelor primary din development */
.breadcrumb a {
    color: var(--cts-primary);
    text-decoration: none;
}
.breadcrumb a:hover {
    color: #72afd2;
}
.breadcrumb-item.active {
    color: #212529bf;
}
.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: 0.5rem;
    color: #212529bf;
    content: "/";
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

/* AdminLTE 2 avea .skin-blue .treeview-menu>li>a { color: #8aa4af; } -
   diferentia vizual itemii din submeniu de cei de top-level. Echivalentul
   pentru sidebar-ul nou (AdminLTE 4 / .nav-treeview). */
.sidebar-menu .nav-item.menu-open .nav-treeview {
    margin: 0 1px;
    background: #ffffff1a;
}
.bottom-auto {
    bottom: auto !important;
}
.bg-maroon {
    background-color: #d81b60 !important;
    color: #fff !important;
}
.bg-purple {
    background-color: #605ca8 !important;
    color: #fff !important;
}
.bg-blue {
    background-color: #3c8dbc !important;
    color: #fff !important;
}

.app-main {
    scrollbar-gutter: stable;
}
/* lățimea și înălțimea taburilor nu se schimbă la activare: un font-weight: bold pe tabul activ îl lărgește, iar taburile
   se reîmpart pe rânduri (unul de pe rândul 2 urcă pe rândul 1); la fel border-top 3px doar pe cel activ. Boldul
   se simulează cu un contur subțire al literelor, care nu schimbă lățimea textului */
.nav-tabs .nav-link {
    border-top: 3px solid transparent;
}
.nav-tabs .nav-link.active {
    border-top: 3px solid #3c8dbc;
    -webkit-text-stroke: .45px currentColor;
    color: #2e6686 !important;
}

/* iconita tabului activ in acelasi albastru ca linia de sus (si peste culorile din admin_module, ex. text-lime);
   iconitele cu culoare de status (ex. HU-GO / ETOLL pe device) isi pastreaza culoarea, ca in development */
.nav-tabs .nav-link.active i.fa:not(.help-info):not(.tab-status-icon) {
    color: #3c8dbc !important;
}
.nav-tabs .nav-link:not(.active):hover {
    border-color: #fff !important;
}
/* anexele / atasamentele implicite din modalul Email contract to client (DataTables Select): bifa pe fiecare rand si
   Select all / Deselect all, ca in celelalte liste cu selectie; modalul se deschide din mai multe pagini, deci regulile
   nu depind de CSS-ul paginii */
#appendixTable :is(th, td).select-checkbox { width: 32px; min-width: 32px; padding-left: 0; padding-right: 0; }
#appendixTable tbody td.select-checkbox { position: relative; cursor: pointer; }
#appendixTable tbody td.select-checkbox:before {
    content: '\f096'; font-family: FontAwesome; font-size: larger; line-height: 1;
    position: absolute; top: 50%; left: 50%; width: auto; height: auto; margin: 0; border: 0; border-radius: 0;
    transform: translate(-50%, -50%);
}
#appendixTable tbody tr.selected td.select-checkbox:before { content: '\f046'; }
#appendixTable tbody tr.selected td.select-checkbox:after { content: none; }
#appendixTable tbody > tr.selected > td { background-color: #B0BED9; }
#appendixTable_wrapper::after { content: ""; display: table; clear: both; }
#appendixTable_wrapper .dt-buttons { float: left; margin: .5rem 0 0; }
#appendixTable_wrapper .dt-buttons .dt-button {
    margin: 0 6px 0 0; padding: .25rem .75rem; font-size: 14px; line-height: 1.5;
    color: #444; background: #f4f4f4; border: 1px solid #ddd; border-radius: .375rem; cursor: pointer;
}
#appendixTable_wrapper .dt-buttons .dt-button:hover { background: #e7e7e7; border-color: #adadad; }
#appendixTable_wrapper .dt-buttons .dt-button.disabled { opacity: .5; cursor: default; }
#appendixTable_wrapper .dataTables_info { float: left; margin: .5rem 1rem 0 0; color: #6c757d; font-size: .875rem; }
table.table tr.table-active td {
    background-color: #B0BED9 !important;
}
table.table tr.table-active:hover td, 
table.table tr:hover td {
    background-color: #56d6f433 !important;
}
.bg-success-light {
    background-color: #19875424!important;
}
.table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
}
/* Cost vs Income (raport + tab-urile client / device): celulele compacte ca table-condensed din development (5px) */
.cost-vs-income-table > :not(caption) > * > * {
    padding: 5px;
}

a {
    color: #3c8dbc;
    text-decoration: none;
}
.sidebar-expand-lg.layout-fixed .app-main {
    background-color: #ecf0f5;
}

:root {
    --cts-primary: #3c8dbc;
    --cts-primary-hover: #367fa9;
    --cts-primary-border-hover: #204d74;
}
.btn-primary {
    --bs-btn-bg: var(--cts-primary);
    --bs-btn-border-color: var(--cts-primary-hover);
    --bs-btn-hover-bg: var(--cts-primary-hover);
    --bs-btn-hover-border-color: var(--cts-primary-border-hover);
    --bs-btn-active-bg: var(--cts-primary-hover);
    --bs-btn-active-border-color: var(--cts-primary-border-hover);
    --bs-btn-disabled-bg: var(--cts-primary);
    --bs-btn-disabled-border-color: var(--cts-primary-hover);
    --bs-btn-focus-shadow-rgb: 60, 141, 188;
}
/* butonul "navy" din AdminLTE 2 (#001f3f, ca .bg-navy), lipsa in Bootstrap 5: Connect / Config din operatiunile pe dispozitiv */
.btn-navy {
    --bs-btn-color: #fff;
    --bs-btn-bg: #001f3f;
    --bs-btn-border-color: #001f3f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #001a35;
    --bs-btn-hover-border-color: #00152b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00152b;
    --bs-btn-active-border-color: #00152b;
    --bs-btn-focus-shadow-rgb: 0, 31, 63;
}
/* cardurile AdminLTE 4 "primary" (ex. card-outline: linia de sus) in albastrul CTS, ca butoanele primary */
.card-primary {
    --lte-card-variant-bg: var(--cts-primary);
    --lte-card-variant-bg-rgb: 60, 141, 188;
}
/* varianta "purple" din AdminLTE 2 (#605ca8, ca .bg-purple), lipsa in AdminLTE 4 (ex. boxul E100 din Accounts) */
.card-purple {
    --lte-card-variant-bg: #605ca8;
    --lte-card-variant-bg-rgb: 96, 92, 168;
    --lte-card-variant-color: #fff;
    --lte-card-variant-color-rgb: 255, 255, 255;
}

/* modalele cu markup Bootstrap 3 au butonul de inchidere inaintea titlului; in Bootstrap 5
   header-ul e flex, deci il mutam in dreapta, ca in development */
.modal-header > .btn-close,
.modal-header > .close {
    order: 2;
    margin-left: auto;
}
/* .close din Bootstrap 3 (pentru butoanele netraduse inca in .btn-close) */
.modal-header > .close {
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    opacity: .2;
}
.modal-header > .close:hover { opacity: .5; }
/* .pull-left din Bootstrap 3 in footer-ul modalelor (ex. "Out of stock"): footer-ul e flex in Bootstrap 5 */
.modal-footer > .pull-left { margin-right: auto; }

/* butonul cu perioada din filtrul de an comun (helper/year_filter.tpl): putin mai mult padding orizontal */
.year-filter button.btn-sm { padding-left: .75rem; padding-right: .75rem; }

/* modalul "Set Custom Period" din filtrul de an comun (helper/year_filter.tpl), cu markup Bootstrap 3,
   si modalele cu aceeasi forma (.cts-period-modal, ex. Export costs din HU-GO RBL):
   aspectul AdminLTE 2, ca in development (X-ul e mutat in dreapta de regula .modal-header de mai sus).
   700px (nu 600px): sub 700 cele 5 butoane de "Quick period" (helper/year-filter.blade.php) se rup pe 2 randuri */
:is([id^=setCustomPeriodModal] .modal-dialog, .modal-dialog.cts-period-modal) { max-width: 700px; }
/* modalele cu o singura data (.cts-date-modal, ex. Generate invoice din HU-GO RBL), mai inguste */
.modal-dialog.cts-date-modal { max-width: 400px; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal, .cts-kupon-modal) .modal-content { font-size: 14px; border-radius: 0; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal, .cts-kupon-modal) .modal-header { padding: 15px; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal, .cts-kupon-modal) .modal-title { font-size: 18px; font-weight: 400; margin: 0; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal, .cts-kupon-modal) .modal-body { padding: 15px; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal) .form-group { margin-bottom: 15px; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal) .form-group:last-child { margin-bottom: 0; }
/* Period begin si Period end pe acelasi rand; restul (ex. Quick period) pe toata latimea */
/* :is([id^=setCustomPeriodModal], .cts-period-modal) .modal-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px; } */
:is([id^=setCustomPeriodModal], .cts-period-modal) .modal-body > .form-group:nth-child(-n+2) { margin-bottom: 0; }
:is([id^=setCustomPeriodModal], .cts-period-modal) .modal-body > .form-group:nth-child(n+3) { grid-column: 1 / -1; margin-top: 15px; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal, .cts-kupon-modal) label { display: block; font-weight: 700; margin-bottom: 5px; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal, .cts-kupon-modal) .form-control { font-size: 14px; height: 34px; border-radius: 0; border-color: #d2d6de; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal, .cts-kupon-modal) .modal-footer { padding: 15px; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal, .cts-kupon-modal) .modal-footer > * { margin: 0 0 0 5px; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal, .cts-kupon-modal) .btn { border-radius: 3px; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal) .btn-default { background-color: #f4f4f4; color: #444; border: 1px solid #ddd; }
:is([id^=setCustomPeriodModal], .cts-period-modal, .cts-date-modal) .btn-default:hover { background-color: #e7e7e7; }

/* modalul "Add KUPON payment" din HU-GO PAB (.cts-kupon-modal): dimensiunile din development (Bootstrap 3 / AdminLTE 2),
   dar putin mai lat (700px), coloane cu 15px padding (Bootstrap 5 are 24px intre coloane, de-aia "Compute" ajungea prea ingust),
   butoane de 34px, iar eticheta goala de deasupra lui "Compute" ocupa un rand, ca butonul sa fie aliniat cu campurile */
.modal-dialog.cts-kupon-modal { max-width: 700px; }
.cts-kupon-modal .row { --bs-gutter-x: 30px; }
.cts-kupon-modal .form-group { margin-bottom: 15px; }
.cts-kupon-modal label:empty { height: 20px; }
.cts-kupon-modal .btn {
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 12px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 1.42857143;
}

/* .btn-default din Bootstrap 3 / AdminLTE 2 (nu exista in Bootstrap 5), folosit de modalele cu markup vechi */
.btn-default {
    --bs-btn-color: #444;
    --bs-btn-bg: #f4f4f4;
    --bs-btn-border-color: #ddd;
    --bs-btn-hover-color: #444;
    --bs-btn-hover-bg: #e7e7e7;
    --bs-btn-hover-border-color: #adadad;
    --bs-btn-active-color: #444;
    --bs-btn-active-bg: #e7e7e7;
    --bs-btn-active-border-color: #adadad;
}
/* .btn-xs din Bootstrap 3 / AdminLTE 2 (nu exista in Bootstrap 5): butoanele mici de actiune din tabele, la marimea din development */
.btn-xs {
    --bs-btn-padding-y: 1px;
    --bs-btn-padding-x: 5px;
    --bs-btn-font-size: 12px;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 3px;
}
/* link-ul din titlul modalelor (ex. "Add task » client") */
.modal-title a { color: var(--cts-primary); text-decoration: none; }
.modal-title a:hover { color: #72afd2; }

/* culorile de text din AdminLTE 2 (iconitele din tabele, ex. call & email log), ca in development */
.text-red { color: #dd4b39 !important; }
.text-yellow { color: #f39c12 !important; }
.text-aqua { color: #00c0ef !important; }
.text-blue { color: #0073b7 !important; }
.text-black { color: #111 !important; }
.text-light-blue { color: #3c8dbc !important; }
.text-green { color: #00a65a !important; }
.text-gray { color: #d2d6de !important; }
.text-navy { color: #001f3f !important; }
.text-teal { color: #39cccc !important; }
.text-olive { color: #3d9970 !important; }
.text-lime { color: #01ff70 !important; }
.text-orange { color: #ff851b !important; }
.text-fuchsia { color: #f012be !important; }
.text-purple { color: #605ca8 !important; }
.text-maroon { color: #d81b60 !important; }

/* SumoSelect foloseste clasa .placeholder, care in Bootstrap 5 e bara gri de "loading" */
.SumoSelect .placeholder {
    display: inline;
    min-height: 0;
    vertical-align: baseline;
    cursor: pointer;
    background-color: transparent;
    opacity: 1;
    color: #aaa;
}

/* datepicker-ul (flatpickr) din filtrul de an apare peste modalele Bootstrap 5 */
.flatpickr-calendar { z-index: 10000; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus,
.flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--cts-primary); border-color: var(--cts-primary); }

a,
.btn-link {
    color: #3c8dbc;
    text-decoration: none;
}
.text-primary {
    color: #3c8dbc !important;
}
.bg-primary {
    background-color:#3c8dbc !important;
    color: #fff !important;
}
.sidebar-expand-lg.layout-fixed .app-main {
    background-color: #ecf0f5;
}
.z-depth-1 {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !important;
    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12) !important;
}
.btn-default {
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd;
}
.btn-default:hover {
    background-color: #e7e7e7;
    border-color: #adadad;
}
.card-primary:not(.card-outline) > .card-header{
    background-color: #3c8dbc !important;
    border-color: #3c8dbc !important;
}
.card.card-outline.card-primary {
    border-top: 3px solid #3c8dbc !important;
}
.form-check-input:checked {
    background-color: #3c8dbc !important;
    border-color: #3c8dbc !important;
}
/* Bootstrap pune pointer-events:none pe checkbox-urile disabled, deci cursorul nu se vede deloc la hover;
   il repunem doar ca sa arate "ban" - disabled tot blocheaza orice interactiune reala */
.form-check-input:disabled {
    pointer-events: auto;
    cursor: not-allowed;
}
label.form-check-label {
    font-weight: 400;
}
.form-check-input:checked ~ .nav-link {
    font-weight: 700;
}
/* tabelul fara jQuery (public/backend/js/cts-table.js): controalele si sortarea ca DataTables din development */
/* randurile de controale fara marginile negative ale .row, altfel apare scroll orizontal in box */
.cts-table-wrapper > .row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
.cts-table-wrapper .cts-table-top { align-items: center; margin-bottom: .5rem; }
.cts-table-wrapper .cts-table-bottom { align-items: center; margin-top: .5rem; }
.cts-table-wrapper :is(.dataTables_length, .dataTables_info, .dataTables_filter) { color: #6c757d; font-size: .875rem; }
.cts-table-wrapper .dataTables_length label, .cts-table-wrapper .dataTables_filter label { font-weight: 400; margin: 0; }
.cts-table-wrapper .dataTables_filter { text-align: right; }
.cts-table-wrapper .dataTables_length select {
    display: inline-block; width: auto; padding: .25rem 2rem .25rem .5rem; font-size: .875rem; margin: 0 .25rem;
    border: 1px solid #dee2e6; border-radius: .375rem; background-color: #fff; appearance: none;
    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 .5rem center; background-size: 12px 9px;
}
.cts-table-wrapper .dataTables_filter input { display: inline-block; width: auto; padding: .25rem .5rem; font-size: .875rem; margin-left: .5rem; border: 1px solid #dee2e6; border-radius: .375rem; }
.cts-table-wrapper .dataTables_paginate { text-align: right; }
.cts-table-wrapper .pagination { display: inline-flex; margin: 0; }
.cts-table-wrapper .pagination .page-link { padding: .25rem .6rem; font-size: .875rem; color: #3c8dbc; }
.cts-table-wrapper .pagination .active .page-link { background-color: #3c8dbc; border-color: #3c8dbc; color: #fff; }
.cts-table-wrapper .pagination .disabled .page-link { color: #adb5bd; }
.cts-table-wrapper .cts-table-scroll { overflow-x: auto; }
table.cts-table td.dataTables_empty { text-align: center; }
table.cts-table:not(.dataTable) > thead > tr > th.sorting { cursor: pointer; position: relative; padding-right: 1.1rem; }
table.cts-table:not(.dataTable) > thead > tr > th.sorting::after { content: "\f0dc"; font-family: FontAwesome; position: absolute; right: .3rem; opacity: .25; }
table.cts-table:not(.dataTable) > thead > tr > th.sorting_asc::after { content: "\f0dd"; opacity: .7; }
table.cts-table:not(.dataTable) > thead > tr > th.sorting_desc::after { content: "\f0dd"; opacity: .7; }

/* actiunile de la finalul randului (butoanele din ultima coloana), in tabelul cts-table.js: aliniate la dreapta, pe un singur rand */
table.cts-table > tbody > tr > td:last-child:has(> .btn, > button) { text-align: right !important; white-space: nowrap; }
table.cts-table > tbody > tr > td:last-child:has(> .btn, > button) > :is(.btn, button) { float: none; }

/* actiunile de la finalul randului (butoanele din ultima coloana), in orice tabel: aliniate la dreapta, pe un singur rand */
:is(table.dataTable, table.cts-table) > tbody > tr > td:last-child:has(> .btn, > button) { text-align: right !important; white-space: nowrap; }
:is(table.dataTable, table.cts-table) > tbody > tr > td:last-child:has(> .btn, > button) > :is(.btn, button) { float: none; }

/* select multiplu fara jQuery (public/backend/js/cts-multiselect.js), cu rezumatul si butoanele OK / Cancel din SumoSelect */
.ts-wrapper.cts-multiselect .ts-control {
    flex-wrap: nowrap; overflow: hidden; cursor: pointer; padding-right: 2rem !important;
    /* sageata de select (ca .form-select), ca sa se vada ca e o lista */
    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 .6rem center; background-size: 12px 9px;
}
.ts-wrapper.cts-multiselect .ts-control > .cts-ms-item { display: none; }
.ts-wrapper.cts-multiselect .cts-ms-summary { flex: 0 1 auto; min-width: 0; margin-right: .25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ts-wrapper.cts-multiselect .cts-ms-summary.cts-ms-placeholder { color: #999; }
.ts-wrapper.cts-multiselect.dropdown-active .cts-ms-summary { display: none; }
/* cat lista e inchisa, inputul de cautare nu ocupa loc (altfel rezumatul se taia in "Select...") */
.ts-wrapper.cts-multiselect:not(.dropdown-active) .ts-control > input { flex: 0 0 0; width: 0 !important; min-width: 0 !important; padding: 0 !important; }
.ts-wrapper.cts-multiselect .cts-ms-select-all { display: block; margin: 0; padding: 5px 8px; font-weight: 400; border-bottom: 1px solid #eee; cursor: pointer; }
.ts-wrapper.cts-multiselect .cts-ms-footer { display: flex; justify-content: center; gap: 6px; padding: 5px; border-top: 1px solid #eee; }
/* Tom Select simplu, cu campul focalizat dupa alegere: inputul de cautare ramane pe acelasi rand cu valoarea aleasa
   (altfel trece pe randul urmator si campul se inalta); valoarea prea lunga se taie cu "..." (ca in #viewEmailModal) */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single .ts-control > .item { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ts-wrapper.single .ts-control > input { min-width: 4px; }
/* Tom Select simplu: cat timp lista e deschisa (click pe camp, cautare) valoarea aleasa - sau textul "Select ..." - dispare din camp, ca
   textul cautat sa nu apara langa ea. Dupa alegere lista se inchide (si clasa dropdown-active dispare), deci valoarea aleasa ramane vizibila,
   desi campul ramane focalizat; revine si cand campul pierde focusul fara alegere. Selecturile cu campul de cautare in lista
   (plugin dropdown_input) isi pastreaza valoarea in camp. */
.ts-wrapper.single:not(.plugin-dropdown_input).dropdown-active .ts-control > .item { display: none; }

/* modalul "Add task" (#addTaskModal): latimea din development (Bootstrap 3: .modal-dialog 600px; Bootstrap 5: 500px), ca descrierea
   si celelalte campuri sa fie la fel de late ca inainte */
#addTaskModal .modal-dialog { max-width: 600px; }

/* modalul "Add task" (#addTaskModal): Department/Responsible sunt multi-select, tema bootstrap5 a Tom Select nu
   mai deseneaza sageata de dropdown decat pe cele single - pe select2 (development) sageata aparea si la multi */
#addTaskModal #select_department_id_modal + .ts-wrapper .ts-control,
#addTaskModal #responsible_select + .ts-wrapper .ts-control {
    background-image: url("data:image/svg+xml;charset=utf-8,%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-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 2rem;
}

/* selecturile Tom Select pe un <select class="form-control"> (simple si cts-multiselect): tema bootstrap5 face .ts-control
   transparent, deci sageata de lista (ca .form-select) sta pe wrapper */
.ts-wrapper.form-control:is(.single, .cts-multiselect) {
    padding-right: 2rem;
    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: 12px 9px;
}

/* iconitele din timeline (change log client, comentariile din View task) in albastrul CTS (link-urile din development) */
.timeline .timeline-icon.text-bg-primary { background-color: var(--cts-primary) !important; color: #fff !important; }

/* modale deschise peste alt modal (global.js): fiecare nivel deasupra celui de dedesubt, cu fundalul lui */
.modal.modal-level-1 { z-index: 1065; }
.modal-backdrop.backdrop-level-1 { z-index: 1060; }
.modal.modal-level-2 { z-index: 1075; }
.modal-backdrop.backdrop-level-2 { z-index: 1070; }
.modal.modal-level-3 { z-index: 1085; }
.modal-backdrop.backdrop-level-3 { z-index: 1080; }
.modal.modal-level-4 { z-index: 1095; }
.modal-backdrop.backdrop-level-4 { z-index: 1090; }
.modal.modal-level-5 { z-index: 1105; }
.modal-backdrop.backdrop-level-5 { z-index: 1100; }
/* pagina din spate nu se deruleaza cat timp ramane un modal deschis (si dupa inchiderea unui modal de deasupra) */
body.modal-open { overflow: hidden; }

/* modalele cu markup Bootstrap 3 (.form-group nu are margine in Bootstrap 5): eticheta nu se lipeste de campul
   de deasupra (mb-2); modalele cu reguli proprii (#viewEmailModal, #addEditCallLogModal...) le pastreaza pe ale lor */
.modal .form-group { margin-bottom: .5rem; }
/* mesajele de feedback (success / warning etc.) pe toate paginile v2: pe toata latimea, culorile din development
   (fundal plin, text alb); inainte erau copiate in CSS-ul fiecarei pagini */
.app-main .alert.alert-dismissible { display: block !important; width: 100%; }
.alert-info, .alert-success, .alert-warning, .alert-danger {
    --bs-alert-color: #fff;
    --bs-alert-link-color: #fff;
}
.alert-info { --bs-alert-bg: #00c0ef; --bs-alert-border-color: #00acd6; }
.alert-success { --bs-alert-bg: #00a65a; --bs-alert-border-color: #008d4c; }
.alert-warning { --bs-alert-bg: #f39c12; --bs-alert-border-color: #e08e0b; }
.alert-danger { --bs-alert-bg: #dd4b39; --bs-alert-border-color: #d73925; }
:is(.alert-info, .alert-success, .alert-warning, .alert-danger) a { color: #fff; text-decoration: underline; }
.alert-warning {
    background-color: #f39c12 !important;
    border-color: #e08e0b !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.alert-warning .btn-close {
    color: #fff !important;
}

/* modalul de factura (edit_invoice.js): latimile din development ale inputurilor din liniile facturii */
#createInvoiceModal .invoice-line-input { width: 120px; }
#createInvoiceModal .invoice-line-tax-input { width: 50px; }

/* starea eSemneaza a contractelor (contract.all si tabul Contracts din client), fostul stil inline din ControllerContract */
.esemneaza-badge { display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: 11px; font-weight: 600; white-space: nowrap; color: #fff; border: none; }
.esemneaza-badge-none { background: #ebebeb; color: #777; border: 1px solid #ccc; }
.esemneaza-badge-progress { background: #f39c12; }
.esemneaza-badge-done { background: #00a65a; }
.esemneaza-badge-rejected { background: #dd4b39; }
.esemneaza-badge-canceled { background: #aaa; }
.esemneaza-badge-failed { background: #d73925; }
.text-transparent {
    color: transparent !important;
}
label:has(input:disabled) .hook-action-type-name {
    position: relative;
}

label:has(input:disabled):hover .hook-action-type-name::before {
    content: "\f05e";
    font-family: FontAwesome;
    font-weight: normal;
    color: #dc3545;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: #fff;
    pointer-events: none;
}

label:has(input:disabled):hover .help-info {
    display: none;
}

/* modalul generic de adaugare / editare (helper/modal-add-edit): campul wysiwyg, inalt de 200px ca in helper/modal_field_wysiwyg.tpl */
.modal-add-edit-wysiwyg { height: 200px; }