body {font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin:0; color:var(--text);}
.page {padding:24px;}
.btn {appearance:none;border:1px solid var(--border);background:#fafafa;padding:8px 12px;border-radius:8px;cursor:pointer}
.btn-primary {background:#335dff;color:#fff;border-color:#335dff}

/* Modal - Spotlight style */
.cmdk-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.25);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:15vh;
    z-index:9999;
    animation:cmdk-fade-in .2s ease;
}
.cmdk-modal[hidden]{display:none}
.cmdk-body{
    background:rgba(255,255,255,.95);
    width:600px;
    max-width:90vw;
    border-radius:14px;
    padding:0;
    box-shadow:0 20px 60px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
    overflow:hidden;
    animation:cmdk-scale-in .25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cmdk-fade-in{from{opacity:0}to{opacity:1}}
@keyframes cmdk-scale-in{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-color-scheme: dark) {
    .cmdk-body{
        background:rgba(255,255,255,1);
    }
    .cmdk-search-icon{
        color:#999;
    }
    #cmdk-input{
        color:#fff;
    }
    #cmdk-input::placeholder{
        color:#888;
    }
    .cmdk-modal{
        background:rgba(0,0,0,.5);
    }
    .cmdk-dd{
        background:#1e1e1e;
        border-color:#444;
        color:#fff;
    }
    .cmdk-dd .item{
        color:#fff;
    }
    .cmdk-dd .item:hover{
        background:#2a2a2a;
    }
    .cmdk-dd .item[aria-selected="true"],
    .cmdk-dd .item.active{
        background:#1a4d8f;
        outline-color:#4a8dd8;
    }
    .cmdk-preview{
        background:#1e1e1e;
        color:#e0e0e0;
    }
    .rate-banner{
        background:#ffffff;
        border-top-color:lightgrey;
        color:#ffe08a;
    }
    .rate-banner.info-banner{
        background:#1a2942;
        border-top-color:#1e88e5;
        color:#90caf9;
    }
    .rate-banner.info-banner #rate-msg{
        color:#90caf9;
    }
    .rate-banner.error-banner{
        background:#2e2416;
        border-top-color:#d4a000;
        color:#ffe08a;
    }
    .rate-banner.error-banner #rate-msg{
        color:#ffe08a;
    }
    .hint{
        color:#999;
    }
}
.row{display:flex;gap:12px;align-items:flex-end}
.col{flex:1}
label{display:block;margin:6px 0 4px;font-size:12px;opacity:.8}
input[type="text"], select {width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;font-size:14px}
input:focus, select:focus {outline: 2px solid var(--focus); outline-offset: 2px;}

.cmdk-input-wrapper{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
}
.cmdk-search-icon{
    flex-shrink:0;
    color:#999;
    opacity:0.6;
}
#cmdk-input:focus{
    border: none!important;
    outline: none!important;
}
#cmdk-input{
    flex:1;
    border:none;
    padding:0;
    font-size:18px;
    border: none!important;
    background:transparent;
    resize:none;
    outline:none;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    line-height:1.5;
    min-height:27px;
    max-height:300px;
    overflow-y:hidden;
    transition:height 0.1s ease;
}

.cmdk-suggestions{display:flex;gap:8px;margin:10px 0}
.cmdk-preview{background:var(--muted);padding:8px;border-radius:8px;max-height:260px;overflow:auto;font:12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}

