/* Datepicker (pickadate) opened inside a scrollable Bootstrap modal.
   `.modal-dialog-scrollable` clips both `.modal-content` (overflow:hidden) and
   `.modal-body` (overflow-y:auto), plus `.accordion > .card` (overflow:hidden), so the
   bottom of the calendar gets cut off. When opened inside such a modal, initDatetimePicker
   adds this class and sets top/left/width from the input's position — fixed positioning
   escapes every overflow ancestor so the whole calendar renders above the modal. */
.picker__holder--overlay {
    position: fixed !important;
    max-width: 300px !important;
    z-index: 1080;
}

/* Legördülő menü, amit egy görgethető ős levágna — tipikusan a DataTables
   `.dataTables_scrollBody` burka (`scrollX: true`), vagy egy görgethető modál.
   Ugyanaz a megoldás, mint fent a naptárnál: fix pozicionálással a menü kilép minden
   `overflow` ősből. A helyét a `_initClippedDropdowns()` számolja a nyitó gombból.

   Az `!important` itt nem stílusharc: a Popper (és a régi nézetek inline stílusa) a
   menü `style` attribútumába írja a `position`-t és a `transform`-ot, azt máshogy nem
   lehet felülírni. A `transform` kinullázása kötelező — enélkül a Popper eltolása a
   már kiszámolt fix koordinátára rakódna rá. */
.dropdown-menu--escaped {
    position: fixed !important;
    transform: none !important;
    margin: 0 !important;
    top: var(--planit-dropdown-top, 0) !important;
    left: var(--planit-dropdown-left, 0) !important;
    z-index: 1080;
}

.dhx_tabbar-tab[dhx_tabid="summaryEditExpenditure"] {
  display: none;
}
.dhx_tabbar-tab[dhx_tabid="summaryEditIncome"] {
  display: none;
}

.add_milestone{
  width: 100%;
  height: 100%;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAO0lEQVQ4T2NkoBAw4tMvuGHWf5D8+4A0nOpGDWBgoE4YwEKb1BgFxQ7YBRQbgMvm0XSACNyBywvEpAsAxlc4EbYmh6oAAAAASUVORK5CYII=);
  background-position: 50%;
  background-repeat: no-repeat;
  cursor: pointer;
  position: relative;
  -moz-opacity: .6;
  opacity: .6
}


.financial_increase .gantt_task_content::before,
.financial_decrease .gantt_task_content::before {
  content: '$';
}
.logistical .gantt_task_content::before,
.financial_increase .gantt_task_content::before,
.financial_decrease .gantt_task_content::before {
  font-size: 10px;
  position: absolute;
  top: 0px;
  left: 3px;
  transform: rotate(-45deg);
}


.financial_increase .gantt_task_content::before {
  color:#4CAF50;
}

.financial_decrease .gantt_task_content::before {
  color:#F44336;
}

.logistical .gantt_task_content::before {
  color:#fff;
  content: "\f0d1";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-size: 7.5px;
  left: 6px;
  bottom: -7px;
}

#cashflowContent {
  overflow: scroll;
  height: 600px;
}

/* imitless extra css */

.border-dashed-1 {
    border: 1px dashed;
}

.border-dashed-left-1 {
    border-left: 1px dashed;
}

.border-dashed-left-2 {
    border-left: 2px dashed;
}

.border-dashed-bottom-1 {
    border-bottom: 1px dashed;
}

.border-dashed-bottom-2 {
    border-bottom: 2px dashed;
}

.border-dashed-top-1 {
    border-top: 1px dashed;
}

.border-dashed-top-2 {
    border-top: 2px dashed;
}

.border-dashed-right-1 {
    border-right: 1px dashed;
}

.border-dashed-right-2 {
    border-right: 2px dashed;
}

.border-dashed-right-thin-1 {
    border-right: 1px dashed;
    border-right-width: thin;
}

.taskBadge {
  height: 17px;
  padding: 3px 6px !important;
  color: #000 !important;
  border-color:#000 !important;
}

