.light-theme { --bg-body: rgba(37, 36, 35); --bg-left: #1B1B1B; --bg-main: #1e1e1e; --bg-header: #2a2a2a; --bg-row-odd: #222; --bg-row-even: #262626; --bg-hover: #333; --bg-popup: rgba(32,31,30,1); --bg-invert: rgba(255, 255, 255, 1); --bt-btn: rgba(51, 88, 165); --bt-btn-hover: rgba(51, 88, 165); --bg-btn-submit: rgba(51, 88, 165, 1); --bg-btn-delete: rgba(184, 14, 28, 1); --bg-btn-disable: rgba(188, 188, 188, 1); --bg-input: rgba(32, 31, 30, 1); --bg-input-invers: rgba(255, 255, 255, 1); --text-btn: rgba(255, 255, 255, 1); --text-invers: rgba(32, 31, 30, 1); --text-main: #e5e5e5; --text-secondary: #b5b5b5; --text-popup: #ffffff; --text-input-invers: rgba(32, 31,30,1); --border-color: #3a3a3a; --link-color: #4da3ff; --link-hover: #82c4ff; --input-border: rgba(210, 210, 210); --bg-modal-overlay: rgba(255,255,255,0.5); --icon-default: rgba(0, 120, 212); --icon-done: rgba(55, 253, 18) }

.dark-theme { --bg-body: rgba(37, 36, 35); --bg-left: #1B1B1B; --bg-main: #1e1e1e; --bg-header: #2a2a2a; --bg-row-odd: #222; --bg-row-even: #262626; --bg-hover: #333; --bg-popup: rgba(32,31,30,1); --bg-invert: rgba(255, 255, 255, 1); --bt-btn: rgba(51, 88, 165); --bt-btn-hover: rgba(51, 88, 165); --bg-btn-submit: rgba(51, 88, 165, 1); --bg-btn-delete: rgba(184, 14, 28, 1); --bg-btn-disable: rgba(188, 188, 188, 1); --bg-input: rgba(32, 31, 30, 1); --bg-input-invers: rgba(255, 255, 255, 1); --text-btn: rgba(255, 255, 255, 1); --text-invers: rgba(32, 31, 30, 1); --text-main: #e5e5e5; --text-secondary: #b5b5b5; --text-popup: #ffffff; --text-input-invers: rgba(32, 31,30,1); --border-color: #3a3a3a; --link-color: #4da3ff; --link-hover: #82c4ff; --input-border: rgba(210, 210, 210); --bg-modal-overlay: rgba(255,255,255,0.5); --icon-default: rgba(0, 120, 212); --icon-done: rgba(55, 253, 18) }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background-color: var(--bg-body); color: var(--text-main); font-family: 'Aptos Display'; font-size: 15px; position: relative; min-height: 100%; height: 100%; overflow: hidden; }
a { color: var(--color2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; }

.icon-default { fill: var(--icon-default); width: 20px; height: 20px; }
.icon-done { fill: var(--icon-done); width: 20px; height: 20px; }
.icon-green { --icon-default: #16a34a; }
.icon-red { --icon-default: #dc2626; }


.bodypopup { background-color: var(--bg-popup); color: var(--text-popup); margin: 0; padding: 0; overflow-y: auto; }

html { }

.fs-xs { font-size: 0.75rem; }
.fs-sm { font-size: 0.875rem; }
.fs-base { font-size: 1rem; }
.fs-lg { font-size: 1.125rem; }
.fs-xl { font-size: 1.25rem; }
.fs-2xl { font-size: 1.5rem; }
.fs-3xl { font-size: 1.875rem; }
.fs-4xl { font-size: 2.25rem; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }

input[type="text"], input[type="number"], input[type="email"], input[type="password"],
select { background-color: var(--bg-input); color: var(--text-btn); border: 1px solid var(--input-border); padding: 4px 4px; font-size: 14px; border-radius: 2px; transition: all 0.2s ease-in-out; box-sizing: border-box; }
textarea { background-color: var(--bg-input); color: var(--colorinput); border: 1px solid var(--input-border); padding: 3px 4px; font-size: 14px; border-radius: 2px; transition: all 0.2s ease-in-out; box-sizing: border-box; }
input:hover, select:hover, textarea:hover { border-color: var(--borderinput); }
input:disabled, select:disabled, textarea:disabled { background-color: #f5f5f5; color: #999; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: #aaa; font-style: italic; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.inputinvers { background-color: var(--bg-input-invers) !important; color: var(--text-input-invers) !important; }

.medium-checkbox { transform: scale(1.4); /* 1.0 = alap, 1.8 = 80%-kal nagyobb */ transform-origin: center; /* középről nagyít */ cursor: pointer; /* mutató kurzor */ }
.big-checkbox { transform: scale(1.8); /* 1.0 = alap, 1.8 = 80%-kal nagyobb */ transform-origin: center; /* középről nagyít */ cursor: pointer; /* mutató kurzor */ }

button, .btn { background-color: var(--bg-btn-submit); color: var(--text-btn); border: none; padding: 9px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out; }
.abtn { border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out; text-decoration: none !important; }

button:hover, .abtn:hover, .btn:hover { background-color: var(--bt-btn-hover); text-decoration: none; }
button:active, .btn:active { transform: scale(0.97); }
button:disabled, .btn:disabled { background-color: var(--bg-btn-disable); cursor: not-allowed; }

.btn-primary { background-color: var(--bg-btn-submit); display: block; }
.btn-primary:hover { background-color: var(--bg-btn-submit); display: block; }
.btn-delete { background-color: var(--bg-btn-delete); display: block; }
.btn-delete:hover { background-color: var(--bg-btn-delete); display: block; }


input[type="checkbox"][disabled] { cursor: default !important; }

.result-message-local { padding: 10px; border-radius: 8px; color: var(--color1); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dashboard-panel { background: #1f1f1f; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); margin: 20px 0; overflow: hidden; border: 1px solid #343434; }
.dashboard-panel-header { background: linear-gradient(90deg, #2a2a2a, #3a3a3a); color: #f3f3f3; font-size: 18px; font-weight: 600; padding: 14px 18px; border-bottom: 1px solid #404040; letter-spacing: 0.5px; }
.dashboard-panel-body { color: #dedede; }
.dashboard-panel-body .text-center { text-align: center; }


table.dark-table { width: 100%; border-collapse: collapse; margin-top: 0rem; }
table.dark-table th, table.dark-table td { padding: 12px 16px; text-align: left; }
table.dark-table th { background-color: #2b2b3c; color: var(--color1); }
table.dark-table tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.04); }
table.dark-table tr:hover { background-color: rgba(0, 255, 255, 0.1); }
.tablecontainer { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 0px 20px 20px 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); }


.divcolumn { display: flex; flex-direction: column; }
.divcolumngap5 { display: flex; flex-direction: column; gap: 5px; }
.divrow { display: flex; flex-direction: row; }
.divrowgap10 { display: flex; flex-direction: row; gap: 10px; }
.alert { padding: 10px; }
.alert-success { background-color: green; color: white; }
.alert-danger { background-color: red; color: white; }
.gap5 { gap: 5px; }
.gap10 { gap: 10px; }
.gap15 { gap: 15px; }
.gap20 { gap: 20px; }
.gap25 { gap: 25px; }

.divlabel { text-align: right; align-content: center; }
.divlabelpartner { width: 150px; min-width: 150px; max-width: 150px; text-align: right; align-content: center; }
.divlabelcontactpeson { width: 40%; min-width: 40%; max-width: 40%; text-align: right; align-content: center; }
.divlabePartnerInteraction { width: 150px; min-width: 150px; 150px; text-align: right; align-content: center; }
.divlabelproject { width: 150px; text-align: right; align-content: center; }
.divlabelinvoice { width: 150px; text-align: right; align-content: center; }
.divlabeloffer { width: 250px; text-align: right; align-content: center; }
.divvalue { }
.divvaluecontactperson { width: 60%; min-width: 60%; max-width: 60%; }

.datatable td { padding: 5px; }
.datatable th { padding: 10px; background-color: #4472C4; color: #ffffff; text-align: center; }
.tbheader { background-color: #4472C4; color: #ffffff; text-align: center; font-weight: bold; }
.datatable tr:nth-of-type(odd) { background-color: #D9E1F2; color: black; }
.datatable tr:nth-of-type(even) { background-color: #B4C6E7; color: black; }
.datatable a { color: black; }

.center { text-align: center; }
.number { text-align: right !important; padding-right: 3px; }

.bold { font-weight: bold; }

.result-message { position: fixed; top: 15px; left: 50%; transform: translateX(-50%); color: #fff; padding: 12px 25px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); font-weight: 500; z-index: 9999; opacity: 0; transition: opacity 0.4s ease-in-out; }
.messageshow { display: block !important; opacity: 1 !important; }
.messageok { background-color: #4CAF50; }
.messageerror { background-color: #c0392b; }
.text-danger { color: red; }

h1 { color: var(--text-main); text-align: left; margin-bottom: 0rem; }
h2 { color: #9FA8DA; text-align: center; margin-bottom: 2rem; padding: 20px 0px; }

.w30 { width: 30px; min-width: 30px; max-width: 30px; }
.w40 { width: 40px; min-width: 40px; max-width: 40px; }
.w50 { width: 50px; min-width: 50px; max-width: 50px; }
.w75 { width: 75px; min-width: 75px; max-width: 75px; }
.w100 { width: 100px !important; min-width: 100px !important; max-width: 250px !important; }
.w120 { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
.w150 { width: 150px; min-width: 150px; max-width: 150px; }
.w180 { width: 180px; min-width: 180px; max-width: 180px; }
.w200 { width: 200px; min-width: 200px; max-width: 200px; }
.w250 { width: 250px; min-width: 250px; max-width: 250px; }
.w300 { width: 300px; min-width: 300px; max-width: 300px; }
.w350 { width: 350px; min-width: 350px; max-width: 350px; }
.w400 { width: 400px; min-width: 400px; max-width: 400px; }
.w450 { width: 450px; min-width: 450px; max-width: 450px; }
.w500 { width: 500px; min-width: 500px; max-width: 500px; }
.w600 { width: 600px; min-width: 600px; max-width: 600px; }
.w100p { width: 100%; }

.padding10 { padding: 10px; }

.p10 { padding: 10px; }
.p15 { padding: 15px; }
.p20 { padding: 20px; }
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.pt20 { padding-top: 20px; }
.pr20 { padding-right: 20px; }

.mgt15 { margin-top: 15px; }

.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }

.bg_invers { background-color: var(--bg-invert); color:var(--bg-input); }
.bg3 { background-color: var(--bgcolor3); }
.bg4 { background-color: var(--bgcolor4); }

.layout { display: flex; height: 100vh; }

.leftmenu { width: 200px; top: 0; left: 0; bottom: 0; padding: 20px 0px 20px 0px; font-family: 'Segoe UI', sans-serif; color: #fff; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; }
.leftmenu { background-color: var(--bg-left); color: var(--text-main); }
.leftmenu a,
.leftmenu .toggle { color: var(--text-main); display: block; padding: 6px 10px; text-decoration: none; transition: background 0.2s, color 0.2s; cursor: pointer; }
.leftmenu .toggle:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--color1); }
.leftmenu a.active { background-color: rgba(255, 255, 255, 0.15); color: #3aaaff; }
main { height: 100vh; width: 100%; overflow-y: auto; /* csak ez scrollozzon! */ background: var(--bgcolor2); color: var(--color2); padding: 0px; box-sizing: border-box; }

.leftmenu .submenu a { padding-left: 40px; }

.toggle .arrow { float: right; transition: transform 0.3s ease; }
.toggle.open .arrow { transform: rotate(120deg); }
.submenu { display: none; transition: all 0.3s ease; }
.submenu a { font-size: 14px; padding: 6px 20px; }
.submenu.open { display: block; }


.page-container { display: flex; flex-direction: column; }
/* A felső szűrősáv */
.page-filters { backdrop-filter: blur(5px); /* kis üvegfólia hatás, ha átlátszóság kell */ background-color: rgba(55,57,59,0.9); color: var(--color1); position: sticky; top: 0; /* vagy pl. 60px, ha van fix header */ z-index: 100; padding: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding-left: 20px; }
.page-ListContainer { overflow: visible; }
.page-filters h1 { margin: 0; font-size: 22px; color: var(--color1); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pagedetail { padding: 20px 0px 0px 0px; }
.tabs { max-width: 100%; margin: 0 auto; }
.tab-buttons { display: flex; border-bottom: 2px solid #2a2a3a; }
.tab-buttons { display: flex; border-bottom: 2px solid #2a2a3a; }
.tab-button { width: 200px; padding: 12px 16px; background: none; border: none; cursor: pointer; color: #aaa; font-size: 16px; transition: background 0.2s, color 0.2s; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
.tab-button:hover { background: rgba(255, 255, 255, 0.05); color: var(--color2); font-weight: bold; }
.tab-button.active { background: rgba(255, 255, 255, 0.05); color: var(--color2); font-weight: bold; }
.tab-content { background: var(--bgcolor4); margin-top: -2px; border-radius: 0px 0px 8px 8px; }
.tab-pane { display: none; }
.tab-pane.active { display: flex; flex-direction: column; gap: 5px; }

.side-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 998; }

.side-panel { position: fixed; top: 0; right: 0; max-width: 100%; height: 100vh; background: var(--bg-left); box-shadow: -4px 0 12px rgba(0,0,0,0.15); transform: translateX(100%); transition: transform .25s ease; z-index: 999; display: flex; flex-direction: column; }

.side-panel-header { padding: 10px 16px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; font-weight: 600; }

.side-panel-close { border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }

.side-panel-body { /*padding: 10px 16px;*/ overflow-y: auto; flex: 1; }

/* Nyitott állapot */
.side-panel.open { transform: translateX(0); }

.side-panel-overlay.open { opacity: 1; pointer-events: auto; }



.xmodal-overlay { position: fixed; inset: 0; background: var(--bg-modal-overlay); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.xmodal { background: var(--bg-popup); border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); width: min(90vw, 900px); height: min(90vh, 600px); display: flex; flex-direction: column; overflow: hidden; /* fejléc fix */ }
.xmodal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #eee; user-select: none; background-color: var(--bgcolor1); color: var(--color1); }
.xmodal-title { font-weight: 600; font-size: 1.3em; }
.xmodal-close { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; padding: 6px; color: var(--color1); }
.xmodal-body { flex: 1; overflow-y: auto; /* ✅ itt a scroll */ padding: 20px 20px 20px 20px; height: 100%; }
.xmodal-body iframe { width: 100%; height: 100%; border: 0; display: block; cursor: text; overflow-y: auto; }

body.xmodal-open { overflow: hidden; }

.xmodal, .xmodal-body, .xmodal-body iframe { box-sizing: border-box; }
.xmodal { transition: width 0.25s ease, height 0.25s ease; }

.list-table { background: var(--bg-main); color: var(--text-main); display: flex; flex-direction: column; overflow: hidden; font-size: 15px; }
.list-row:nth-of-type(odd) { background: var(--bg-row-odd); }
.list-row:nth-of-type(even) { background: var(--bg-row-even); }
.list-row:hover { background: var(--bg-hover); transition: background 0.2s; }
.list-row a { color: var(--link-color); text-decoration: none; }
.list-row a:hover { color: var(--link-hover); text-decoration: underline; }
.no-data { color: var(--text-secondary); padding: 12px; text-align: center; color: red; }
.list-header { text-align: center; align-items: center; padding: 10px 0px; background: var(--bg-header); font-weight: 600; color: #fff; border-bottom: 1px solid var(--border-color); text-transform: uppercase; letter-spacing: 0.5px; }
.list-row { align-items: center; border-bottom: 1px solid var(--border-color); }
.rowp2 { padding: 2px 10px; }
.rowp4 { padding: 4px 10px; }
.rowp6 { padding: 6px 10px; }
.rowp8 { padding: 8px 10px; }
.center { display: flex; justify-content: center; align-items: center; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; line-height: 0; padding: 0; margin: 0; }



.div-col-copy { width: 25px; }
.list-invoice-columns { display: grid; grid-template-columns: 30px 20px 150px 40px 80px 120px 180px 120px 120px 100px 50px 100px 100px 100px 30px; gap: 10px; }
.list-invoicegroupped-columns { display: grid; grid-template-columns: 30px 20px 150px 40px 80px 120px 180px 120px 120px 100px 50px 100px 100px 100px; gap: 10px; }
.list-partner-columns { display: grid; grid-template-columns: 60px 70px 120px 250px 120px 120px 120px 140px 30px 30px; gap: 10px; }
.list-partnercontactperson-columns { display: grid; grid-template-columns: 50px 200px 150px 350px 120px 70px 70px 100px 130px 50px 50px 50px; }
.list-partneraddress-columns { display: grid; grid-template-columns: 50px 300px 100px 100px 100px 100px 100px 100px 120px 200px 150px 120px 50px; }
.list-partnerinteraction-columns { display: grid; grid-template-columns: 50px 120px 150px 50px 150px 150px 400px 100px 150px; gap: 10px; }
.list-partnerinteractionforcall-columns { display: grid; grid-template-columns: 50px 120px 200px 50px 120px; gap: 10px; }
.list-project-columns { display: grid; grid-template-columns: 220px 60px 200px 100px 90px 80px 60px 80px 90px 90px 100px 100px 100px 30px 30px; gap: 6px; }
.list-projectactive-columns { display: grid; grid-template-columns: 220px 60px 220px 120px 90px 80px 70px 90px 90px 100px 120px 30px; gap: 6px; }
.list-projectcurrentmonth-columns { display: grid; grid-template-columns: 220px 60px 200px 100px 90px 80px 70px 90px 90px 100px 120px 30px; gap: 6px; }
.list-projectnextmonth-columns { display: grid; grid-template-columns: 220px 60px 200px 100px 90px 80px 70px 90px 90px 100px 120px 30px; gap: 6px; }
.list-projectoverdue-columns { display: grid; grid-template-columns: 220px 60px 200px 100px 90px 80px 70px 90px 100px 100px 130px 120px 30px; gap: 0px; }
.list-project_pendingreview_columns { display: grid; grid-template-columns: 220px 60px 250px 90px 90px 80px 60px 80px 90px 90px 90px 90px 120px 30px; gap: 6px; }

.list-projectgroupped-columns { display: grid; grid-template-columns: 220px 90px 80px 80px 100px 100px 100px 70px 70px 100px 100px 80px 80px 80px 30px; gap: 10px; font-size: 12px; }
.list-projectupcoming-columns { display: grid; grid-template-columns: 220px 80px 100px 100px 80px 90px 90px 90px 70px 70px 110px 100px 100px 100px 30px; gap: 10px; }
.list-projectitem-columns { display: grid; grid-template-columns: 20px 100px 20px auto 50px 25px 125px 70px 25px 125px 60px 60px 60px 75px 75px 75px 100px 25px; gap: 5px; font-size: 12px; }
.list-projectitemupcoming-columns { display: grid; grid-template-columns: 20px 130px 200px 80px 20px 400px 50px 130px 130px 120px 100px; gap: 5px; }
.list-projectpaid-columns { display: grid; grid-template-columns: 200px 200px 100px 100px 100px; }
.list-invoiceprojectitem-columns { display: grid; grid-template-columns: 40px 220px 220px 120px 250px 150px 60px 60px 60px 60px 60px 60px; gap: 10px; }
.list-offer-columns { display: grid; grid-template-columns: 50px 100px 50px 250px 100px 300px 300px 150px 150px; }
.list-offershort-columns { display: grid; grid-template-columns: 50px 150px 200px 250px 150px; }
.list-offerversion-columns { display: grid; grid-template-columns: 50px 100px 100px 250px 150px 50px; }
.list-offergrouped-columns { display: grid; grid-template-columns: 50px 50px 120px 100px 300px 250px 120px 120px 50px 50px; }
.list-supplierlist-columns { display: grid; grid-template-columns: 200px 350px 200px 150px 400px 50px; }
.list-supplierrevenue-columns { display: grid; grid-template-columns: 200px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; }
.list-salesuserrevenue-columns { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px; }
.list-salesuserrevenue2-columns { display: grid; grid-template-columns: 100px 200px 200px 200px 200px; }

.navigation-btn { background-color: var(--bg-row-even); border: 1px solid var(--border-color); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background-color .2s, transform .1s; color: var(--color1); }
.navigation-btn:hover { background-color: var(--bg-hover); transform: scale(1.05); }
.navigation-btn:active { transform: scale(0.95); }
.arrow { font-size: 18px; line-height: 1; }


::-webkit-scrollbar { width: 20px; width: 20px; height: 10px; height: 10px; }

/* A sáv háttere */
::-webkit-scrollbar-track { background: var(--bgcolor1); border-radius: 10px; }

/* A fogantyú (scroll thumb) */
::-webkit-scrollbar-thumb { background: #000; /* fekete */ border-radius: 10px; }

/* Hover állapot – kicsit világosabb */
::-webkit-scrollbar-thumb:hover { background: var(--bgcolor1); }

/* 🔹 Firefox támogatás */
* { scrollbar-width: auto; /* vékony */ scrollbar-color: #000 #444746; /* thumb - track */ }