.hint{font-size:.85rem;color:#666}
.cmdk-dd{position:absolute;background:#fff;border:1px solid var(--border);border-radius:8px;max-height:240px;overflow:auto;z-index:10000;width:calc(100% - 2px)}
.cmdk-dd .item{padding:6px 10px;cursor:pointer}
.cmdk-dd .item:hover{background:#f5f5f5}
.cmdk-dd .item[aria-selected="true"], .cmdk-dd .item.active{background:#eef;outline:1px solid var(--focus)}

/* Toast */
.toast{position:fixed;bottom:16px;right:16px;background:#222;color:#fff;padding:10px 14px;border-radius:8px}
.toast button{margin-left:8px;background:#fff;color:#222;border:none;border-radius:6px;padding:4px 8px;cursor:pointer}
.cmdk-preview{background:#f6f6f6;padding:8px;border-radius:8px;max-height:260px;overflow:auto}
.cmdk-dd{position:absolute;background:#fff;border:1px solid #ddd;border-radius:8px;max-height:240px;overflow:auto;z-index:10000;width:100%}
.cmdk-dd .item{padding:6px 10px;cursor:pointer}
.cmdk-dd .item:hover{background:#f5f5f5}
.cmdk-dd .item[aria-selected="true"], .cmdk-dd .item.active{background:#eef;outline:1px solid #99f}
#cmdk-input:focus {outline:none!important;}
.prd-drawer{position:fixed;inset:0;pointer-events:none;z-index:9999}
.prd-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .2s}
.prd-panel{position:absolute;top:0;right:-440px;width:420px;max-width:100%;
    background:#fff;box-shadow:-10px 0 30px rgba(0,0,0,.15);display:flex;flex-direction:column;
    transition:transform .25s;transform:translateX(0)}
.prd-header, .prd-footer{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee}
.prd-footer{border-top:1px solid #eee;border-bottom:none}
.prd-body{padding:12px 16px;overflow:auto;flex:1}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row label{font-size:.85rem;color:#555}
.form-row input, .form-row textarea{padding:8px 10px;border:1px solid #ddd;border-radius:10px}
.icon-btn{border:none;background:transparent;font-size:20px;line-height:1;cursor:pointer}
.btn{padding:8px 14px;border-radius:10px;border:1px solid #ddd;background:#fafafa;cursor:pointer}
.btn-primary{background:#1f6feb;border-color:#1f6feb;color:#fff}
.prd-drawer[aria-hidden="false"]{pointer-events:auto}
.prd-drawer[aria-hidden="false"] .prd-backdrop{opacity:1}
.prd-drawer[aria-hidden="false"] .prd-panel{right:0}
.hint{font-size:.85rem;color:#666}
.rate-banner{
    display:flex; align-items:flex-start; gap:10px;
    background:#ffffff; border-top:1px solid lightgrey; color:#7a5900;
    padding:10px 16px; margin:0;
}
#rate-msg{
    font-size:14px;
    color: #333333;
    flex: 1;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
}
/* Táblázat cellák ne törjenek */
#rate-msg table td,
#rate-msg table th {
    white-space: nowrap;
}
#rate-msg table td:nth-child(2) {
    /* Időszak oszlop - megjegyzésnek engedélyezzük a törést */
    white-space: normal;
}
/* Preview táblázatok stílusa */
#cmdk-preview table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* Automatikus táblázat layout */
}
#cmdk-preview table td,
#cmdk-preview table th {
    white-space: nowrap;
    padding: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px; /* Maximum szélesség egy cellának */
}
/* Ha túl széles a táblázat, engedjük a vízszintes scroll-t az adott elemen belül */
#cmdk-preview {
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}
/* A cmdk-body ne legyen scrollozható horizontálisan */
.cmdk-body {
    overflow-x: hidden !important;
    box-sizing: border-box;
}
.rate-banner {
    max-height: none !important;
    height: auto !important;
    overflow-x: hidden !important; /* Ne legyen horizontal scroll a banneren */
}
/* Info banner variant - for informational messages (not errors) */
.rate-banner.info-banner{
    background:#ffffff;
    border-top:1px solid lightgrey;
    color:#0d47a1;
}
.rate-banner.info-banner #rate-msg{
    color:#333333;
}
/* Error banner variant - for errors */
.rate-banner.error-banner{
    background:#fff9e6;
    border-top:1px solid #ffe58a;
    color:#7a5900;
}
.rate-banner.error-banner #rate-msg{
    color:#7a5900;
}
.prd-drawer {
    z-index: 12000;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prd-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 1;
}
.prd-drawer:not(.hidden) .prd-backdrop {
    opacity: 1;
}
@keyframes drawerBounceIn {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes drawerBounceOut {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.3); opacity: 0; }
}
@keyframes backdropFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes backdropFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.prd-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
}
.prd-panel {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2;

    width: clamp(300px, 90%, 900px);
    margin-top: 20vh;
    margin-bottom: 20vh;

    opacity: 0;
    transform: scale(0.3);
}

.prd-drawer:not(.hidden):not(.closing) .prd-panel {
    animation: drawerBounceIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.prd-drawer.closing .prd-panel {
    animation: drawerBounceOut 0.3s ease forwards;
}
.prd-drawer:not(.hidden):not(.closing) .prd-backdrop {
    animation: backdropFadeIn 0.35s ease forwards;
}

.prd-drawer.closing .prd-backdrop {
    animation: backdropFadeOut 0.25s ease forwards;
}
.prd-body {
    min-height: 0;    /* ha volt max-height, felülírjuk */
    flex: 1 1 auto;      /* ne nyúljon szét flex layoutban */
    overflow: auto;   /* ne vágja le a belső részeket */
}

.prd-sections {
    height: auto;
    max-height: none;
    flex: 0 0 auto;
    overflow: visible;
}
.field-error { outline: 2px solid #ef4444; border-radius: 6px; }
.prd-alert{ margin:12px; padding:10px 12px; border-radius:8px; font-size:14px; line-height:1.4;white-space: pre-line; }
.prd-alert:not(.hidden){ display:block; }
.prd-alert.hidden{ display:none; }
.prd-alert[data-kind="error"]{ background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca; }
.prd-alert[data-kind="info"] { background:#eef2ff; color:#1e3a8a; border:1px solid #c7d2fe; }
.select2-container--default .select2-selection--single .select2-selection__arrow b, .select2-container--krajee-bs3 .select2-selection--single .select2-selection__arrow  b {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0;
    border: none;
    top: auto;
    left: auto;
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1936 6.66751L8.33656 10.1626C8.15037 10.3903 7.84942 10.3903 7.66324 10.1626L4.80614 6.66751C4.61996 6.43975 4.61996 6.07161 4.80614 5.84385C4.99233 5.61609 5.1428 5.67304 5.38089 5.67304L7.99989 5.67304L10.4218 5.67304C10.857 5.67304 11.0075 5.61609 11.1936 5.84385C11.2865 5.95744 11.3332 6.10656 11.3332 6.25568C11.3332 6.4048 11.2865 6.55393 11.1936 6.66751Z' fill='%233A4254'/%3E%3C/svg%3E");
    transition: transform .175s ease-in-out;
}
#uni-drawer.hidden .prd-panel { visibility: hidden; }
#uni-drawer:not(.hidden) .prd-panel { visibility: visible; }

.pp-wrap { display:flex; flex-direction:column; gap:.75rem; }
.pp-search input {
    width:100%; padding:.6rem .75rem; border:1px solid #e3e3e3; border-radius:8px;
}
.pp-list { list-style:none; margin:0; padding:0; max-height:45vh; overflow:auto; }
.pp-item { padding:.6rem .5rem; border-radius:8px; cursor:pointer; }
.pp-item:hover { background:#f6f6f8; }
.pp-title { font-weight:600; }
.pp-tax   { font-weight:400; color:#666; }
.pp-sub   { font-size:.9rem; color:#666; margin-top:.15rem; }
.pp-foot  { display:flex; justify-content:flex-end; }
.btn-ghost { background:transparent; border:1px solid #d9d9df; }
/* Drawerben a required mezők csillagának megjelenítése */
.prd-dynamic .form-group.required > label.control-label::after,
.prd-dynamic .required > label::after,
.prd-sections .form-group.required > label.control-label::after,
.prd-sections .required > label::after {
    content: " *";
    color: var(--danger, #e11d48);
    font-weight: 600;
    margin-left: .25rem;
}
.agent-pto-form {
    background: #fff;
    border: 1px solid #e7eaec;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}
.agent-pto-form .form-group {
    margin-bottom: 15px;
}
.agent-pto-form label {
    font-weight: 600;
    color: #676a6c;
    display: block;
    margin-bottom: 5px;
}
.agent-pto-form .help-block-error {
    color: #EC554F;
    font-size: 12px;
    margin-top: 5px;
}
.agent-pto-form .date-inputs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.agent-pto-form .date-inputs > div {
    flex: 1;
    min-width: 150px;
}
.agent-pto-form .btn-group {
    margin-top: 20px;
    text-align: center;
}
.agent-pto-form .btn-group button {
    margin: 0 5px;
}