/* ===== OFFERS LIST SKELETON ===== */
@keyframes offers-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
.offers-skeleton-bar {
    display: block;
    background: linear-gradient(90deg, #f0f0f0 8%, #e4e4e4 18%, #f0f0f0 33%);
    background-size: 1200px 100%;
    animation: offers-shimmer 1.4s infinite linear;
    border-radius: 3px;
}
.offers-skeleton-item .skeleton-title {
    height: 14px;
    margin-bottom: 9px;
}
.offers-skeleton-item .skeleton-subtitle {
    display: inline-block;
    height: 10px;
    vertical-align: middle;
}
.offers-skeleton-item .skeleton-icon {
    height: 16px;
    width: 16px;
}
.sk-w-45 { width: 45%; }
.sk-w-48 { width: 48%; }
.sk-w-52 { width: 52%; }
.sk-w-55 { width: 55%; }
.sk-w-58 { width: 58%; }
.sk-w-61 { width: 61%; }
.sk-w-63 { width: 63%; }
.sk-w-66 { width: 66%; }
.sk-w-68 { width: 68%; }
.sk-w-70 { width: 70%; }
.sk-px-60  { width: 60px; }
.sk-px-70  { width: 70px; }
.sk-px-75  { width: 75px; }
.sk-px-80  { width: 80px; }
.sk-px-100 { width: 100px; }
.sk-px-110 { width: 110px; }
.sk-px-120 { width: 120px; }
.sk-px-130 { width: 130px; }
/* The four widths the worksheets list asks for and the offers list never did. */
.sk-px-65  { width: 65px; }
.sk-px-115 { width: 115px; }
.sk-px-125 { width: 125px; }
.sk-px-140 { width: 140px; }
/* ===== END OFFERS LIST SKELETON ===== */

/* ===== WORKSHEETS LIST SKELETON (PIT20-479) =====
 *
 * The markup was there and the CSS was not, so the bars rendered as empty elements with
 * no height: the cards appeared while the lines standing in for their text did not. A
 * skeleton that shows the frame but none of the writing reads as a list that loaded and
 * came back blank.
 */
.worksheets-skeleton-bar {
    display: block;
    background: linear-gradient(90deg, #f0f0f0 8%, #e4e4e4 18%, #f0f0f0 33%);
    background-size: 1200px 100%;
    animation: offers-shimmer 1.4s infinite linear;
    border-radius: 3px;
}
.worksheets-skeleton-item .skeleton-title {
    height: 14px;
    margin-bottom: 9px;
}
.worksheets-skeleton-item .skeleton-subtitle {
    display: inline-block;
    height: 10px;
    vertical-align: middle;
}
.worksheets-skeleton-item .skeleton-icon {
    height: 16px;
    width: 16px;
}
/* ===== END WORKSHEETS LIST SKELETON ===== */

/* ===== ASSETS & STORES LIST SKELETON ===== */
.asset-skeleton-bar {
    display: block;
    background: linear-gradient(90deg, #f0f0f0 8%, #e4e4e4 18%, #f0f0f0 33%);
    background-size: 1200px 100%;
    animation: offers-shimmer 1.4s infinite linear;
    border-radius: 3px;
}
.asset-skeleton-item .skeleton-image {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
}
.asset-skeleton-item .skeleton-name {
    height: 14px;
    margin-bottom: 6px;
}
.asset-skeleton-item .skeleton-number {
    height: 10px;
    display: inline-block;
}
.asset-skeleton-item .skeleton-icon {
    height: 16px;
    width: 16px;
}
/* ===== END ASSETS & STORES LIST SKELETON ===== */

/* ===== EMPLOYEES LIST SKELETON ===== */
.employee-skeleton-bar {
    display: block;
    background: linear-gradient(90deg, #f0f0f0 8%, #e4e4e4 18%, #f0f0f0 33%);
    background-size: 1200px 100%;
    animation: offers-shimmer 1.4s infinite linear;
    border-radius: 3px;
}
.employee-skeleton-item .skeleton-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
}
.employee-skeleton-item .skeleton-name {
    height: 14px;
    margin-bottom: 6px;
}
.employee-skeleton-item .skeleton-position {
    height: 10px;
    display: inline-block;
}
.employee-skeleton-item .skeleton-icon {
    height: 16px;
    width: 16px;
}
/* ===== END EMPLOYEES LIST SKELETON ===== */

/* ===== TAXONOMY EDITOR ===== */
.taxonomySortableItem {
    cursor: grab;
}
.taxonomySortableItem:active {
    cursor: grabbing;
}
.taxonomy-edit-fields {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}
.taxonomy-edit-fields > div {
    flex: 1;
}
.taxonomy-edit-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
    padding-left: 8px;
}
.taxonomy-new-form-fields {
    display: flex;
    gap: 8px;
}
.taxonomy-new-form-fields > div {
    flex: 1;
}
.tagEditMode {
    display: none;
}
.tagEditMode.is-editing {
    display: block;
}
.tagViewMode.is-hidden {
    display: none;
}
/* Icon prefix inside floating input */
.icon-prefix-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding-left: 8px;
    display: flex;
    align-items: center;
    z-index: 4;
}
.has-icon-prefix {
    padding-left: 38px;
}
.has-icon-prefix + .form-control-feedback + .label-floating {
    left: 38px;
}
/* ===== END TAXONOMY EDITOR ===== */

/* ===== ICON PICKER DROPDOWN ===== */
#iconPickerDropdown {
    position: absolute;
    z-index: 10060;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    width: 420px;
}
.iconPickerGrid {
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
}
.iconPickerSelectBtn.btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 14px;
}
.iconPickerSelectBtn.btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.icon-picker-set-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
}
/* ===== END ICON PICKER DROPDOWN ===== */


/* ===== NOTIFICATION BELL ANIMATIONS ===== */

/* Bell shake animation — triggered once on new notification */
@keyframes bellShake {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(12deg); }
    30%  { transform: rotate(-10deg); }
    45%  { transform: rotate(8deg); }
    60%  { transform: rotate(-6deg); }
    75%  { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}

.notification-bell-active {
    animation: bellShake 0.8s ease-in-out;
}

/* Persistent highlight when unread notifications exist */
.notification-bell-has-unread {
    color: #ff6b35 !important;
}

/* Badge pulse animation */
@keyframes badgePulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.notificationBadge {
    animation: badgePulse 2s ease-in-out infinite;
    font-size: 10px !important;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
}

/* Unread notification feed item */
.notification-unread .timeline-content {
    background-color: rgba(33, 150, 243, 0.04);
}

/* ===== END NOTIFICATION BELL ANIMATIONS ===== */

/* ===== EXTRANET RESPONSE STATUS ROW COLORS ===== */
tr.extranet-status-accepted,
.list-item.extranet-status-accepted,
[data-row].extranet-status-accepted {
    background-color: rgba(76, 175, 80, 0.08) !important;
    border-left: 3px solid #4caf50;
}
tr.extranet-status-disputed,
.list-item.extranet-status-disputed,
[data-row].extranet-status-disputed {
    background-color: rgba(255, 183, 77, 0.08) !important;
    border-left: 3px solid #ffb74d;
}
tr.extranet-status-refused,
.list-item.extranet-status-refused,
[data-row].extranet-status-refused {
    background-color: rgba(229, 115, 115, 0.08) !important;
    border-left: 3px solid #e57373;
}
@keyframes extranetShake {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-6px); }
    30%, 70% { transform: translateX(6px); }
}
.extranet-shake {
    animation: extranetShake 0.6s ease-in-out;
    box-shadow: 0 0 12px rgba(255, 152, 0, 0.4);
}
/* ===== END EXTRANET RESPONSE STATUS ROW COLORS ===== */

/* ===== EXTRANET PLATFORM ===== */

/* --- Extranet Login Page --- */
.extranet-login-container {
    display: flex;
    gap: 40px;
    align-items: stretch;
}
.extranet-login-form-panel {
    flex: 1;
    min-width: 280px;
}
.extranet-login-countdown-panel {
    flex: 1;
    min-width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.extranet-login-form-panel h2 {
    color: #333;
    font-size: 22px;
    margin: 0 0 8px 0;
}
.extranet-login-form-panel p.subtitle {
    color: #999;
    font-size: 14px;
    margin: 0 0 30px 0;
}
.extranet-form-group {
    margin-bottom: 20px;
}
.extranet-form-group label {
    display: block;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    font-size: 13px;
}
.extranet-form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.extranet-form-group input:focus {
    border-color: #26a69a;
    outline: none;
}
.extranet-form-group input[readonly] {
    background: #f5f5f5;
    color: #888;
}
.extranet-form-group input.password-input {
    letter-spacing: 6px;
    font-family: monospace;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
}
.btn-extranet-login {
    width: 100%;
    padding: 14px;
    background: #26a69a;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-extranet-login:hover {
    background: #2bbbad;
}
.btn-extranet-login:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.extranet-login-error {
    color: #e57373;
    font-size: 13px;
    margin-top: 10px;
    display: none;
}

/* Countdown timer */
.extranet-countdown-wrapper {
    text-align: center;
}
.extranet-countdown-wrapper h3 {
    color: #555;
    font-size: 14px;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.extranet-countdown-circles {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.extranet-countdown-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.extranet-countdown-circle.days { background: rgba(255, 152, 0, 0.15); border: 3px solid #ff9800; }
.extranet-countdown-circle.hours { background: rgba(255, 193, 7, 0.15); border: 3px solid #ffc107; }
.extranet-countdown-circle.minutes { background: rgba(139, 195, 74, 0.15); border: 3px solid #8bc34a; }
.extranet-countdown-circle.seconds { background: rgba(66, 165, 245, 0.15); border: 3px solid #42a5f5; }
.extranet-countdown-circle .value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: #333;
}
.extranet-countdown-circle .label {
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
    margin-top: 2px;
}
.extranet-countdown-expired {
    color: #e57373;
    font-weight: 600;
    font-size: 16px;
}

@media (max-width: 680px) {
    .extranet-login-container {
        flex-direction: column;
    }
}

/* --- Extranet Document Page --- */
.extranet-document-container {
    display: flex;
    gap: 24px;
    min-height: 70vh;
}
.extranet-document-details-panel {
    flex: 0 0 38%;
    min-width: 300px;
}
.extranet-document-viewer-panel {
    flex: 1;
    min-width: 300px;
}
.extranet-document-info-card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 16px;
}
.extranet-document-info-card h3 {
    margin: 0 0 16px 0;
    color: #333;
    font-size: 18px;
}
.extranet-info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}
.extranet-info-row:last-child {
    border-bottom: none;
}
.extranet-info-row .info-label {
    color: #777;
    font-weight: 500;
}
.extranet-info-row .info-value {
    color: #333;
    font-weight: 600;
    text-align: right;
}

/* Response buttons */
.extranet-response-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.btn-extranet-response {
    flex: 1;
    padding: 12px 8px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    transition: opacity 0.2s;
}
.btn-extranet-response:hover {
    opacity: 0.85;
}
.btn-extranet-response:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-extranet-response.refuse { background: #e57373; }
.btn-extranet-response.dispute { background: #ffb74d; }
.btn-extranet-response.accept { background: #4caf50; }

/* Attachments list */
.extranet-attachments-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.extranet-attachments-list li {
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}
.extranet-attachments-list li:hover {
    background: #f5f5f5;
}
.extranet-attachments-list li i {
    color: #26a69a;
}

/* Document viewer */
.extranet-viewer-frame {
    width: 100%;
    min-height: 70vh;
    height: calc(100vh - 180px);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.extranet-viewer-frame iframe,
.extranet-viewer-frame img {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
}
.extranet-viewer-placeholder {
    text-align: center;
    color: #999;
}
.extranet-viewer-placeholder i {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

/* Status badge */
.extranet-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.extranet-status-badge.pending { background: #fff3e0; color: #e65100; }
.extranet-status-badge.seen { background: #e3f2fd; color: #1565c0; }
.extranet-status-badge.accepted { background: #e8f5e9; color: #2e7d32; }
.extranet-status-badge.disputed { background: #fff8e1; color: #f57f17; }
.extranet-status-badge.refused { background: #fbe9e7; color: #c62828; }

/* Response completed banner */
.extranet-response-banner {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 600;
}
.extranet-response-banner.accepted { background: #e8f5e9; color: #2e7d32; border: 1px solid #4caf50; }
.extranet-response-banner.disputed { background: #fff8e1; color: #f57f17; border: 1px solid #ffb74d; }
.extranet-response-banner.refused { background: #fbe9e7; color: #c62828; border: 1px solid #e57373; }

/* Response modal */
.extranet-modal-label {
    font-weight: 600;
    color: #555;
}
.extranet-response-textarea {
    font-size: 14px;
    line-height: 1.6;
}

/* --- Extranet Expired Page --- */
.extranet-expired-container {
    text-align: center;
    padding: 40px 20px;
}
.extranet-expired-icon {
    font-size: 72px;
    color: #e57373;
    margin-bottom: 24px;
}
.extranet-expired-container h2 {
    color: #333;
    font-size: 24px;
    margin: 0 0 12px 0;
}
.extranet-expired-container p {
    color: #777;
    font-size: 16px;
    margin: 0 0 30px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.extranet-expired-container .btn-back {
    display: inline-block;
    padding: 12px 32px;
    background: #26a69a;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.2s;
}
.extranet-expired-container .btn-back:hover {
    background: #2bbbad;
}

@media (max-width: 768px) {
    .extranet-document-container {
        flex-direction: column;
    }
    .extranet-document-details-panel {
        flex: none;
        min-width: auto;
    }
    .extranet-response-buttons {
        flex-direction: column;
    }
}
/* Skeleton loading bars (reuses offers-shimmer keyframe) */
.extranet-skeleton-bar {
    display: inline-block;
    background: linear-gradient(90deg, #f0f0f0 8%, #e4e4e4 18%, #f0f0f0 33%);
    background-size: 1200px 100%;
    animation: offers-shimmer 1.4s infinite linear;
    border-radius: 3px;
    min-height: 14px;
}
.extranet-skeleton-viewer {
    width: 80%;
    max-width: 400px;
    padding: 40px 0;
}
/* Previous remarks */
.extranet-remark-item {
    cursor: pointer;
}
.extranet-remark-viewer {
    padding: 32px;
    max-width: 700px;
    margin: 0 auto;
}
.extranet-remark-viewer h4 {
    color: #333;
    margin: 0 0 8px 0;
}
.extranet-remark-viewer hr {
    border-color: #eee;
}
.extranet-remark-message {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    white-space: pre-wrap;
}
/* ===== END EXTRANET PLATFORM ===== */

/* ===== HRM — Qualification rows (PIT20-221) ===== */
.qualification-row .qualificationDocumentNameText {
    max-width: 120px;
}
/* ===== END HRM ===== */
/* ===== "Nem áll rendelkezésre adat" — Select2 megjelenítés =====
   A Select2 elrejti az eredeti <select>-et, és helyette egy <span>-t renderel, ezért a
   Bootstrap .is-valid zöld pipája (ami a .form-control háttérképe) nem látszana rajta.
   A lezárt állapotot a select melletti Select2-konténerre tükrözzük. */
select.notAvailable + .select2-container .select2-selection {
    border-color: #4CAF50;
    padding-right: calc(1.5385em + 1rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center right calc(0.38462em + 0.25rem);
    background-size: calc(0.76925em + 0.5rem) calc(0.76925em + 0.5rem);
}

/* A lefelé mutató nyíl elrejtve — a mező le van zárva, nincs mit kinyitni. */
select.notAvailable + .select2-container .select2-selection__arrow {
    display: none;
}

/* Ugyanaz a halványítás, mint a letiltott beviteli mezőkön. */
select.notAvailable + .select2-container .select2-selection__rendered {
    color: #999;
}
/* ===== END "Nem áll rendelkezésre adat" ===== */

/* ===== Module permissions — document list actions =====
   The body carries the current module's permissions (mainframe.php). Every document
   list row renders its edit entry with the same `.editDocument` class, so one rule
   hides it across Offers, Contracts, COP, Delivery/Received notes, Invoices and
   Worksheets when the user may only view.

   CSS rather than JS on purpose: rows are re-rendered on every list refresh and on
   infinite scroll, so a one-off JS pass would miss everything loaded later.

   This is UI convenience only — the save endpoints must reject unauthorised
   requests on the server regardless. */
body[data-can-edit="0"] .editDocument {
    display: none;
}
/* ===== END Module permissions ===== */

/* ===== Médiatár — csempe-akciók és előnézet =====
   A csempék akciógombjai eddig csak a galériában (.mediaGallery) látszottak hoverre; a
   médiatárban soha, mert a szabály csak arra a konténerre volt kötve. */
#mediaItems .card:hover .removeSelectedIcon,
#mediaItems .card:hover .viewSelectedIcon,
#archivedMediaItems .card:hover .removeSelectedIcon,
#archivedMediaItems .card:hover .viewSelectedIcon {
    display: block;
}

/* Az ikonok kontrasztja: a csempe háttere világos is lehet. */
#mediaItems .removeMediaItem,
#mediaItems .viewMediaItem,
#archivedMediaItems .removeMediaItem,
#archivedMediaItems .viewMediaItem {
    text-shadow: 0 0 6px rgba(0, 0, 0, .6);
}

/* Az előnézet a fájlt a rendelkezésre álló helyre illeszti, torzítás nélkül. */
.mediaPreviewBody img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.mediaPreviewBody iframe {
    width: 100%;
    height: 70vh;
    border: 0;
}
/* ===== END Médiatár ===== */

/* ===== Select2: a lefelé mutató nyíl is nyissa a legördülőt =====
   A floating-label mezők jobb szélére a renderelő minden esetben kitesz egy
   abszolút pozicionált lezáró dobozt (a mértékegység/pénznem helye), akkor is,
   ha az üres. Ez a doboz a DOM-ban a mező UTÁN áll, így rákerül a Select2
   nyilára és elnyeli a kattintást: a szövegre kattintva lenyílt a lista, a
   nyílra kattintva nem történt semmi.

   A doboz így kattintás-áteresztő lesz; a benne lévő tartalom (mértékegység,
   pénznem) csak megjelenítés, nem interaktív. Ha valaha kattintható elem
   kerülne bele, az alábbi szabály visszaadja neki az egérkezelést. */
.form-group-floating .form-control-feedback {
    pointer-events: none;
}

.form-group-floating .form-control-feedback a,
.form-group-floating .form-control-feedback button,
.form-group-floating .form-control-feedback input,
.form-group-floating .form-control-feedback select,
.form-group-floating .form-control-feedback [data-toggle],
/* A Select2 elrejti az eredeti `<select>`-et, és egy `<span>`-t rajzol helyette —
   az pedig nem szerepelt a fenti felsorolásban, így örökölte a kattintás-áteresztést.
   A mértékegység-választóra kattintva ezért a MÖGÖTTE lévő beviteli mező kapta meg a
   fókuszt, a legördülő pedig meg sem nyílt. */
.form-group-floating .form-control-feedback .select2-container {
    pointer-events: auto;
}
/* ===== END Select2 nyíl ===== */

/* ─────────────────────────────────────────────────────────────────────────────
   A validáció hibaüzenete a beviteli csoport alján (PIT20-612).

   A hibacímke korábban a `.form-group-floating`-be került. Az a doboz `position:
   relative`, és abszolút pozicionált gyerekeket tart — a lebegő címkét és a
   mértékegység („cm³", „kg", „kW") dobozát, ami `top: 0; bottom: 0`-val a szülő
   MAGASSÁGÁRA feszül. A hibacímkétől a szülő 40 → 76 px lett, a mértékegység-doboz
   vele nőtt, és a benne középre igazított mértékegység 18 px-rel a mező ALÁ csúszott.

   Az `errorPlacement` ezért egy szinttel feljebb, a `.input-group`-ba teszi. Az
   viszont flex-SOR: saját sor nélkül a címke a mező MELLÉ szorulna, mérve 144 px
   szélesen egy 350 px-es csoportban — vagyis olvashatatlanul. A `flex-basis: 100%`
   új sorba töri (a `.input-group` `flex-wrap: wrap`).
   ───────────────────────────────────────────────────────────────────────────── */
.input-group > .validation-invalid-label {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ===== PIT20-418 — csontváz-betöltő az ütemterv készlettáblájában =====
   A `table_skeleton.php` 51 elemének a színe eddig inline `style`-ban ült. Inline
   stílust semmilyen stíluslap nem tud felülírni (csak `!important`-tal), ezért a
   sötét mód nem érte el őket. A szín itt van, a méret marad elemenként inline. */
.skeleton-animate {
    background: #e0e0e0;
}
/* ===== END csontváz-betöltő ===== */

/* ── Sidebar: reachable to the last item (PIT20-479) ─────────────────────────
 *
 * The menu has grown past what a short window can show, and the items at the
 * bottom were only reachable by zooming the browser out — the column simply ran
 * off the screen with nothing to scroll.
 *
 * `auto`, not `scroll`: a permanent scrollbar down a navigation column is noise
 * on every screen tall enough not to need it.
 */
/* ⚠️ CSAK 768px FÖLÖTT (PIT20-724).
 *
 * A `sticky` az oldalsávot A LAP FOLYAMÁBA teszi. Az irodai felületen ez a szándék —
 * ott a téma `.sidebar-expand-md`-je ugyanettől a ponttól `position: static`, tehát az
 * oszlop amúgy is helyet foglal. MOBILON viszont a Limitless kihúzható fiókként kezeli:
 * `position: fixed` + `left: -18.5625rem`, és a `left` egy `sticky` elemen nem mozdít
 * semmit.
 *
 * Emiatt a fiók ki sem tudott csúszni: MÉRVE 390 képponton az oszlop állandóan a
 * képernyőn ült (x=0, 270px), a tartalomnak 120px maradt, a hamburger pedig csak a
 * BELSŐ, külön `fixed` `.sidebar-content`-et mozgatta — így maradt ott a „Navigation”
 * csík egy üres sáv fölött. A média-lekérdezés nélkül ez a szabály a mobil menüt
 * használhatatlanná teszi. */
@media (min-width: 768px) {

    .page-content > .sidebar.sidebar-main {
        /* ⚠️ A magasság korlátozása ÖNMAGÁBAN hibás volt: pozicionálás nélkül az oszlop
         * egyszerűen véget ért a lap közepén, levágott aljjal. A `sticky` az, ami teljes
         * képernyő-magasságúvá teszi és a nézetablakhoz rögzíti — a menü így végig ott van,
         * és csak a saját tartalma gördül benne.
         *
         * A szelektor szándékosan ennyire pontos: a Limitless `.sidebar:not(.sidebar-component)`
         * szabálya erősebb a puszta `.sidebar-main`-nél, és felülírta a pozicionálást — a
         * magasság érvényesült, a rögzítés nem, és pontosan ettől lett levágott alja. */
        position: sticky;
        top: 0;
        /* Különben a flex-sor a legmagasabb testvérre nyújtaná, és a `max-height` megint
         * levágásnak látszana. */
        align-self: flex-start;
        height: 100vh;
        /* A görgetés magán az oszlopon, nem a belsejében: a belső elemre tett szabály
         * — bár egyedüliként illeszkedett rá — mérve nem érvényesült, az oszlopra tett
         * viszont igen. Itt az számít, hogy a menü elérhető legyen, nem az, hogy melyik
         * doboz gördül. */
        overflow-y: auto;
    }

    .page-content > .sidebar.sidebar-main > .sidebar-content {
        overflow-y: auto;
        /* ⚠️ Both of these are needed. A flex item defaults to `min-height: auto`,
         * which refuses to shrink below its content — so `overflow-y` never has
         * anything to do and the column keeps overflowing instead of scrolling. */
        flex: 1 1 auto;
        min-height: 0;
    }
}


/* The recipe accordion header toggles the card, so it has to read as clickable. */
.recipeCardHeader {
    cursor: pointer;
}


/* ===== PIT20-489 — a mértékegység a mező értékére csúszott =====
   A lezáró doboz (`.form-control-feedback`) abszolút pozícióban ül a mező jobb szélén,
   és semmi nem hagyott neki helyet — egy jobbra igazított "300" ezért egyenesen a
   "kg" alá futott. Széles mezőn nem tűnt fel, mert ott véletlenül elég volt a hely.

   A helyfoglalás CSAK ott történik, ahol tényleg van mértékegység (`has-postfix`) —
   minden mezőt behúzni azokat is elrontaná, amiknek nincs mit kikerülniük. */
.form-group-floating.has-postfix > .form-control {
    padding-right: 3rem;
}

/* A jobbra igazított érték a legszűkebb eset: ott ér leghamarabb a dobozhoz. */
.form-group-floating.has-postfix > .form-control.text-right {
    /* Mérve: 3rem-nél a m³ pontosan a szöveg határán kezdődött — nem fedte, de hézag sem
       maradt. A jobbra igazított érték ér leghamarabb a dobozhoz, ezért kap többet. */
    padding-right: 3.4rem;
}


/* ===== PIT20-490 — a keverőtelep-választó szélessége =====
   Nem inline stílusban: azt semmilyen stíluslap nem tudja felülírni, és ez a mező
   ugyanúgy témázandó, mint a többi. */
.addPlantPickerWrap {
    flex: 1 1 auto;
    max-width: 380px;
}


/* ===== PIT20-493 — a Select2 szövege a mező széléhez tapadt =====
   A téma szándékosan nullázza a behúzást:
     .select2-selection--single .select2-selection__rendered { padding-left: 0 }
   Ez a Limitless aláhúzásos mezőstílusához helyes — ott nincs doboz, amitől el kellene
   tartani a szöveget. Amikor viszont az `initSelect2` `form-control`-t tesz a mezőre, az
   KERETES doboz lesz, és a szöveg a keretre ült rá. Élesben mérve: 1px behúzás.

   A behúzás a selectionre kerül, nem a renderelt szövegre: a jobb oldali hely a nyílé,
   azt a téma szabálya tartja fenn, és felülírva a nyíl a szövegre csúszna. */
.select2-container .select2-selection--single.form-control {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

/* A kis méretű mező arányosan kevesebbet kap, ahogy a `.form-control-sm` is. */
.select2-container .select2-selection--single.form-control-sm {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* A nyilat a téma `::after`-rel rajzolja, `right: 0`-val — ami az aláhúzásos mezőnél jó,
   mert ott nincs keret, amitől el kellene tartani. Dobozos (`form-control`) mezőnél viszont
   a keretre tapad. Ugyanazt a behúzást kapja, mint a szöveg, hogy a két oldal egyezzen.
   (Input-group belsejében a Limitless 30px-et ad neki; ott is a mező saját paddingja a
   helyes viszonyítás, nem egy fix érték.) */
.select2-container .select2-selection--single.form-control .select2-selection__arrow::after {
    right: 0.875rem;
}

.select2-container .select2-selection--single.form-control-sm .select2-selection__arrow::after {
    right: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Kötelező mezők jelölése (PIT20-523, pontosítva: PIT20-608).

   Eddig a `required` csak HTML-attribútum volt: a felhasználó semmiből nem tudta,
   melyik mezőt KELL kitöltenie — csak azt látta, hogy a mentés nem történik meg.
   A lebegő címke a mező UTÁN áll a DOM-ban, ezért az általános testvér-kombinátor
   (`~`) éri el; a jelölés így egyetlen szabállyal minden kartonra érvényes.

   A csillag jelentése SZŰKEBB, mint a "ki kell tölteni": aktív mezőt üresen
   hagyni sehol nem lehet, a csillag azt jelöli, amiből NINCS kiút. Ahol ott a
   "Nem áll rendelkezésre adat" (`.optionalField`), a mező természete szerint
   opcionális — egy kertes háznál nincs emelet —, csak nyilatkozni kell róla,
   hogy üresen marad. Az ilyen mező ezért nem kap csillagot.

   Kimarad, ami a felhasználótól nem is függ: a rejtett mező, a letiltott mező
   (pl. a szerver által adott iktatószám) és a "nem áll rendelkezésre adat"-ként
   lezárt mező — ezeket a validátor sem kéri számon.
   ───────────────────────────────────────────────────────────────────────────── */
.form-group-floating > .form-control[required]:not([type="hidden"]):not(:disabled):not(.notAvailable):not(.optionalField) ~ .label-floating::after,
.form-group-floating > .form-control-select2[required]:not(:disabled):not(.notAvailable):not(.optionalField) ~ .label-floating::after {
    content: " *";
    color: #EF5350;
    font-weight: 600;
}

/* A Select2 elrejti az eredeti `<select>`-et, a címke viszont ugyanúgy a testvére marad,
   így a fenti szabály a legördülőkre is érvényes — külön jelölés nem kell hozzá. */


/* ─────────────────────────────────────────────────────────────────────────────
   PIT20-706 — Panel a modálon BELÜL (nem második modal)

   Egyetlen modal-konténer van (`#mainModal`). Ha egy űrlapról egy másik felületet
   kell megnyitni, az nem nyithat új modalt: a félig kitöltött űrlap elveszne.
   Ehelyett a törzs tartalma balra kilép, a panel pedig jobbról becsúszik a
   helyére — ugyanaz a megoldás, ami az eszközkarton eladó-választójánál bevált
   (v2.0.0.161). Ott modul-CSS-ben él, ami csak az EAM oldalain töltődik; ez itt
   a globális, újrahasznosítható változata.
   ───────────────────────────────────────────────────────────────────────────── */
#mainModal .modal-body {
    overflow-x: hidden;
}

#mainModal .modalSlidePane {
    transform: translateX(100%);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
}

#mainModal .modalSlidePane.slideIn {
    transform: translateX(0);
    opacity: 1;
}

#mainModal .modalSlideHost {
    transition: transform .28s ease, opacity .28s ease;
}

#mainModal .modalSlideHost.slideOut {
    transform: translateX(-40px);
    opacity: 0;
}

/* A sablonlista görgethető: tíz sablonnál nem tolhatja le a szerkesztőt a képernyőről. */
.coverLetterTemplateList {
    max-height: 22rem;
    overflow-y: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PIT20-707 — A címzett kapcsolattartó-választója

   A Select2 a hordozó elem szélességét veszi fel (`width: 100%`). Rögzített
   szélesség nélkül a partner neve mellett néhány karakteres csíkra zsugorodna,
   amiben egy „Kovács Béla (iroda@…)" felirat olvashatatlan.
   ───────────────────────────────────────────────────────────────────────────── */
.rfqRecipientContactsWrapper {
    min-width: 20rem;
    max-width: 28rem;
    flex: 0 0 auto;
}

/* ⚠️ A chip KILÓGOTT a dobozból. A téma a többértékű Select2-t a `.form-group-floating`
   csoportokra hangolta: ott a chip paddingja `0.18rem` és a doboz `inline-table`. A
   címzett-választó NEM lebegő címkés csoportban van, ezért az alapértelmezett, nagy
   (`0.5rem 1rem`) chip egy FIX magasságú `form-control` dobozba került — a doboz nem tudott
   nőni, a chip pedig kilátszott a szegélyen. A magasság itt a TARTALOMHOZ igazodik. */
.rfqRecipientContactsWrapper .select2-container {
    height: auto;
}

.rfqRecipientContactsWrapper .select2-selection--multiple {
    height: auto;
    min-height: calc(2rem + 2px);
    padding: .125rem .5rem;
}

/* ⚠️ A chipek a témában FLOAT-tal állnak, saját margókkal — így a doboz magassága nem
   követi őket, és egy hosszú „Név (e-mail)" címke vízszintesen is kilóg. FLEX-re váltva a
   geometria kiszámítható: a sor tördel, a chip pedig soha nem szélesebb a doboznál. */
.rfqRecipientContactsWrapper .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: visible;
    white-space: normal;
    padding: 0;
    margin: 0;
}

.rfqRecipientContactsWrapper .select2-selection--multiple .select2-selection__choice {
    float: none;
    max-width: 100%;
    margin: .125rem .25rem .125rem 0;
    padding: .18rem .5rem;
    border-radius: .25rem;
    /* A hosszú cím ne feszítse szét a dobozt — inkább levágjuk. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A beviteli mező (amibe keresni lehet) is a sor része — ne törjön új sorba magától. */
.rfqRecipientContactsWrapper .select2-selection--multiple .select2-search--inline {
    display: flex;
    align-items: center;
}

/* Az új kapcsolattartó sorának mezői: a név két rövid, az e-mail hosszabb. */
.rfqNewContactForm .rfqContactNameWrapper {
    width: 9rem;
}

.rfqNewContactForm .rfqContactEmailWrapper {
    width: 16rem;
}

.rfqNewContactForm .rfqContactPhoneWrapper {
    width: 10rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PIT20-724…726 — a fejléc TABLETEN egy sor marad

   Mérve (1680px-en betöltött irodai fejléc, majd szélesség szerint végigmérve):
   a teljes sáv — céglogó + cégnév + 6 ikon + felhasználónév — 1004 képpont alatt
   MÁSODIK SORBA tördel, és 768-tól 996-ig végig két soros (navbar 98px, nem 50px).

   A két hosszú felirat a helyfoglaló: a cégnév 153px, a felhasználónév 106px. Mindkettő
   `xl`-től (1200px) látszik, alatta a puszta jel marad — pontosan úgy, ahogy a terminál
   csinálja, csak ott platform, itt szélesség dönti el. A rejtés a Bootstrap `d-none
   d-xl-*` segédosztályaival történik a nézetben; itt csak az marad, aminek nincs
   segédosztálya.

   MIÉRT `xl` ÉS NEM `lg`: 1004-nél a sáv hajszálra fér el, ráhagyás nincs benne —
   egy hosszabb cégnévvel a tördelés azonnal visszatérne. 1200-nál 202 képpont a
   tartalék, vagyis a mostani névnél ~355px-ig hosszabb cégnév is elfér.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A név helyén álló jel. (A terminál `$userMenuCompact` ága ugyanezt rendereli, ezért
   nincs platform-előtag a szelektoron — a stíluslap mindhárom platformon betöltődik.) */
.userMenuAvatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    /* A fejléc tintáját örökli, így a világos/sötét váltást magától követi. */
    color: inherit;
    font-size: 1rem;
}

html[data-theme="dark"] .userMenuAvatar {
    background: rgba(255, 255, 255, .12);
}

/* A név a menü fejléceként olvasandó, nem menüpontként. */
.dropdown-menu .userMenuName {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

/*
 * ⚠️ A KÉT FELIRAT ELREJTÉSE 768 KÉPPONTON MÉG NEM ELÉG.
 *
 * Mérve: 768-on a fejléc-sávnak 458 képpont marad (768 − 270 márkablokk − 2×20 belső
 * margó), a kilenc jel viszont — 16 képpontos oldalmargókkal — 479-et kér. Ettől a
 * felhasználó jele és a cégjel MÉGIS a második sorba esik, pont az iPad álló szélességén.
 *
 * A hiányt két helyről vesszük vissza, egyikből sem a koppintható felület rovására:
 *   · a jelek vízszintes belső margója 16 → 14 képpont oldalanként (kilenc jelen 36),
 *   · a két lista közti DÍSZ-hézag (`ml-md-3` → `ml-lg-3` a nézetben) 20 képpont.
 * Enélkül a maradék hiány 5 képpont volt — mérve, és mérve is tűnt el: a fejléc 768-on
 * 98 helyett 50 képpont magas, vagyis egy sor.
 *
 * A koppintható felület 48 → 44 képpont széles marad — az érintéses irányelvek alsó
 * határa, nem alatta —, a magassága nem változik.
 *
 * Csak `lg` alatt: 992 fölött már a puszta elrejtés is elég, ott nincs miért szűkíteni.
 * A terminál kimarad — annak saját, kesztyűs kézre szabott fejléce van (56px magas
 * koppintási felületekkel), amit ez a szűkítés csak rontana.
 */
@media (min-width: 768px) and (max-width: 991.98px) {

    body:not([data-object="mainframeTerminal"]) .navbar-collapse .navbar-nav-link {
        padding-left: .875rem;
        padding-right: .875rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   PIT20-1026 — KÖZÖS céglogós jelvény (DOM_elements/single/companyBadge.php)
   ─────────────────────────────────────────────────────────────────────────

   ⚠️ AZ ÉRTÉKEK SZÁNDÉKOSAN AZONOSAK az EAM (`.assetCompanyBadge`) és a HRM
      (`.companyBadge` + inline geometria) meglévő jelvényével. Így ahol a két
      régi példány is fut, ott a szabály ütközése VIZUÁLISAN no-op: az EAM
      specifikusabb osztálya és a HRM inline geometriája egyaránt nyer, és
      mindkettő ugyanazt az értéket adja.

   ⚠️ A sötét mód MÁR LEFEDI a `.companyBadge`-et (theme-dark.css) — a közös
      részlet ezért külön sötét szabály nélkül is helyes.
*/
.companyBadge {
    width: 24px;
    height: 24px;
    padding: 2px;
    box-sizing: border-box;
    overflow: hidden;
    background: #eef0f3;
    border: 1px solid #e2e5e9;
    flex: 0 0 auto;
}

.companyBadge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.companyBadge .companyBadgeMonogram {
    font-size: 9px;
    font-weight: 600;
    color: #5c6470;
    line-height: 1;
}

/* A kártyafejléc jelvény-sávja: a doboz akkor is tartja a magasságát, ha a
   projekthez (még) nincs cég rendelve — különben a sor ugrálna. */
.projectCompanyBadges {
    min-height: 24px;
}

/* PIT20-1035 — „Alvállalkozóként" a projektkártyán.

   ⚠️ ÜRESEN NEM FOGLAL HELYET: a címke csak azokon a kártyákon jelenik meg, ahol az aktív cég
      nem a tulajdonos. Fix méretet adva minden más kártyán egy üres doboz tolná el a fejlécet. */
.projectRoleLabel:not(:empty) {
    display: inline-block;
    margin-left: .5rem;
    padding: .125rem .375rem;
    border: 1px solid #d7dce3;
    border-radius: .1875rem;
    font-size: .75rem;
    font-weight: 400;
    color: #5c6470;
    background: #f4f6f9;
}