:root{
    --bg:#f6f8fc;
    --panel:#ffffff;
    --panel-2:#f4f7ff;
    --muted:#64748b;
    --text:#0f172a;

    --accent:#0ea5e9;
    --accent-2:#16a34a;
    --danger:#dc2626;
    --warn:#d97706;

    --border:rgba(2,6,23,0.08);
    --border-strong:rgba(2,6,23,0.16);
    --shadow:0 10px 25px rgba(2,6,23,0.06);

    --radius:14px;
    --radius-sm:10px;

    --input:#f7f9ff;

    /* Background layers (used by fixed pseudo-element for stable scroll) */
    --bg-grad-1: radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,0.08), transparent 45%);
    --bg-grad-2: radial-gradient(1200px 700px at 90% 0%, rgba(22,163,74,0.06), transparent 50%);
    --bg-grad-3: radial-gradient(900px 520px at 20% 80%, rgba(168,85,247,0.08), transparent 55%);
    --bg-grad-4: radial-gradient(1000px 520px at 75% 70%, rgba(250,204,21,0.06), transparent 55%);
    --bg-grad-5: radial-gradient(900px 520px at 55% 25%, rgba(59,130,246,0.06), transparent 60%);
    --bg-grad-6: radial-gradient(800px 480px at 40% 10%, rgba(255,255,255,0.45), transparent 55%);
}

/* DARK THEME OVERRIDES */
html[data-theme="dark"]{
    --bg:#0b1220;
    --panel:#0f172a;
    --panel-2:#111c33;
    --muted:#94a3b8;
    --text:#e5e7eb;

    --accent:#38bdf8;
    --accent-2:#22c55e;
    --danger:#ef4444;
    --warn:#f59e0b;

    --border:rgba(255,255,255,0.08);
    --border-strong:rgba(255,255,255,0.14);
    --shadow:0 10px 30px rgba(0,0,0,0.25);

    --input:#0b142b;

    --bg-grad-1: radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,0.10), transparent 45%);
    --bg-grad-2: radial-gradient(1200px 700px at 90% 0%, rgba(34,197,94,0.08), transparent 50%);

    --bg-grad-3: radial-gradient(900px 520px at 20% 80%, rgba(168,85,247,0.10), transparent 55%);
    --bg-grad-4: radial-gradient(1000px 520px at 75% 70%, rgba(250,204,21,0.07), transparent 55%);
    --bg-grad-5: radial-gradient(900px 520px at 55% 25%, rgba(59,130,246,0.08), transparent 60%);
    --bg-grad-6: radial-gradient(800px 480px at 40% 10%, rgba(255,255,255,0.10), transparent 55%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
    background: var(--bg);
    color:var(--text);
}

/* Fixed background overlay for stable scrolling */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background: var(--bg-grad-1), var(--bg-grad-2), var(--bg-grad-3), var(--bg-grad-4), var(--bg-grad-5), var(--bg-grad-6), var(--bg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center top;
    transform: translateZ(0);
}

/* Links */
a{
    color:var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: rgba(127,127,127,0.35);
}
a:hover{
    opacity:0.95;
    text-decoration-color: currentColor;
}

/* Visited links should not change color */
a:visited{
    color:var(--accent);
}
.ticket-link{
    color:var(--text);
    text-decoration-color: rgba(127,127,127,0.35);
}
.ticket-link:hover{
    text-decoration-color: currentColor;
}


.ticket-link:visited{
    color:var(--text);
}
/* View/Edit toggles (customer/organization pages) */
.edit-toggle .edit-mode{display:none;}
.edit-toggle.is-editing .view-mode{display:none;}
.edit-toggle.is-editing .edit-mode{display:block;}

.muted{color:var(--muted); font-size:12px}
.small-input{max-width:120px}

.app-container{
    max-width:1200px;
    margin:0 auto;
    padding:18px 16px 36px;
}

/* Page header */
.page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:6px 0 16px;
}
.page-header h1{
    font-size:clamp(20px, 1.45vw, 25px);
    font-weight:650;
    font-variant: small-caps;
    letter-spacing:0.2px;
    margin:0;
    line-height:1.15;
}

.page-header-ticket{
    align-items:flex-start;
}
.page-header-ticket .page-header-actions{
    flex:0 0 auto;
}
.page-header-ticket .ticket-title{
    font-size:clamp(18px, 1.3vw, 22px);
    line-height:1.22;
    max-width:min(100%, 1150px);
}
.ticket-title-status{
    display:inline-flex;
    align-items:center;
    gap:0.15em;
    white-space:nowrap;
    font-weight:650;
    font-size:0.92em;
}

/* Topbar */
html{
    scroll-padding-top: calc(var(--topbar-offset, 0px) + 12px);
}
body.has-fixed-topbar{
    padding-top: var(--topbar-offset, 88px);
}
.topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .topbar{
    background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(15,23,42,0.92));
}

.topbar-inner{
    width:100%;
    max-width:none;
    margin:0;
    padding:10px 24px;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);
    align-items:center;
    gap:14px;
}
.brand{
    justify-self:start;
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--text);
    font-weight:650;
}
.brand-logo{
    height:50px;
    width:auto;
    object-fit:contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}
.brand-text{
    font-size:13px;
    letter-spacing:0.3px;
    opacity:0.95;
}

/* App version badge (header) */
.version-badge{
    padding:3px 8px;
    border-radius:999px;
    font-size:12px;
    line-height:1;
    letter-spacing:0.2px;
    color:var(--text-muted);
    border:1px solid var(--border);
    background:rgba(127,127,127,0.06);
}

.topbar-center{
    justify-self:center;
    display:inline-flex;
    gap:8px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    min-width:0;
    margin:0;
}
.topbar-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:10px;
    text-decoration:none;
    font-size:12px;
    color:var(--text);
    background: rgba(127,127,127,0.06);
    border:1px solid var(--border);
    transition:0.15s ease;
    opacity:0.85;
}
.topbar-pill:hover{
    background: rgba(127,127,127,0.12);
    opacity:1;
}
.topbar-pill.active{
    background: rgba(127,127,127,0.18);
    border-color: var(--border-strong);
    opacity:1;
}

.topbar-right{
    justify-self:end;
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}
.topbar-icon{
    text-decoration:none;
    font-size:16px;
    line-height:1;
    padding:6px 8px;
    border-radius:8px;
    background: rgba(127,127,127,0.06);
    border:1px solid var(--border);
    color: var(--text);
    cursor:pointer;
}
.topbar-icon:hover{
    background: rgba(127,127,127,0.12);
}
.topbar-right .topbar-icon{
    width:36px;
    height:34px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
    gap:0;
}

/* Inbox "new mail" indicator */
.inbox-icon{position:relative;}
.inbox-svg{width:18px; height:18px; display:block;}
.inbox-dot{display:none;position:absolute;top:4px;left:5px;width:8px;height:8px;border-radius:999px;background:#dc2626;box-shadow:0 0 0 0 rgba(220,38,38,.55);z-index:2;}
.inbox-has-new .inbox-dot{display:block;animation: notificationPulse 1.25s ease-in-out infinite;}

/* Status dots in nav */
.dot{
    width:10px;
    height:10px;
    border-radius:999px;
    display:inline-block;
    border:2px solid currentColor;
    background:transparent;
}
.dot-open{color:var(--accent-2)}
.dot-closed{color:var(--danger)}
.dot-pending{color:var(--warn)}
.dot-inprogress{color:#ffe600; background: rgba(255,230,0,0.22); border-color: rgba(255,230,0,0.85); box-shadow: 0 0 0 0 rgba(255,230,0,0.35); animation: inprogressPulse 1.8s ease-in-out infinite;}
@keyframes inprogressPulse{0%{opacity:.55; transform:scale(0.82);}50%{opacity:1; transform:scale(1.18);}100%{opacity:.55; transform:scale(0.82);}}

/* Title dots scale with heading text */
.dot-title{
    width: 0.9em;
    height: 0.9em;
    border-width: 0.14em;
    margin: 0 0.35em 0 0.35em;
    vertical-align: -0.08em;
}

.title-sep{
    margin: 0 0.35em;
    opacity: 0.6;
}

/* Cards */
.form-card,
.card{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:14px 14px;
    box-shadow: var(--shadow);
}
.card-compact{padding:10px 12px}

/* Table */
.table-wrapper{
    overflow:auto;
    border-radius: var(--radius);
}
.table-toolbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:6px 0 14px;
}
.table-toolbar h1{
    font-size:clamp(22px, 1.8vw, 27px);
    font-weight:650;
    font-variant: small-caps;
    letter-spacing:0.2px;
    margin:0;
    line-height:1.15;
}
.table-toolbar-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
    margin-left:auto;
}
.table-counter{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:38px;
    padding:8px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background: rgba(127,127,127,0.06);
    color:var(--text);
    font-size:12px;
    white-space:nowrap;
}
.table-counter strong{
    font-size:13px;
}
.table-search{
    min-width:220px;
}
.table-search .form-input{
    min-width:220px;
}
.ticket-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:780px;
}
.ticket-table thead th{
    position:static;
    top:auto;
    z-index:1;
    background: rgba(127,127,127,0.06);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.6px;
    padding:10px 10px;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
}
.ticket-table tbody td{
    font-size:12.5px;
    padding:10px 10px;
    border-bottom:1px solid rgba(127,127,127,0.10);
    vertical-align:middle;
    line-height:1.45;
}
.ticket-table tbody tr:hover{
    background: rgba(127,127,127,0.05);
}
.table-empty{
    text-align:center;
    color:var(--muted);
    padding:16px 10px;
}

.sortable-table th{cursor:pointer}

/* Badges */
.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 8px;
    border-radius:999px;
    font-size:10.5px;
    border:1px solid var(--border);
    color:var(--text);
    background: rgba(127,127,127,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Status badges (glassy) */
.badge-status-open, .badge-open{
    border-color: rgba(22,163,74,0.40);
    background: rgba(22,163,74,0.12);
    box-shadow: 0 0 0 1px rgba(22,163,74,0.08) inset;
}
.badge-status-pending, .badge-pending{
    border-color: rgba(217,119,6,0.40);
    background: rgba(217,119,6,0.14);
    box-shadow: 0 0 0 1px rgba(217,119,6,0.08) inset;
}

.badge-status-inprogress, .badge-inprogress{
    border-color: rgba(255,230,0,0.55);
    background: rgba(255,230,0,0.16);
    box-shadow: 0 0 0 1px rgba(255,230,0,0.10) inset;
}

.badge-status-closed, .badge-closed{
    border-color: rgba(220,38,38,0.40);
    background: rgba(220,38,38,0.12);
    box-shadow: 0 0 0 1px rgba(220,38,38,0.08) inset;
}

/* Forms */
.form-grid{display:flex; flex-direction:column; gap:14px}
.form-row{display:flex; flex-direction:column; gap:6px}
.form-row-inline{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:12px;
}
.form-label{
    font-size:11px;
    color:var(--muted);
    letter-spacing:0.3px;
}
.form-input,
.form-select,
.form-textarea{
    width:100%;
    background: var(--input);
    border:1px solid var(--border);
    color:var(--text);
    border-radius: var(--radius-sm);
    padding:9px 10px;
    font-size:12.5px;
    outline:none;
    transition: 0.15s ease;
}
.form-textarea{resize:vertical; min-height:90px}
.form-input::placeholder{color:rgba(100,116,139,0.6)}
.form-input:focus,
.form-select:focus,
.form-textarea:focus{
    border-color: rgba(14,165,233,0.45);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}

.form-select{
    appearance:none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(100,116,139,0.7) 50%),
        linear-gradient(135deg, rgba(100,116,139,0.7) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 11px) calc(50% - 2px);
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
}

/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 12px;
    border-radius: 10px;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.2px;
    border:1px solid transparent;
    cursor:pointer;
    transition:0.15s ease;
}
.btn-primary{
    background: linear-gradient(135deg, rgba(14,165,233,0.18), rgba(14,165,233,0.06));
    border-color: rgba(14,165,233,0.35);
    color:#0b1220;
}
html[data-theme="dark"] .btn-primary{
    color:#eaf6ff;
    background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(56,189,248,0.08)), #0b2a45;
    border-color: rgba(56,189,248,0.35);
}
.btn-primary:hover{filter:brightness(1.06)}

.btn-danger{
    background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(239,68,68,0.06));
    border-color: rgba(239,68,68,0.40);
    color: #0b1220;
}
html[data-theme="dark"] .btn-danger{
    color:#ffecec;
    background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(239,68,68,0.08)), #2a0b12;
    border-color: rgba(239,68,68,0.40);
}
.btn-danger:hover{filter:brightness(1.06)}

.btn-secondary{
    background: rgba(127,127,127,0.08);
    border-color: var(--border);
    color:var(--text);
}
.btn-secondary:hover{background: rgba(127,127,127,0.14)}

.btn-outline{background: transparent}
.btn-ghost{
    background: transparent;
    border-color: var(--border);
    color:var(--text);
    opacity:0.9;
}
.btn-ghost:hover{
    background: rgba(127,127,127,0.08);
    opacity:1;
}
.btn-icon{
    width:28px;
    height:28px;
    padding:0;
    font-size:16px;
    line-height:1;
}
.btn-full{width:100%}

.form-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    margin-top:6px;
}

/* Detail grid */
.ticket-meta-grid{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap:10px 14px;
    align-items:stretch;
}
.ticket-meta-col{display:contents;}

.detail-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:10px 14px;
}
.detail-row{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:4px;
    padding:8px 10px;
    min-height:64px;
    height:100%;
    border-radius: 10px;
    background: rgba(127,127,127,0.06);
    border:1px solid rgba(127,127,127,0.08);
}
.detail-label{
    font-size:10px;
    color:var(--muted);
    letter-spacing:0.4px;
    text-transform:uppercase;
}
.detail-value{
    font-size:12.5px;
    color:var(--text);
}

/* TIG toggle + Switch */
.tig-row .tig-options{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.radio-inline{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--text);
}
.tig-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(127,127,127,0.08);
}
.toggle-label{font-size:10.5px; color:var(--muted)}

.switch{
    position:relative;
    display:inline-block;
    width:36px;
    height:20px;
}
.switch input{opacity:0; width:0; height:0}
.slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background: rgba(127,127,127,0.25);
    border:1px solid var(--border);
    transition: .2s;
    border-radius: 999px;
}
.slider:before{
    position:absolute;
    content:"";
    height:14px;
    width:14px;
    left:2px;
    top:2px;
    background: #ffffff;
    transition: .2s;
    border-radius: 999px;
}
.switch input:checked + .slider{
    background: rgba(22,163,74,0.25);
    border-color: rgba(22,163,74,0.45);
}
.switch input:checked + .slider:before{
    transform: translateX(16px);
}

/* Dynamic lists */
.dynamic-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:8px;
}
.dynamic-row{
    display:grid;
    grid-template-columns: 1fr auto auto;
    gap:8px;
    align-items:center;
}

/* Attachments */
.attachment-dropzone{
    border:1px dashed rgba(127,127,127,0.25);
    background: rgba(127,127,127,0.05);
    padding:10px;
    border-radius: 10px;
}
.attachment-previews{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}
.attachment-chip{
    padding:6px 8px;
    border-radius:10px;
    background: rgba(127,127,127,0.08);
    border:1px solid var(--border);
    font-size:11px;
}

/* Attachment rows (ticket_view) */
.att-row{gap:10px}
.att-row > div{flex:1; min-width:0;}
.att-row a.ticket-link{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block;}
.att-row .att-mime{flex-shrink:0; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width: 720px){
  .att-row .att-mime{max-width:140px;}
}


/* Contract attachment list (organization contract modal) */
.contract-attachments{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.contract-attachments .contract-attachment-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border-radius:12px;
    border:1px solid rgba(127,127,127,0.14);
    background: rgba(127,127,127,0.06);
}
.contract-attachments .contract-attachment-line a{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.contract-attachments .contract-attachment-actions{
    display:flex;
    gap:6px;
    flex-shrink:0;
}

/* Thread */
.thread-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:8px;
}
.thread-item{
    border:1px solid rgba(127,127,127,0.14);
    background: rgba(127,127,127,0.06);
    padding:12px;
    border-radius: 14px;
    max-width: 820px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
.thread-item .muted{ font-size:10.5px; letter-spacing:0.2px; margin-bottom:6px; }

/* Internal (agent-only) messages: make them visually distinct */
.thread-item.is-internal{
    background: rgba(148,163,184,0.18);
    border-color: rgba(148,163,184,0.30);
    box-shadow: 0 0 0 1px rgba(148,163,184,0.10) inset, 0 6px 16px rgba(0,0,0,0.10);
}

/* Ticket description highlight (same family as "Nyitott" / green) */
.thread-item.is-description{
    background: rgba(22,163,74,0.12);
    border-color: rgba(22,163,74,0.40);
    box-shadow: 0 0 0 1px rgba(22,163,74,0.08) inset, 0 6px 16px rgba(0,0,0,0.10);
}

/* Closure/solution highlight (same family as "Lezárt" / red) */
.thread-item.is-closure{
    background: rgba(220,38,38,0.12);
    border-color: rgba(220,38,38,0.40);
    box-shadow: 0 0 0 1px rgba(220,38,38,0.08) inset, 0 6px 16px rgba(0,0,0,0.10);
}

/* Ticket view - extra cards (assignees / parts / attachments) */
.ticket-extra-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:12px;
}
.ticket-extra-grid .span-2{ grid-column: span 2; }
.ticket-extra-grid .span-4{ grid-column: span 4; }
.mini-list{ display:flex; flex-direction:column; gap:8px; }
.mini-row{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }

/* Ticket material list: keep quantity/price together, wrap the material name first. */
.ticket-material-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) max-content;
    column-gap:14px;
    row-gap:4px;
    align-items:start;
}
.ticket-material-name{
    min-width:0;
    overflow-wrap:anywhere;
}
.ticket-material-meta{
    opacity:.85;
    white-space:nowrap;
    text-align:right;
}
@media (max-width:520px){
    .ticket-material-row{grid-template-columns:1fr;}
    .ticket-material-meta{text-align:left;}
}

@media (max-width: 980px){
    .ticket-extra-grid{ grid-template-columns: 1fr; }
    .ticket-extra-grid .span-2,
    .ticket-extra-grid .span-4{ grid-column: span 1; }
}

.thread-item.is-left{align-self:flex-start; text-align:left;}
.thread-item.is-right{align-self:flex-end; text-align:right;}
.thread-item.is-right .muted{text-align:right;}

/* Ticket view layout */
.ticket-view-layout{
    display:grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap:14px;
    align-items:start;
}
.ticket-log-panel{
    background: transparent;
    border: none;
    padding: 2px 2px 2px 8px;
}
.ticket-log-item{
    padding:8px 0;
    border-bottom:1px dashed rgba(127,127,127,0.18);
}
.ticket-log-item:last-child{border-bottom:none}
.ticket-log-date{
    display:block;
    font-size:10px;
    color:var(--muted);
    margin-bottom:4px;
}

/* Status footer */
.ticket-status-footer{margin-top:10px}
.status-toggle{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.status-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius: 12px;
    font-size:11.5px;
    font-weight:650;
    border:1px solid var(--border);
    background: rgba(127,127,127,0.08);
    color:var(--text);
    transition:0.15s ease;
}
.status-button:hover{background: rgba(127,127,127,0.14)}
.status-open{border-color: rgba(22,163,74,0.35)}
.status-pending{border-color: rgba(217,119,6,0.35)}
.status-inprogress{border-color: rgba(217,119,6,0.55); background: rgba(217,119,6,0.08);} 
.status-button.is-disabled, .status-button:disabled{opacity:0.55; cursor:not-allowed; filter:grayscale(0.25);} 
.status-button:disabled:hover{background: rgba(127,127,127,0.08);}

.status-closed{border-color: rgba(220,38,38,0.35)}

/* Login pages */
.login-page{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.login-card{
    width:min(460px, 100%);
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:22px 22px;
    box-shadow: var(--shadow);
}
.login-title{
    font-size:18px;
    margin:0 0 14px;
}
.login-form{display:flex; flex-direction:column; gap:10px}
.login-footer{
    margin-top:14px;
    font-size:11px;
    color:var(--muted);
    text-align:center;
}

/* Settings layout */
.settings-layout{
    display:block;
}
.settings-layout > section{
    min-width:0;
}
.settings-sidebar{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:10px;
    box-shadow: var(--shadow);
    position: static;
    margin-bottom:14px;
    overflow:auto;
}
.settings-menu{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.settings-link, .settings-link:visited{
    display:block;
    padding:9px 10px;
    border-radius: 10px;
    font-size:12px;
    color:var(--text);
    border:1px solid transparent;
    background: transparent;
    opacity:0.85;
}
.settings-link:hover{
    background: rgba(127,127,127,0.08);
    opacity:1;
}

.settings-link-active{
    background: rgba(127,127,127,0.14);
    border-color: var(--border);
    opacity:1;
}
.settings-layout.is-loading{
    opacity:.68;
    pointer-events:none;
    transition: opacity .14s ease;
}
.text-success{ color:#166534; }
.text-warning{ color:#92400e; }
.text-danger{ color:#991b1b; }

/* Search input */
.list-search{
    display:flex;
    align-items:center;
    gap:8px;
}
.search-input{
    background: var(--input);
    border:1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    padding:8px 10px;
    font-size:12px;
    min-width:220px;
}

/* Admin TIG highlight rows - stronger */
.tig-row-pending{
    background: rgba(220,38,38,0.20);
    border-left: 4px solid rgba(220,38,38,0.75);
}
.tig-row-done{
    background: rgba(22,163,74,0.22);
    border-left: 4px solid rgba(22,163,74,0.75);
}

html[data-theme="dark"] .tig-row-pending{
    background: rgba(239,68,68,0.20);
    border-left: 4px solid rgba(239,68,68,0.8);
}
html[data-theme="dark"] .tig-row-done{
    background: rgba(34,197,94,0.22);
    border-left: 4px solid rgba(34,197,94,0.8);
}

/* Responsive */
@media (max-width: 1100px){
    .ticket-view-layout{grid-template-columns: minmax(0,1fr) 280px}
}
@media (max-width: 980px){
    .form-row-inline{grid-template-columns: 1fr 1fr}
    .detail-grid{grid-template-columns: 1fr}
    .ticket-meta-grid{grid-template-columns: 1fr}
    .settings-layout{grid-template-columns: 200px minmax(0,1fr)}
}
@media (max-width: 980px){
    body.has-fixed-topbar{padding-top: var(--topbar-offset, 132px);}
    .topbar-inner{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        padding:10px 16px;
    }
    .brand{width:auto;}
    .topbar-center{
        flex:1 1 100%;
        width:100%;
        margin:0;
        justify-content:flex-start;
    }
    .topbar-right{
        width:auto;
        margin-left:auto;
        justify-content:flex-end;
    }
    .ticket-view-layout{grid-template-columns: 1fr}
    .settings-layout{grid-template-columns: 1fr}
    .settings-sidebar{position: static}
    .table-toolbar-right{width:100%; justify-content:flex-start; margin-left:0;}
    .table-counter{white-space:normal;}
    .table-search{width:100%;}
    .table-search .form-input{width:100%; min-width:0;}
}
@media (max-width: 640px){
    body.has-fixed-topbar{padding-top: var(--topbar-offset, 174px);}
    .topbar-center,
    .topbar-right{
        width:100%;
        justify-content:flex-start;
        margin-left:0;
    }
    .topbar-right{order:3;}
}
@media (max-width: 560px){
    .form-row-inline{grid-template-columns: 1fr}
    .dynamic-row{grid-template-columns: 1fr 1fr auto}
    .search-input{min-width: 160px; width: 100%}
}


/* Modal (admin -> Üzenet az ügyfélnek) */
.modal{display:none;position:fixed;inset:0;z-index:9999}
.modal.is-open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-dialog{
  position:relative;
  max-width:720px;
  margin:8vh auto;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:var(--panel)
}
.modal-header h2{margin:0;font-size:16px}
.modal-body{padding:14px 16px;background:var(--panel)}
.modal-close{
  background:transparent;
  border:0;
  color:var(--text);
  opacity:.85;
  font-size:22px;
  line-height:1;
  cursor:pointer
}
.modal-close:hover{opacity:1}
body.modal-open{overflow:hidden}


.ticket-footer-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.status-toggle{display:flex;gap:8px;flex-wrap:wrap}

/* Small buttons */
.btn-sm{padding:6px 10px; font-size:12px; border-radius:10px}

/* Button links should not be underlined */
a.btn, a.btn:visited, a.btn:hover{ text-decoration:none; }

.ticket-message-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* Organization contracts (square cards) */
.contract-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}
@media (max-width:1100px){
  .contract-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:650px){
  .contract-grid{grid-template-columns:1fr;}
}

.contract-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  text-align:center;
  cursor:pointer;
  background:var(--panel);
  color:var(--text);
  box-shadow:var(--shadow);
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  position:relative;
  overflow:hidden;
  transition:transform .08s ease, border-color .08s ease;
}
.contract-card:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
.contract-top{width:100%; display:flex; flex-direction:column; gap:6px; align-items:center; z-index:1;}
.contract-type{font-weight:800;font-size:14px; text-align:center}
.contract-sites{font-weight:600; font-size:12px; opacity:.9; text-align:center; white-space:pre-line; max-height:3.6em; overflow:hidden;}
.contract-emoji{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:56px;
  opacity:.35;
  z-index:0;
  pointer-events:none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.20));
}
.contract-dates{font-size:12px;opacity:.85; text-align:center; z-index:1;}

.contract-active{
  background:linear-gradient(0deg, rgba(34,197,94,0.14), rgba(34,197,94,0.14)), var(--panel);
  border-color:rgba(34,197,94,0.35);
}
.contract-expired{
  background:linear-gradient(0deg, rgba(239,68,68,0.14), rgba(239,68,68,0.14)), var(--panel);
  border-color:rgba(239,68,68,0.35);
}


.ticket-table tr.is-disabled{opacity:0.55; filter:grayscale(0.35);}
.ticket-table tr.is-disabled a{pointer-events:none;}

/* Button in topbar-pill (for modals) */
button.topbar-pill{font:inherit; cursor:pointer;}

/* Simple autocomplete dropdown */
.ac-wrap{position:relative;}
.ac-box{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:999; background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,0.18); max-height:240px; overflow-y:auto;}
.ac-item{padding:8px 10px; cursor:pointer; display:flex; justify-content:space-between; gap:10px;}
.ac-item:hover{background: rgba(127,127,127,0.12);}
.ac-item strong{font-weight:600;}
.ac-item .ac-sub{opacity:0.75; font-size:12px;}
.ac-empty{padding:10px; opacity:0.75; font-size:12px;}


/* Page transitions (fade in/out) */
html.js body.app-body{
    opacity:0;
    transition: opacity 220ms ease;
}
html.js body.app-body.is-loaded{ opacity:1; }
html.js body.app-body.is-leaving{ opacity:0; }
@media (prefers-reduced-motion: reduce){
    html.js body.app-body{ transition:none; }
}

/* ================================
   Department queue columns (Settings)
   ================================ */

.queue-cols-grid{display:grid; grid-template-columns: 1fr 300px; gap:12px; align-items:start;}
@media (max-width: 980px){.queue-cols-grid{grid-template-columns:1fr}}

.queue-cols-list{display:flex; flex-direction:column; gap:10px; min-height:240px;}

.queue-col-card{display:flex; align-items:center; gap:12px; padding:12px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:rgba(255,255,255,0.03); box-shadow: 0 6px 18px rgba(0,0,0,0.12);}
.queue-col-card.is-hidden{opacity:0.55; filter:grayscale(0.25)}
.queue-col-card.is-dragging{opacity:0.85; transform:scale(0.99)}

.queue-col-handle{cursor:grab; user-select:none; color:rgba(255,255,255,0.55); font-size:18px; line-height:1; padding:4px 6px; border-radius:10px; background:rgba(255,255,255,0.03)}

.queue-col-main{min-width:0; flex:1;}
.queue-col-title{font-weight:700;}
.queue-col-meta{font-size:12px; margin-top:2px; opacity:0.7;}

.queue-col-controls{display:flex; align-items:center; gap:12px;}
.queue-col-width{display:flex; align-items:center; gap:6px;}
.queue-col-width-input{width:92px;}


/* AJAX content swap (tickets list): quick, modern micro-interactions */
#app-main.ajax-loading{
    /* keep content visible (no long fade-out), just a subtle “loading” state */
    opacity: .72;
    filter: saturate(.95);
    transition: opacity 120ms ease;
}
#app-main.ajax-enter{
    animation: ajaxEnter 170ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ajaxEnter{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
    #app-main.ajax-loading{ transition:none; }
    #app-main.ajax-enter{ animation:none; }
}

/* Full page load: subtle content enter (used on admin/settings pages too) */
main.app-container.page-enter{
    animation: pageEnter 180ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pageEnter{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
    main.app-container.page-enter{ animation:none; }
}


/* ============================
   UI UPGRADE OVERRIDES (2026)
   - unified links/buttons/cards/modals
   - reveal animations
   - subtle motion + better focus rings
   ============================ */

/* Links: do not visually change after visit */
a{ color: var(--accent); }
a:hover{ opacity: .95; }
a:focus-visible{
    outline: 2px solid rgba(14,165,233,0.55);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Make nav / pills / brand immune to any visited styling */
.brand, .brand:hover{ color: var(--text); }
.brand:visited{ color: var(--text); }
.topbar-pill, .topbar-pill:hover{ color: var(--text); text-decoration:none; }
.topbar-pill:visited{ color: var(--text); }
.topbar-icon, .topbar-icon:hover{ color: var(--text); text-decoration:none; }
.topbar-icon:visited{ color: var(--text); }

/* Buttons: consistent interactions */
.btn{
    transition: transform 120ms ease, filter 120ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    will-change: transform;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); filter: brightness(0.98); }
.btn:focus-visible{
    outline: 2px solid rgba(14,165,233,0.45);
    outline-offset: 2px;
}

/* Cards: slightly more modern (glassy) */
.form-card,
.card{
    position:relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.96)),
        var(--panel);
    border:1px solid var(--border-strong);
    box-shadow: 0 10px 30px rgba(2,6,23,0.06);
}
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .card{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        var(--panel);
    box-shadow: 0 12px 34px rgba(0,0,0,0.32);
}
.card:hover, .form-card:hover{
    box-shadow: 0 14px 42px rgba(2,6,23,0.10);
}
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .form-card:hover{
    box-shadow: 0 16px 46px rgba(0,0,0,0.40);
}

/* Tables: soften hover + sticky head a bit */
.ticket-table tbody tr:hover{
    background: rgba(127,127,127,0.06);
}

/* Checkboxes / radios: quick upgrade without breaking markup */
input[type="checkbox"], input[type="radio"]{
    accent-color: var(--accent);
}

/* Reveal animations (auto-applied by JS) */
.reveal{
    opacity:0;
    transform: translateY(10px);
    transition: opacity 340ms ease, transform 380ms ease;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.reveal.is-visible{
    opacity:1;
    transform:none;
}
@media (prefers-reduced-motion: reduce){
    .reveal{ transition:none; transform:none; opacity:1; }
}

/* Modals: smoother open/close */
.modal{ display:none; position:fixed; inset:0; z-index:9999; }
.modal.is-open{ display:block; }
.modal-backdrop{
    opacity:0;
    transition: opacity 170ms ease;
    background: rgba(0,0,0,0.58);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.modal-dialog{
    opacity:0;
    transform: translateY(14px) scale(0.985);
    transition: transform 210ms cubic-bezier(.2,.8,.2,1), opacity 190ms ease;
}
.modal.is-visible .modal-backdrop{ opacity:1; }
.modal.is-visible .modal-dialog{ opacity:1; transform:none; }

.modal.is-closing .modal-backdrop{ opacity:0; }
.modal.is-closing .modal-dialog{ opacity:0; transform: translateY(10px) scale(0.985); }

.modal-header{
    background:
        linear-gradient(180deg, rgba(127,127,127,0.08), rgba(127,127,127,0.02));
}
.modal-close{
    border-radius: 10px;
    padding:6px 10px;
}
.modal-close:hover{ background: rgba(127,127,127,0.10); }

/* Make "pill buttons" look consistent whether <a> or <button> */
button.topbar-pill{
    appearance:none;
    -webkit-appearance:none;
    font:inherit;
    cursor:pointer;
}
.topbar-pill-primary{
    border-color: rgba(14,165,233,0.55);
    box-shadow: 0 0 0 1px rgba(14,165,233,0.12) inset;
}
.topbar-pill-primary:hover{
    background: rgba(14,165,233,0.10);
}

/* Button-like links: prevent visited coloring */
.btn-primary:visited{ color:#0b1220; }
html[data-theme="dark"] .btn-primary:visited{ color:#eaf6ff; }
.btn-danger:visited{ color:#0b1220; }
html[data-theme="dark"] .btn-danger:visited{ color:#ffecec; }
.btn-secondary:visited{ color:var(--text); }
.btn-ghost:visited{ color:var(--text); }

/* Auth (login) switcher */
.auth-logo{ height:56px; width:auto; margin: 0 auto 8px; display:block; }
.auth-switcher{ display:flex; gap:8px; padding:6px; margin: 6px 0 14px; background: rgba(127,127,127,0.06); border:1px solid var(--border); border-radius: 14px; }
.auth-tab{ flex:1; text-align:center; padding:8px 10px; border-radius: 12px; font-size:12px; color:var(--text); text-decoration:none; opacity:0.85; border:1px solid transparent; }
.auth-tab:hover{ background: rgba(127,127,127,0.10); opacity:1; }
.auth-tab.is-active{ background: rgba(14,165,233,0.10); border-color: rgba(14,165,233,0.35); opacity:1; font-weight:650; }
.auth-subtitle{ margin: -6px 0 10px; text-align:center; font-size:12px; color:var(--muted); }
.login-title{ text-align:center; }

/* Page header actions */
.page-header-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.page-header h1{ min-width:0; }

/* Wider + scrollable modals for large forms */
.modal-dialog.modal-wide{ max-width: 980px; max-height: 84vh; display:flex; flex-direction:column; }
.modal-dialog.modal-wide .modal-body{ overflow:auto; flex:1 1 auto; }

/* Modal footer (keeps actions reachable on small screens) */
.modal-footer{
    padding: 12px 16px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    border-radius: 0 0 16px 16px;
}


/* Prevent accidental double-click during slow submit */
html.ui-busy { cursor: progress; }
html.ui-busy button, html.ui-busy a { cursor: progress; }
button.is-loading,
.btn.is-loading {
    opacity: .85;
    pointer-events: none;
}
button.is-loading::after,
.btn.is-loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    vertical-align: -2px;
    animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin{
    to{ transform: rotate(360deg); }
}


/* Auth / legal pages refinements */
.login-card{
    width:min(500px, 100%);
}
.auth-card{
    display:flex;
    flex-direction:column;
}
.auth-note{
    margin-top:12px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(127,127,127,0.05);
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
    text-align:center;
}
.auth-note-compact{
    margin-top:14px;
}
.auth-utility-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
}
.auth-legal-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 14px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--border);
}
.auth-legal-links a,
.auth-legal-links a:visited{
    color:var(--muted);
    font-size:12px;
    text-decoration:none;
}
.auth-legal-links a:hover{
    color:var(--text);
    text-decoration:underline;
    text-decoration-color: currentColor;
}

.legal-page{
    min-height:100%;
    padding:28px 16px 40px;
}
.legal-shell{
    width:min(980px, 100%);
    margin:0 auto;
}
.legal-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    margin-bottom:18px;
}
.legal-header .auth-logo{
    margin-bottom:4px;
}
.legal-title{
    margin:0;
    font-size:clamp(24px, 2.6vw, 34px);
    line-height:1.15;
}
.legal-subtitle{
    max-width:760px;
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}
.legal-actions,
.legal-doc-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}
.legal-layout{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}
.legal-layout .card{
    height:100%;
}
.legal-section h2{
    margin:0 0 10px;
    font-size:18px;
}
.legal-section h3{
    margin:16px 0 8px;
    font-size:14px;
}
.legal-section p{
    margin:0 0 10px;
    line-height:1.65;
}
.legal-list{
    margin:0;
    padding-left:18px;
    line-height:1.65;
}
.legal-meta{
    color:var(--muted);
    font-size:12px;
}
.legal-callout{
    margin-top:14px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(127,127,127,0.05);
}
.legal-callout strong{
    display:block;
    margin-bottom:6px;
}

@media (max-width: 820px){
    .legal-layout{
        grid-template-columns:1fr;
    }
}
@media (max-width: 560px){
    .auth-utility-row{
        flex-direction:column;
        align-items:stretch;
    }
    .auth-utility-row .btn{
        width:100%;
        justify-content:center;
    }
    .legal-actions,
    .legal-doc-links{
        justify-content:stretch;
    }
    .legal-actions .btn,
    .legal-doc-links .btn{
        width:100%;
        justify-content:center;
    }
}

/* Queue priority ordering / clickable cells */
.ticket-cell-link,
.ticket-cell-link:visited{
    display:block;
    color:var(--text);
    text-decoration:none;
    padding:2px 0;
}
.ticket-cell-link:hover{ color:var(--text); text-decoration:none; }
.ticket-cell-link--strong{ font-weight:400; }
.ticket-cell-link__text{ display:block; }
.ticket-inline-meta{ display:block; margin-top:4px; }
.td-link{ padding-left:0 !important; padding-right:0 !important; }
.td-link .ticket-cell-link{ padding:14px 20px; margin:-14px -20px; }

.queue-inline-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
}
.queue-inline-toggle__label{
    font-size:12px;
    color:var(--text);
    white-space:nowrap;
}

.table-wrapper--queue{
    overflow:auto;
    padding:14px 16px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
    box-shadow:0 16px 40px rgba(0,0,0,0.22);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.table-wrapper--queue .ticket-table{
    min-width:780px;
}
.table-wrapper--queue .ticket-table thead th{
    background:rgba(255,255,255,0.05);
}
.table-wrapper--queue .ticket-table tbody td{
    padding:14px 14px;
}
.table-wrapper--queue .ticket-table tbody tr:hover{
    background:rgba(255,255,255,0.055);
}

.ticket-table-priority{
    border-collapse:separate;
    border-spacing:0 10px;
}
.ticket-table-priority thead th{
    background:rgba(255,255,255,0.05);
}
.ticket-table-priority tbody tr{
    background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.03));
    box-shadow:0 10px 28px rgba(3,8,20,0.16);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ticket-table-priority tbody tr:hover{
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
}
.ticket-table-priority tbody tr td:first-child{
    border-top-left-radius:16px;
    border-bottom-left-radius:16px;
    padding-left:20px;
}
.ticket-table-priority tbody tr td:last-child{
    border-top-right-radius:16px;
    border-bottom-right-radius:16px;
    padding-right:20px;
}
.ticket-table-priority tbody tr.is-dragging{
    opacity:.82;
    transform:scale(.995);
    box-shadow:0 16px 36px rgba(3,8,20,0.26);
}
.ticket-priority-col{ white-space:nowrap; }
.ticket-priority-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.priority-order-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.06);
    color:#fff;
    font-weight:700;
    font-size:12px;
}
.ticket-drag-handle{
    display:none;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:none;
    border-radius:10px;
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.68);
    cursor:grab;
    font-size:18px;
    line-height:1;
    letter-spacing:-2px;
    user-select:none;
    transition:background .18s ease, color .18s ease, transform .18s ease;
}
.ticket-drag-handle:hover{
    background:rgba(255,255,255,0.10);
    color:#fff;
}
.ticket-drag-handle:active{ cursor:grabbing; transform:scale(.97); }
.ticket-table-priority.is-priority-sort.is-reorder-enabled:not(.is-filtered) .ticket-drag-handle{
    display:inline-flex;
}
.ticket-table-priority:not(.is-priority-sort) .ticket-drag-handle,
.ticket-table-priority.is-filtered .ticket-drag-handle,
.ticket-table-priority:not(.is-reorder-enabled) .ticket-drag-handle{
    display:none !important;
}


.member-ticket-link{display:inline-flex;align-items:center;gap:6px;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-ticket-link span:last-child{overflow:hidden;text-overflow:ellipsis}
.stat-card{padding:16px;display:flex;flex-direction:column;gap:6px}
.stat-card strong{font-size:30px;line-height:1}
.stats-chart-card{padding:16px;margin-top:16px}
.stats-chart-card canvas{width:100%;display:block}

/* Department member status table: keep live ticket columns inside the card */
.department-members-table-wrapper {
  overflow-x: auto;
}
.department-members-table {
  table-layout: fixed;
  min-width: 980px;
}
.department-members-table th,
.department-members-table td {
  vertical-align: middle;
}
.department-members-table th:nth-child(1),
.department-members-table td:nth-child(1) { width: 16%; }
.department-members-table th:nth-child(2),
.department-members-table td:nth-child(2) { width: 20%; }
.department-members-table th:nth-child(3),
.department-members-table td:nth-child(3) { width: 13%; }
.department-members-table th:nth-child(4),
.department-members-table td:nth-child(4) { width: 11%; }
.department-members-table th:nth-child(5),
.department-members-table td:nth-child(5),
.department-members-table th:nth-child(6),
.department-members-table td:nth-child(6) { width: 20%; }
.member-ticket-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
}
.member-ticket-link span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.department-assignment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 12px;
  background: rgba(15, 23, 42, .22);
}
.department-assignment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.department-assignment-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.department-assignment-check span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-select-sm {
  min-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13px;
}


.ticket-month-separator td{
    padding:10px 14px !important;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--muted);
    background:rgba(148,163,184,.14) !important;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.settings-layout .ticket-thread,
.settings-layout .form-card,
.settings-layout .table-wrapper{
    max-width:100%;
    min-width:0;
}
.settings-layout .form-row-inline{
    min-width:0;
}
.settings-layout .form-row-inline > *{
    min-width:0;
}

/* Collapsible closed-ticket month groups */
.ticket-month-row.is-month-collapsed{display:none;}
.ticket-month-toggle{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
    cursor:pointer;
    padding:0;
    text-align:left;
}
.ticket-month-toggle__chev{
    display:inline-flex;
    width:18px;
    height:18px;
    align-items:center;
    justify-content:center;
    transition:transform .16s ease;
}
.ticket-month-separator.is-expanded .ticket-month-toggle__chev{transform:rotate(90deg);}

/* Statistics page */
.stats-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.stats-view-select-wrap{display:flex;align-items:center;gap:10px;min-width:280px;}
.stats-plot{width:100%;height:440px;min-height:360px;}

/* Registered customer indicator */
.customer-name-cell{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.customer-registered-dot{width:9px;height:9px;border-width:2px;flex:0 0 auto;}
.form-input[readonly]{opacity:.78;background:rgba(148,163,184,.10);cursor:not-allowed;}

/* Custom PNG icons in the top navigation */
.topbar-img{width:18px;height:18px;object-fit:contain;display:inline-block;vertical-align:middle;flex:0 0 auto;}
.topbar-icon .topbar-img{width:20px;height:20px;}
.topbar-img-status{width:16px;height:16px;}
.topbar-img-inprogress{animation: inprogressPulse 1.8s ease-in-out infinite; transform-origin:center;}
.topbar-pill .topbar-img + span, .topbar-icon .topbar-img + span{margin-left:4px;}


/* Custom topbar image icon fallback + pulsing in-progress icon */
.topbar-icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:middle;flex:0 0 auto;}
.topbar-icon-fallback{display:none;align-items:center;justify-content:center;width:18px;height:18px;line-height:18px;font-size:16px;vertical-align:middle;flex:0 0 auto;}
.topbar-img-inprogress,.topbar-icon-wrap:has(.topbar-img-inprogress) .topbar-icon-fallback{animation: inprogressPulse 1.8s ease-in-out infinite;transform-origin:center;}
.topbar-icon .topbar-icon-fallback{width:20px;height:20px;line-height:20px;}

/* Priority drag autoscroll helper */
.priority-drag-scroll-zone{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    z-index:10000;
    width:min(520px, calc(100vw - 40px));
    min-height:58px;
    display:none;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.18);
    background:rgba(13,22,40,0.88);
    color:var(--text);
    box-shadow:0 18px 42px rgba(0,0,0,0.35);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    pointer-events:auto;
    user-select:none;
}
.priority-drag-scroll-zone--top{ top:84px; }
.priority-drag-scroll-zone--bottom{ bottom:24px; }
.priority-drag-scroll-zone.is-visible{ display:flex; }
.priority-drag-scroll-zone span{
    display:inline-flex;
    width:32px;
    height:32px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(255,255,255,0.10);
    color:#fff;
    font-weight:900;
}
.priority-drag-scroll-zone strong{
    font-size:13px;
    letter-spacing:.03em;
    text-transform:uppercase;
}
.priority-drag-scroll-zone.is-active{
    border-color:rgba(44,211,126,0.65);
    background:rgba(16,48,43,0.92);
}

/* Adminisztráció / TIG queue upgrade */
.table-wrapper--tig{
    border-radius:18px;
    overflow:hidden;
}
.ticket-table--tig .ticket-cell-link{
    min-height:38px;
}
.ticket-table--tig td{
    vertical-align:middle;
}
.ticket-table--tig .ticket-link{
    font-weight:700;
}
.tig-row-open{
    background: rgba(245,158,11,0.22);
    border-left:4px solid rgba(245,158,11,0.85);
}
.tig-row-pending{
    background: rgba(220,38,38,0.20);
    border-left: 4px solid rgba(220,38,38,0.75);
}
.tig-row-done{
    background: rgba(22,163,74,0.22);
    border-left: 4px solid rgba(22,163,74,0.75);
}
html[data-theme="dark"] .tig-row-open{
    background: rgba(245,158,11,0.20);
    border-left-color: rgba(245,158,11,0.9);
}
html[data-theme="dark"] .tig-row-pending{
    background: rgba(239,68,68,0.20);
    border-left: 4px solid rgba(239,68,68,0.8);
}
html[data-theme="dark"] .tig-row-done{
    background: rgba(34,197,94,0.22);
    border-left: 4px solid rgba(34,197,94,0.8);
}
.status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    padding:3px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
    border:1px solid transparent;
}
.status-badge--open{
    color:#92400e;
    background:rgba(245,158,11,.18);
    border-color:rgba(245,158,11,.45);
}
.status-badge--pending{
    color:#991b1b;
    background:rgba(239,68,68,.14);
    border-color:rgba(239,68,68,.38);
}
.status-badge--done{
    color:#166534;
    background:rgba(34,197,94,.14);
    border-color:rgba(34,197,94,.38);
}
html[data-theme="dark"] .status-badge--open{color:#fbbf24;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.36);}
html[data-theme="dark"] .status-badge--pending{color:#fca5a5;background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.34);}
html[data-theme="dark"] .status-badge--done{color:#86efac;background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.34);}

/* Priority queue controls: explicit dark/light colors */
html[data-theme="dark"] .priority-order-pill,
body[data-theme="dark"] .priority-order-pill{
    border-color:rgba(255,255,255,0.22);
    background:rgba(255,255,255,0.08);
    color:#ffffff;
}
html[data-theme="dark"] .ticket-drag-handle,
body[data-theme="dark"] .ticket-drag-handle{
    background:rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.82);
    border:1px solid rgba(255,255,255,0.14);
}
html[data-theme="dark"] .ticket-drag-handle:hover,
body[data-theme="dark"] .ticket-drag-handle:hover{
    background:rgba(255,255,255,0.14);
    color:#ffffff;
}
html[data-theme="light"] .priority-order-pill{
    border-color:rgba(15,23,42,0.18);
    background:rgba(15,23,42,0.06);
    color:#0f172a;
}
html[data-theme="light"] .ticket-drag-handle{
    background:rgba(15,23,42,0.08);
    color:rgba(15,23,42,0.76);
    border:1px solid rgba(15,23,42,0.12);
}
html[data-theme="light"] .ticket-drag-handle:hover{
    background:rgba(15,23,42,0.14);
    color:#0f172a;
}

/* Designed department multi-select in queues */
.queue-department-filter{
    position:relative;
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    z-index:25;
}
.queue-department-filter-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    max-width:260px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,0.26);
    background:rgba(255,255,255,0.06);
    color:var(--text);
    cursor:pointer;
    box-shadow:0 10px 24px rgba(0,0,0,0.12);
    transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.queue-department-filter-toggle:hover,
.queue-department-filter.is-open .queue-department-filter-toggle{
    background:rgba(255,255,255,0.10);
    border-color:rgba(44,211,126,0.45);
}
.queue-department-filter-toggle__label{
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
}
.queue-department-filter-toggle strong{
    max-width:130px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    color:var(--text);
}
.queue-department-filter-toggle__chev{
    opacity:.78;
    transition:transform .16s ease;
}
.queue-department-filter.is-open .queue-department-filter-toggle__chev{transform:rotate(180deg);}
.queue-department-filter-panel{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    min-width:260px;
    max-width:min(360px, calc(100vw - 32px));
    max-height:320px;
    overflow:auto;
    padding:8px;
    display:none;
    border-radius:18px;
    border:1px solid rgba(148,163,184,0.24);
    background:rgba(15,23,42,0.96);
    box-shadow:0 20px 46px rgba(0,0,0,0.38);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.queue-department-filter.is-open .queue-department-filter-panel{display:block;}
.queue-department-filter-row{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:38px;
    padding:8px 10px;
    border-radius:12px;
    cursor:pointer;
    user-select:none;
    color:#e5e7eb;
    transition:background .14s ease;
}
.queue-department-filter-row:hover{background:rgba(255,255,255,0.08);}
.queue-department-filter-row input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.queue-department-filter-check{
    width:19px;
    height:19px;
    flex:0 0 auto;
    border-radius:7px;
    border:1px solid rgba(148,163,184,0.55);
    background:rgba(255,255,255,0.06);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.queue-department-filter-check:after{
    content:'✓';
    font-size:13px;
    line-height:1;
    color:#0f172a;
    opacity:0;
    transform:scale(.75);
    transition:opacity .12s ease,transform .12s ease;
}
.queue-department-filter-row input:checked + .queue-department-filter-check{
    background:#2cd37e;
    border-color:#2cd37e;
}
.queue-department-filter-row input:checked + .queue-department-filter-check:after{
    opacity:1;
    transform:scale(1);
}
.queue-department-filter-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
}
html[data-theme="light"] .queue-department-filter-toggle{
    background:#ffffff;
    border-color:rgba(15,23,42,0.14);
    box-shadow:0 10px 24px rgba(15,23,42,0.08);
}
html[data-theme="light"] .queue-department-filter-toggle:hover,
html[data-theme="light"] .queue-department-filter.is-open .queue-department-filter-toggle{
    background:#f8fafc;
    border-color:rgba(44,211,126,0.55);
}
html[data-theme="light"] .queue-department-filter-panel{
    background:#ffffff;
    color:#0f172a;
    border-color:rgba(15,23,42,0.14);
    box-shadow:0 20px 44px rgba(15,23,42,0.16);
}
html[data-theme="light"] .queue-department-filter-row{color:#0f172a;}
html[data-theme="light"] .queue-department-filter-row:hover{background:rgba(15,23,42,0.06);}
html[data-theme="light"] .queue-department-filter-check{
    border-color:rgba(15,23,42,0.26);
    background:rgba(15,23,42,0.04);
}
@media (max-width: 820px){
    .queue-department-filter-toggle{max-width:220px;}
    .queue-department-filter-toggle strong{max-width:96px;}
    .queue-department-filter-panel{left:auto;right:0;}
}

/* Hotfix29: stronger priority contrast in both themes */
.ticket-table-priority .priority-order-pill{
    border-color:rgba(14,165,233,0.34);
    background:rgba(14,165,233,0.12);
    color:var(--text);
}
.ticket-table-priority .ticket-drag-handle{
    border:1px solid rgba(14,165,233,0.28);
    background:rgba(14,165,233,0.12);
    color:var(--text);
}
.ticket-table-priority .ticket-drag-handle:hover{
    background:rgba(14,165,233,0.20);
    color:var(--text);
}
html[data-theme="dark"] .ticket-table-priority .priority-order-pill{
    border-color:rgba(125,211,252,0.45);
    background:rgba(125,211,252,0.14);
    color:#f8fafc;
}
html[data-theme="dark"] .ticket-table-priority .ticket-drag-handle{
    border-color:rgba(125,211,252,0.40);
    background:rgba(125,211,252,0.12);
    color:#f8fafc;
}
html[data-theme="dark"] .ticket-table-priority .ticket-drag-handle:hover{
    background:rgba(125,211,252,0.20);
    color:#ffffff;
}
html[data-theme="light"] .ticket-table-priority .priority-order-pill{
    border-color:rgba(15,23,42,0.22);
    background:rgba(15,23,42,0.07);
    color:#0f172a;
}
html[data-theme="light"] .ticket-table-priority .ticket-drag-handle{
    border-color:rgba(15,23,42,0.18);
    background:rgba(15,23,42,0.08);
    color:#0f172a;
}
html[data-theme="light"] .ticket-table-priority .ticket-drag-handle:hover{
    background:rgba(15,23,42,0.14);
    color:#020617;
}

/* Hotfix39: ticket_new assignee picker - responsive, checkboxless card layout */
.ticket-new-assignees{
    padding:14px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(127,127,127,0.045);
}
.assignee-picker-help{margin:4px 0 12px;font-size:12px;}
.assignee-picker-list{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:10px;
    align-items:stretch;
}
.assignee-picker-chip{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    align-content:center;
    gap:4px;
    min-height:60px;
    max-width:100%;
    padding:12px 42px 12px 16px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(127,127,127,0.06);
    cursor:pointer;
    user-select:none;
    overflow:hidden;
    box-shadow:0 0 0 0 rgba(14,165,233,0);
    transition:background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .22s ease, color .16s ease;
}
.assignee-picker-chip:hover{
    transform:translateY(-1px);
    background:rgba(14,165,233,0.10);
    border-color:rgba(14,165,233,0.38);
}
.assignee-picker-chip input{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    pointer-events:none;
}
.assignee-picker-chip::before{display:none;content:none;}
.assignee-picker-chip::after{
    content:'✓';
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%) scale(.75);
    width:22px;
    height:22px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:900;
    color:#7dd3fc;
    background:rgba(14,165,233,0.12);
    border:1px solid rgba(14,165,233,0.25);
    opacity:0;
    transition:opacity .16s ease, transform .16s ease, background .16s ease, border-color .16s ease;
}
.assignee-picker-chip:has(input:focus-visible){outline:2px solid rgba(14,165,233,0.55);outline-offset:2px;}
.assignee-picker-name{
    font-weight:700;
    font-size:14px;
    line-height:1.25;
    color:var(--text);
    min-width:0;
    overflow-wrap:anywhere;
}
.assignee-picker-role{
    display:inline-flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    margin-top:4px;
    padding:2px 7px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--muted);
    font-size:11px;
    line-height:1.2;
    font-weight:600;
}
.assignee-picker-chip:has(input:checked){
    background:linear-gradient(135deg, rgba(14,165,233,0.28), rgba(14,165,233,0.12));
    border-color:rgba(14,165,233,0.78);
    box-shadow:0 0 0 3px rgba(14,165,233,0.12), 0 10px 25px rgba(14,165,233,0.10);
    animation:assigneeChipPick .22s ease-out;
}
.assignee-picker-chip:has(input:checked)::after{
    opacity:1;
    transform:translateY(-50%) scale(1);
    background:#0ea5e9;
    border-color:#7dd3fc;
    color:#fff;
    box-shadow:0 0 0 4px rgba(14,165,233,0.14);
}
.assignee-picker-chip:not(:has(input:checked)){
    transform:translateY(0) scale(1);
}
.assignee-picker-chip:not(:has(input:checked))::after{
    transform:translateY(-50%) scale(.75);
}
@keyframes assigneeChipPick{
    0%{transform:scale(.985);}
    55%{transform:scale(1.018);}
    100%{transform:scale(1);}
}
html[data-theme="light"] .assignee-picker-chip{
    background:rgba(15,23,42,0.035);
    border-color:rgba(15,23,42,0.14);
}
html[data-theme="light"] .assignee-picker-chip:hover{
    background:rgba(14,165,233,0.09);
    border-color:rgba(14,165,233,0.40);
}
html[data-theme="light"] .assignee-picker-chip:has(input:checked){
    background:linear-gradient(135deg, rgba(14,165,233,0.18), rgba(14,165,233,0.07));
    border-color:rgba(14,165,233,0.70);
}
@media (max-width: 720px){
    .assignee-picker-list{grid-template-columns:1fr;}
    .assignee-picker-chip{min-height:56px;}
}

/* Hotfix29: login contrast in light mode */
html[data-theme="light"] .login-card,
html[data-theme="light"] .auth-card{
    background:#ffffff;
    border-color:rgba(15,23,42,0.14);
    color:#0f172a;
}
html[data-theme="light"] .login-card .form-label,
html[data-theme="light"] .auth-card .form-label,
html[data-theme="light"] .login-title{
    color:#0f172a;
}
html[data-theme="light"] .login-card .form-input,
html[data-theme="light"] .auth-card .form-input{
    background:#ffffff;
    color:#0f172a;
    border-color:rgba(15,23,42,0.25);
}
html[data-theme="light"] .login-card .form-input::placeholder,
html[data-theme="light"] .auth-card .form-input::placeholder{
    color:#64748b;
}
html[data-theme="light"] .login-card .form-input:focus,
html[data-theme="light"] .auth-card .form-input:focus{
    border-color:#0ea5e9;
    box-shadow:0 0 0 3px rgba(14,165,233,0.16);
}

/* Hotfix29: account e-mail notification preferences */
.account-settings-card .section-title-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}
.segmented-control{
    display:inline-flex;
    flex-wrap:wrap;
    gap:8px;
    padding:6px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(127,127,127,0.055);
}
.segmented-option{
    position:relative;
    display:inline-flex;
    align-items:center;
    cursor:pointer;
}
.segmented-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.segmented-option span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:7px 12px;
    border-radius:12px;
    border:1px solid transparent;
    color:var(--text);
    font-weight:650;
    font-size:13px;
}
.segmented-option input:checked + span{
    border-color:rgba(14,165,233,0.45);
    background:rgba(14,165,233,0.16);
}

.segmented-control--compact{
    gap:4px;
    padding:4px;
    border-radius:14px;
}
.segmented-control--compact .segmented-option span{
    min-height:28px;
    padding:5px 9px;
    font-size:12px;
}
.inline-admin-type-form{
    align-items:flex-start;
}
.dept-mail-pref-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:14px;
}
.dept-mail-pref-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(180px,240px);
    gap:12px;
    align-items:center;
    padding:12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(127,127,127,0.045);
}
.dept-mail-pref-select{width:100%;}
@media (max-width:700px){
    .dept-mail-pref-row{grid-template-columns:1fr;}
}

/* Exclusive department filter pills */
.queue-department-filter-row input[type="radio"]{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.queue-department-filter-row:has(input[type="radio"]:checked){
    background:rgba(14,165,233,0.14);
    border-color:rgba(14,165,233,0.35);
}
.queue-department-filter-row:has(input[type="radio"]:checked) .queue-department-filter-check{
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(14,165,233,0.16);
}
.queue-department-filter-row:has(input[type="radio"]:checked) .queue-department-filter-check::after{
    content:"";
    display:block;
    width:6px;
    height:6px;
    margin:2px;
    border-radius:999px;
    background:var(--panel);
}
.account-status-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:12px;
}
.account-status-card{
    border:1px solid var(--border);
    background:rgba(127,127,127,0.045);
    border-radius:var(--radius);
    padding:12px;
}
.account-status-card__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}
.account-status-list{display:grid;gap:7px;font-size:13px;}
.account-status-list div{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.account-status-list span{color:var(--muted);}

/* Account management modal refinements */
.account-name-cell{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-width:0;
}
.account-registered-icon{
    width:14px;
    height:14px;
    flex:0 0 14px;
    filter: drop-shadow(0 0 4px rgba(22,163,74,0.35));
}
.account-modal .modal-dialog-wide{
    width:min(980px, calc(100vw - 28px));
    max-width:980px;
    max-height:calc(100vh - 36px);
    margin:18px auto;
    display:flex;
    flex-direction:column;
}
.account-modal .modal-dialog-wide .modal-content{
    max-height:calc(100vh - 36px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.account-modal .modal-header{
    flex:0 0 auto;
}
.account-modal form.form-card{
    overflow:auto;
    flex:1 1 auto;
    padding:0 0 12px;
}
.account-modal .form-actions{
    position:sticky;
    bottom:0;
    z-index:2;
    margin:12px -1px -1px !important;
    padding:12px 16px;
    background:var(--panel);
    border-top:1px solid var(--border);
}
.account-switch-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(150px, 1fr));
    gap:10px;
}
.account-switch-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(127,127,127,0.06);
    font-size:12.5px;
    font-weight:650;
}
.account-switch-card .tig-toggle{
    padding:4px 7px;
    gap:6px;
}
.account-department-row{
    display:grid;
    grid-template-columns:minmax(190px, 1fr) auto;
    align-items:center;
    gap:12px;
}
.account-department-row .department-assignment-check{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:650;
}
.account-department-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}
.account-admin-toggle{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
}
.account-department-row:not(.is-active){
    opacity:.68;
}
.account-department-row:not(.is-active) .account-department-controls{
    display:none;
}
.account-roles-section.is-agent-disabled{
    opacity:.42;
    filter:grayscale(.35);
    pointer-events:none;
}
.account-roles-section.is-agent-disabled::after{
    content:'Agent felület tiltva: részlegszerepek nem aktívak.';
    display:block;
    margin-top:8px;
    font-size:12px;
    color:var(--muted);
}
.account-modal .switch input:disabled + .slider{
    cursor:not-allowed;
    opacity:.45;
}
@media (max-width: 900px){
    .account-switch-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .account-department-row{grid-template-columns:1fr;align-items:start;}
    .account-department-controls{justify-content:flex-start;flex-wrap:wrap;}
}
@media (max-width: 560px){
    .account-switch-grid{grid-template-columns:1fr;}
}

/* Statistics chart layout fixes */
.stats-chart-card{overflow:hidden;}
.stats-chart-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:16px;
}
.stats-chart-head > div:first-child{min-width:0;}
.stats-view-select-wrap{
    justify-self:end;
    min-width:280px;
    max-width:100%;
    white-space:nowrap;
}
.stats-plot{
    overflow:hidden;
    position:relative;
}

.stats-plot .plot-container,
.stats-plot .svg-container{
    max-width:100% !important;
}
@media (max-width: 760px){
    .stats-chart-head{grid-template-columns:1fr;}
    .stats-view-select-wrap{justify-self:stretch; width:100%; min-width:0;}
    .stats-view-select-wrap .form-select{width:100%;}
}

/* Web notifications */
.notification-bell-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.notification-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.notification-bell .notification-dot{display:none;position:absolute;top:3px;left:4px;width:8px;height:8px;border-radius:999px;background:#dc2626;box-shadow:0 0 0 0 rgba(220,38,38,.55);}
.notification-bell.has-unread .notification-dot{display:block;animation:notificationPulse 1.25s ease-in-out infinite;}
@keyframes notificationPulse{0%{transform:scale(.82);opacity:.72;box-shadow:0 0 0 0 rgba(220,38,38,.45);}55%{transform:scale(1.18);opacity:1;box-shadow:0 0 0 7px rgba(220,38,38,0);}100%{transform:scale(.82);opacity:.72;box-shadow:0 0 0 0 rgba(220,38,38,0);}}
.notification-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:min(390px,calc(100vw - 24px));max-height:min(520px,calc(100vh - var(--topbar-offset,80px) - 20px));display:flex;flex-direction:column;background:rgba(255,255,255,.76);border:1px solid rgba(148,163,184,.34);border-radius:18px;box-shadow:0 22px 70px rgba(15,23,42,.26), inset 0 1px 0 rgba(255,255,255,.42);overflow:hidden;z-index:1000;backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);}
html[data-theme="dark"] .notification-dropdown{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.22);box-shadow:0 22px 70px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08);}
.notification-dropdown::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.05) 42%,rgba(84,141,212,.08));}
html[data-theme="dark"] .notification-dropdown::before{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 45%,rgba(56,189,248,.06));}
.notification-dropdown[hidden]{display:none!important;}
.notification-dropdown-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.30);}
html[data-theme="dark"] .notification-dropdown-head{background:rgba(15,23,42,.38);}
.notification-mark-all{border:0;background:rgba(127,127,127,.08);color:var(--accent);font:inherit;font-size:12px;cursor:pointer;padding:4px 8px;border-radius:999px;}
.notification-mark-all:hover{background:rgba(127,127,127,.14);}
.notification-list{position:relative;overflow:auto;max-height:390px;padding:6px;}
.notification-item{display:flex;gap:10px;padding:10px;border-radius:12px;color:var(--text);text-decoration:none;border:1px solid transparent;background:rgba(255,255,255,.16);}
html[data-theme="dark"] .notification-item{background:rgba(15,23,42,.14);}
.notification-item:hover{background:rgba(127,127,127,.10);text-decoration:none;}
.notification-item.is-unread{background:rgba(84,141,212,.16);border-color:rgba(84,141,212,.26);}
.notification-item-dot{width:9px;height:9px;border-radius:999px;background:transparent;flex:0 0 auto;margin-top:5px;}
.notification-item.is-unread .notification-item-dot{background:#dc2626;}
.notification-item-content{display:flex;flex-direction:column;min-width:0;gap:3px;}
.notification-item-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.25;}
.notification-item.is-read .notification-item-title{font-weight:500;}
.notification-item-body{font-size:12px;color:var(--text-muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.notification-item-time{font-size:11px;color:var(--text-muted);opacity:.78;}
.notification-empty{position:relative;padding:18px 14px;color:var(--text-muted);font-size:13px;text-align:center;}
.notification-all-link{position:relative;display:block;text-align:center;padding:11px 14px;border-top:1px solid rgba(148,163,184,.22);color:var(--accent);font-weight:650;text-decoration:none;background:rgba(255,255,255,.24);}
html[data-theme="dark"] .notification-all-link{background:rgba(15,23,42,.32);}
.notification-all-link:hover{background:rgba(127,127,127,.10);text-decoration:none;}
.notification-page-list{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.notification-page-item{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--card);text-decoration:none;color:var(--text);}
.notification-page-item:hover{border-color:var(--border-strong);background:rgba(127,127,127,.04);text-decoration:none;}
.notification-page-item.is-unread{border-color:rgba(84,141,212,.28);background:rgba(84,141,212,.08);}
.notification-page-status{width:10px;height:10px;border-radius:999px;background:transparent;flex:0 0 auto;margin-top:5px;}
.notification-page-item.is-unread .notification-page-status{background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.10);}
.notification-page-content{display:flex;flex-direction:column;gap:5px;min-width:0;}
.notification-page-content strong{font-size:15px;color:var(--text);font-weight:700;}
.notification-page-item.is-read .notification-page-content strong{font-weight:500;}
.notification-page-content span{font-size:13px;color:var(--text-muted);line-height:1.45;}
.notification-page-content em{font-style:normal;font-size:12px;color:var(--text-muted);opacity:.78;}
.notification-page-mark-form{margin:0;}
@media (max-width:720px){.notification-dropdown{right:-56px;width:min(360px,calc(100vw - 16px));}.notification-list{max-height:calc(100vh - var(--topbar-offset,120px) - 120px);}}

/* Topic/group color and thread UX additions */
.topic-color-swatch {
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  vertical-align:middle;
  margin-right:6px;
  box-shadow:0 0 0 2px rgba(0,0,0,.08) inset;
}
.form-input-color {
  min-height:42px;
  padding:4px;
}
.ticket-row-topic-tint {
  background: linear-gradient(90deg, var(--topic-tint-strong), var(--topic-tint)) !important;
}
.ticket-row-topic-tint > td {
  background: transparent !important;
  border-top-color: color-mix(in srgb, var(--topic-accent), transparent 62%) !important;
  border-bottom-color: color-mix(in srgb, var(--topic-accent), transparent 76%) !important;
}
.ticket-row-topic-tint > td:first-child {
  box-shadow: inset 4px 0 0 var(--topic-accent);
  padding-left:24px !important;
}
.ticket-row-topic-tint > td:first-child.td-link .ticket-cell-link,
.ticket-row-topic-tint > td:first-child .ticket-cell-link {
  padding-left:32px;
  margin-left:-24px;
}
.ticket-row-topic-tint:hover {
  background: linear-gradient(90deg, var(--topic-tint-strong), var(--topic-tint)) !important;
  filter: brightness(1.08);
}
.thread-message-head {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.thread-edit-btn {
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.18);
  color:inherit;
  border-radius:9px;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  margin-left:auto;
}
.thread-edit-btn:hover { background:rgba(14,165,233,.16); border-color:rgba(56,189,248,.45); }
.thread-edited-by { opacity:.82; }
.thread-message-body {
  margin-top:6px;
  white-space:normal;
  transition:max-height .18s ease;
}
.thread-message-body.is-collapsed {
  max-height:29em;
  overflow:hidden;
  position:relative;
}
.thread-message-body.is-collapsed::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4em;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(15,23,42,0), var(--card-bg, rgba(15,23,42,.96)) 78%);
}
.thread-message-body.is-expanded { max-height:none; overflow:visible; }
.thread-collapse-toggle {
  margin-top:8px;
  border:0;
  background:transparent;
  color:var(--accent, #38bdf8);
  font-weight:700;
  cursor:pointer;
  padding:4px 0;
}

/* Queue first column alignment: keep tinted and non-tinted rows visually consistent */
.table-wrapper--queue .ticket-table tbody td:first-child {
  padding-left:16px !important;
}
.table-wrapper--queue .ticket-table tbody td:first-child.td-link {
  padding-left:0 !important;
  padding-right:0 !important;
}
.table-wrapper--queue .ticket-table tbody td:first-child.td-link .ticket-cell-link {
  padding:14px 14px 14px 16px;
  margin:-14px -14px -14px 0;
}
.table-wrapper--queue .ticket-table tbody tr.ticket-row-topic-tint > td:first-child {
  padding-left:18px !important;
}
.table-wrapper--queue .ticket-table tbody tr.ticket-row-topic-tint > td:first-child.td-link {
  padding-left:0 !important;
}
.table-wrapper--queue .ticket-table tbody tr.ticket-row-topic-tint > td:first-child.td-link .ticket-cell-link {
  padding-left:18px;
  margin-left:0;
}

/* Ticket view inline editing + modern attachment tiles */
.ticket-card-toolbar,.section-card-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ticket-card-toolbar__title{font-weight:700;letter-spacing:.02em;color:var(--text,#e8edf5)}
.detail-row--editable{position:relative;padding-right:42px}
.inline-card-edit,.ticket-inline-edit{width:30px;height:30px;border-radius:10px;border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.35);color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.inline-card-edit{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.inline-card-edit:hover,.ticket-inline-edit:hover{background:rgba(14,165,233,.18);border-color:rgba(14,165,233,.35)}
.inline-switch-form{display:flex;align-items:center;gap:10px;margin:0}.switch--inline{vertical-align:middle}.switch--table{display:inline-block;vertical-align:middle;margin-right:8px}.tig-done-text{font-size:12px;opacity:.86}
.dynamic-row--materials{grid-template-columns:minmax(180px,2fr) 110px 120px minmax(140px,1fr) 36px}.input-with-suffix{display:flex;align-items:center;gap:8px}.input-with-suffix span{opacity:.75;white-space:nowrap}
.attachment-tile-form{margin:0}.attachment-tile-grid,.attachment-tile-pending{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}.attachment-tile-pending{margin-top:12px}.attachment-tile{width:112px;height:112px;border:1px solid rgba(148,163,184,.25);border-radius:18px;background:rgba(15,23,42,.35);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:inherit;text-decoration:none}.attachment-tile img{width:100%;height:100%;object-fit:cover;display:block}.attachment-tile--add{font-size:42px;font-weight:700;color:rgba(125,211,252,.95);cursor:pointer;border-style:dashed}.attachment-tile--add:hover{background:rgba(14,165,233,.14);border-color:rgba(14,165,233,.55)}.attachment-tile__file{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:10px;font-weight:800;color:inherit;text-decoration:none;width:100%;height:100%}.attachment-tile__file small{font-size:11px;font-weight:600;opacity:.8;max-width:90px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.attachment-tile__remove{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:999px;border:0;background:rgba(15,23,42,.78);color:#fff;line-height:1;cursor:pointer;font-size:16px}.attachment-tile__remove:hover{background:rgba(220,38,38,.9)}.attachment-tile-help{margin-top:8px}.attachment-tile-grid.is-dragover,.attachment-tile-form.is-dragover{outline:2px dashed rgba(14,165,233,.55);outline-offset:6px;border-radius:18px}.attachment-tile-input{display:none}.thread-item.is-internal .thread-message-head .thread-edited-by{margin-left:6px}
@media (max-width:720px){.dynamic-row--materials{grid-template-columns:1fr}.attachment-tile{width:96px;height:96px}}
.deadline-popover{display:none;position:absolute;right:8px;top:calc(100% - 4px);z-index:30;min-width:260px;padding:12px;border:1px solid rgba(148,163,184,.25);border-radius:16px;background:rgba(15,23,42,.92);backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.28)}.deadline-popover.is-open{display:block}.deadline-popover__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.detail-row--editable{overflow:visible}
body.theme-light .deadline-popover, html[data-theme="light"] .deadline-popover{background:rgba(255,255,255,.92);}

/* Refinements: ticket title edit placement and card header edit buttons */
.ticket-title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    min-width:0;
    width:calc(100% - 324px);
}
.ticket-title-row .ticket-title{
    flex:1 1 auto;
    min-width:0;
    overflow-wrap:anywhere;
}
.ticket-title-edit{
    flex:0 0 auto;
    margin-top:2px;
}
.section-card-title-row{
    position:relative;
    padding-right:0;
}
.section-card-title-row .inline-card-edit{
    position:static;
    transform:none;
    flex:0 0 auto;
}
.dynamic-row--materials input[name$="[qty]"]{
    text-align:right;
}
@media (max-width:1100px){
    .ticket-title-row{width:calc(100% - 294px);}
}
@media (max-width:980px){
    .ticket-title-row{width:100%;}
}


/* Ticket title action buttons */
.ticket-title-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:2px;
}
.ticket-delete-form{margin:0;display:inline-flex;}
.ticket-title-delete{background:rgba(127,29,29,.88);border-color:rgba(248,113,113,.35);color:#fff;}
.ticket-title-delete:hover{background:rgba(185,28,28,.95);border-color:rgba(248,113,113,.55);}
@media (max-width:560px){
    .ticket-title-actions{margin-left:auto;}
}

/* Public version history */
.version-history-shell{width:min(1040px, 100%);}
.version-admin-card{margin-bottom:16px;}
.version-history-list{display:flex;flex-direction:column;gap:14px;}
.version-card{padding:18px;}
.version-card-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.version-card-head h1{margin:0;font-size:clamp(24px, 2.4vw, 34px);line-height:1.1;}
.version-card-head span{color:var(--muted);font-size:14px;font-weight:700;}
.version-card-body{white-space:normal;line-height:1.65;color:var(--text);}
.version-editor{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
.version-editor summary{cursor:pointer;display:inline-flex;list-style:none;}
.version-editor summary::-webkit-details-marker{display:none;}
.version-edit-form{display:flex;flex-direction:column;gap:12px;}
.version-editor .version-edit-form{margin-top:12px;}
.version-editor-actions{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.version-delete-form{margin-top:10px;display:flex;justify-content:flex-end;}


/* Heading favicon icons */
.page-title-with-icon{
    display:flex;
    align-items:center;
    gap:0.45em;
    flex-wrap:wrap;
    min-width:0;
}
.page-title-icon{
    width:1.05em;
    height:1.05em;
    object-fit:contain;
    flex:0 0 auto;
    vertical-align:-0.12em;
}
.table-toolbar h1.page-title-with-icon,
.page-header h1.page-title-with-icon{
    display:flex;
}
.ticket-title .page-title-icon{
    margin:0 0.25em 0 0.35em;
}
.ticket-status-title-icon{
    width:0.98em;
    height:0.98em;
}
.ticket-status-title-icon.is-inprogress,
.ticket-inline-status-icon.is-inprogress{
    animation: inprogressIconPulse 1.8s ease-in-out infinite;
    transform-origin:center;
}
.ticket-inline-status-icon{
    width:14px;
    height:14px;
    object-fit:contain;
    vertical-align:-2px;
    margin-right:6px;
    flex:0 0 auto;
}
@keyframes inprogressIconPulse{
    0%{opacity:.58; transform:scale(0.88);}
    50%{opacity:1; transform:scale(1.12);}
    100%{opacity:.58; transform:scale(0.88);}
}
@media (max-width: 620px){
    .page-title-with-icon{ gap:0.35em; }
    .page-title-icon{ width:1em; height:1em; }
}

/* 2026-05: címsori és queue állapotikonok finomhangolása */
.ticket-title-status{
    display:inline-flex;
    align-items:center;
    gap:0.28em;
    vertical-align:baseline;
    line-height:1;
}
.ticket-title .title-sep,
.ticket-title-status{
    position:relative;
    top:0.02em;
}
.ticket-status-title-icon,
.page-title-icon.ticket-status-title-icon{
    width:1em;
    height:1em;
    min-width:1em;
    min-height:1em;
    aspect-ratio:1 / 1;
    object-fit:contain;
    display:inline-block;
    flex:0 0 1em;
    vertical-align:-0.13em;
}
.ticket-inline-status-icon{
    width:14px;
    height:14px;
    min-width:14px;
    min-height:14px;
    aspect-ratio:1 / 1;
    object-fit:contain;
    display:inline-block;
}
.ticket-inline-status-icon.is-inprogress,
.ticket-status-title-icon.is-inprogress{
    animation: inprogressIconPulse 1.8s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Customer ticket title status alignment */
.customer-ticket-title{
    display:flex;
    align-items:center;
    gap:.36em;
    flex-wrap:wrap;
}
.customer-ticket-title .ticket-title-main{
    min-width:0;
    overflow-wrap:anywhere;
}
.customer-ticket-title .title-sep,
.customer-ticket-title .ticket-title-status{
    position:static;
    top:auto;
    transform:none;
}
.customer-ticket-title .ticket-title-status{
    display:inline-flex;
    align-items:center;
    line-height:1.15;
    vertical-align:middle;
}
.customer-ticket-title .ticket-status-title-icon{
    width:1em;
    height:1em;
    min-width:1em;
    min-height:1em;
    display:block;
    vertical-align:middle;
    margin:0 .18em 0 0;
}

/* Login cleanup: old tab switcher removed, keep comfortable logo spacing */
.login-card.auth-card > .auth-logo{
    margin-bottom:28px;
}
@media (max-width: 560px){
    .login-card.auth-card > .auth-logo{ margin-bottom:24px; }
}

/* Queue column designer rework */
.queue-cols-grid.queue-cols-grid--designer{grid-template-columns: 340px 1fr; gap:14px; align-items:start;}
@media (max-width: 980px){.queue-cols-grid.queue-cols-grid--designer{grid-template-columns:1fr}}
.queue-cols-available{display:flex; flex-direction:column; gap:8px; max-height:520px; overflow:auto; padding-right:4px;}
.queue-col-available-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 10px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:rgba(255,255,255,0.03); cursor:pointer;}
.queue-col-available-row:hover{background:rgba(255,255,255,0.055)}
.queue-col-available-text{display:flex; flex-direction:column; min-width:0; gap:2px;}
.queue-col-available-text strong{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.queue-col-available-text small{font-size:11px; opacity:.62;}
.queue-cols-designer-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.queue-cols-empty{padding:18px; border:1px dashed rgba(255,255,255,0.18); border-radius:14px; color:var(--muted); background:rgba(255,255,255,0.025);}
.queue-attachment-list{display:flex; flex-direction:column; gap:5px; min-width:0;}
.queue-attachment-link{display:flex; align-items:center; gap:6px; min-width:0; max-width:260px; color:inherit; text-decoration:none; font-size:12px; line-height:1.25;}
.queue-attachment-link:hover{text-decoration:underline;}
.queue-attachment-icon{flex:0 0 auto; width:1.35em; text-align:center;}
.queue-attachment-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.queue-inprogress-cell{display:inline-flex; align-items:center; gap:5px;}

/* Hotfix v9: a prioritás queue háttér újra sor-szintű.
   A cellák átlátszóak, ezért a témakörszínezett soron egyetlen folyamatos gradient fut végig,
   és nem látszanak köztes cellaelválasztó szegélyek. */
.ticket-table-priority tbody tr {
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.03)) !important;
    box-shadow: 0 10px 28px rgba(3,8,20,0.16);
}
.ticket-table-priority tbody tr:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04)) !important;
}
.ticket-table-priority tbody tr > td {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}
html[data-theme="light"] .ticket-table-priority tbody tr {
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,0.07);
}
html[data-theme="light"] .ticket-table-priority tbody tr:hover {
    background: rgba(248,250,252,0.98) !important;
}
.ticket-table-priority tbody tr.ticket-row-topic-tint,
html[data-theme="light"] .ticket-table-priority tbody tr.ticket-row-topic-tint {
    background: linear-gradient(90deg, var(--topic-tint-strong), var(--topic-tint)) !important;
}
.ticket-table-priority tbody tr.ticket-row-topic-tint:hover,
html[data-theme="light"] .ticket-table-priority tbody tr.ticket-row-topic-tint:hover {
    background: linear-gradient(90deg, var(--topic-tint-strong), var(--topic-tint)) !important;
}

/* Hotfix v10: queue téma-színezés visszafogott, de soronként egységes.
   Nem indítunk vízszintes gradientet cellánként újra; a színes, éles bal jelzőcsík visszakerült,
   a cellák közti belső elválasztás és a világos módos fehér sarok pedig eltűnik. */
.ticket-table-priority tbody tr,
.ticket-table-priority tbody tr:hover,
html[data-theme="light"] .ticket-table-priority tbody tr,
html[data-theme="light"] .ticket-table-priority tbody tr:hover{
    background: transparent !important;
}
.ticket-table-priority tbody tr > td{
    background: rgba(255,255,255,0.045) !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}
html[data-theme="light"] .ticket-table-priority tbody tr > td{
    background: #f8fafc !important;
}
.ticket-table-priority tbody tr:hover > td{
    background: rgba(255,255,255,0.065) !important;
}
html[data-theme="light"] .ticket-table-priority tbody tr:hover > td{
    background: #f1f5f9 !important;
}
.ticket-table-priority tbody tr.ticket-row-topic-tint > td{
    background: color-mix(in srgb, var(--topic-accent) 16%, rgba(15,23,42,0.50)) !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}
html[data-theme="light"] .ticket-table-priority tbody tr.ticket-row-topic-tint > td{
    background: color-mix(in srgb, var(--topic-accent) 13%, #f8fafc) !important;
}
.ticket-table-priority tbody tr.ticket-row-topic-tint:hover > td{
    background: color-mix(in srgb, var(--topic-accent) 20%, rgba(15,23,42,0.54)) !important;
}
html[data-theme="light"] .ticket-table-priority tbody tr.ticket-row-topic-tint:hover > td{
    background: color-mix(in srgb, var(--topic-accent) 17%, #f1f5f9) !important;
}
.ticket-table-priority tbody tr.ticket-row-topic-tint > td:first-child{
    box-shadow: inset 5px 0 0 var(--topic-accent) !important;
}
.ticket-table-priority tbody tr > td:first-child{
    border-top-left-radius:16px !important;
    border-bottom-left-radius:16px !important;
    overflow:hidden;
}
.ticket-table-priority tbody tr > td:last-child{
    border-top-right-radius:16px !important;
    border-bottom-right-radius:16px !important;
    overflow:hidden;
}
.ticket-table-priority tbody tr > td + td{
    border-left-color: transparent !important;
}
.ticket-table-priority tbody tr > td.td-link .ticket-cell-link{
    background: transparent !important;
}
.ticket-month-toggle .ticket-month-title{
    font-weight:700;
}
.ticket-month-toggle .ticket-month-summary{
    font-weight:400;
    opacity:.76;
}


/* Hotfix v11: világos módos priority queue sarokjavítás.
   A bal jelzőcsík már valódi borderként rajzolódik, nem inset box-shadow-ként,
   ezért a cella lekerekítése alatt nem látszik ki éles fehér sarok. */
.ticket-table-priority tbody tr > td{
    background-clip: padding-box !important;
}
.ticket-table-priority tbody tr.ticket-row-topic-tint > td:first-child{
    box-shadow: none !important;
    border-left: 5px solid var(--topic-accent) !important;
}
.ticket-table-priority tbody tr.ticket-row-topic-tint > td:first-child.td-link .ticket-cell-link{
    padding-left: 18px;
    margin-left: -5px;
}
html[data-theme="light"] .ticket-table-priority tbody tr{
    background: transparent !important;
}
html[data-theme="light"] .ticket-table-priority tbody tr > td:first-child{
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
}
html[data-theme="light"] .ticket-table-priority tbody tr > td:last-child{
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* Hotfix v12: priority queue témaszín bal csík sarokjavítás.
   A csík nem borderként rajzolódik, hanem a lekerekített első cella saját háttérrétege,
   ezért világos módban sem villan ki alóla fehér, szögletes sarok. */
.ticket-table-priority tbody tr.ticket-row-topic-tint > td:first-child{
    border-left:0 !important;
    box-shadow:none !important;
    background:
        linear-gradient(90deg, var(--topic-accent) 0 5px, color-mix(in srgb, var(--topic-accent) 16%, rgba(15,23,42,0.50)) 5px 100%) !important;
    background-clip:border-box !important;
    overflow:hidden !important;
    border-top-left-radius:16px !important;
    border-bottom-left-radius:16px !important;
}
html[data-theme="light"] .ticket-table-priority tbody tr.ticket-row-topic-tint > td:first-child{
    background:
        linear-gradient(90deg, var(--topic-accent) 0 5px, color-mix(in srgb, var(--topic-accent) 13%, #f8fafc) 5px 100%) !important;
}
.ticket-table-priority tbody tr.ticket-row-topic-tint:hover > td:first-child{
    background:
        linear-gradient(90deg, var(--topic-accent) 0 5px, color-mix(in srgb, var(--topic-accent) 20%, rgba(15,23,42,0.54)) 5px 100%) !important;
}
html[data-theme="light"] .ticket-table-priority tbody tr.ticket-row-topic-tint:hover > td:first-child{
    background:
        linear-gradient(90deg, var(--topic-accent) 0 5px, color-mix(in srgb, var(--topic-accent) 17%, #f1f5f9) 5px 100%) !important;
}
.ticket-table-priority tbody tr.ticket-row-topic-tint > td:first-child.td-link .ticket-cell-link{
    padding-left:18px !important;
    margin-left:0 !important;
}


/* Hotfix v13: priority queue light-mode left-corner fix.
   A globális .td-link negatív margója a táblacella lekerekítésén kívülre tudott lógni,
   ezért világos módban a színes bal csík mögött szögletes fehér sarok látszott.
   Priority queue-ban a link kitölti a cellát negatív margin nélkül, a cella pedig levágja a tartalmat. */
.ticket-table-priority tbody tr > td.td-link{
    padding:0 !important;
    overflow:hidden !important;
}
.ticket-table-priority tbody tr > td.td-link .ticket-cell-link{
    margin:0 !important;
    padding:14px 20px !important;
    min-height:100%;
    background:transparent !important;
}
.ticket-table-priority tbody tr.ticket-row-topic-tint > td:first-child.td-link .ticket-cell-link{
    padding-left:20px !important;
}
.ticket-table-priority tbody tr > td:first-child,
.ticket-table-priority tbody tr > td:first-child.td-link{
    border-top-left-radius:16px !important;
    border-bottom-left-radius:16px !important;
    overflow:hidden !important;
}
html[data-theme="light"] .ticket-table-priority tbody tr > td:first-child,
html[data-theme="light"] .ticket-table-priority tbody tr > td:first-child.td-link{
    background-clip:border-box !important;
}

/* v15: ticket_view sticky címsor az agent oldalon */
.ticket-view-page > .page-header-ticket{
    position: sticky;
    top: var(--topbar-offset, 0px);
    z-index: 90;
    padding: 12px 0 14px;
    margin-top: -12px;
    isolation: isolate;
}
.ticket-view-page > .page-header-ticket::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:50%;
    width:100vw;
    transform:translateX(-50%);
    background: var(--bg);
    border-bottom:1px solid rgba(148,163,184,.16);
    box-shadow:0 14px 26px rgba(2,6,23,.26);
}
body.theme-light .ticket-view-page > .page-header-ticket::before,
html[data-theme="light"] .ticket-view-page > .page-header-ticket::before{
    background: var(--bg);
    border-bottom-color:rgba(148,163,184,.28);
    box-shadow:0 14px 24px rgba(15,23,42,.10);
}
@media (max-width:980px){
    .ticket-view-page > .page-header-ticket{top:var(--topbar-offset, 0px);}
}

/* v17: ticket_view - main content centered independently from the modifications panel
   The main ticket body is centered on the viewport. The modifications panel uses
   the free space to the right of the centered ticket body; on narrower screens it
   drops below the ticket body. */
:root{
    --ticket-view-main-width: 900px;
    --ticket-view-log-width: 320px;
    --ticket-view-log-gap: 16px;
}

.ticket-view-page{
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.ticket-view-page > .page-header-ticket{
    width: min(calc(100% - 32px), var(--ticket-view-main-width));
    margin-left: auto;
    margin-right: auto;
}

.ticket-view-page > .alert{
    width: min(calc(100% - 32px), var(--ticket-view-main-width));
    margin-left: auto;
    margin-right: auto;
}

.ticket-view-page > .ticket-view-layout{
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(16px, 1fr) minmax(0, var(--ticket-view-main-width)) minmax(16px, 1fr);
    gap: 0;
    align-items: start;
}

.ticket-view-page > .ticket-view-layout > :first-child{
    grid-column: 2;
    min-width: 0;
}

.ticket-view-page > .ticket-view-layout > .ticket-log-panel{
    grid-column: 3;
    width: min(var(--ticket-view-log-width), calc(100% - var(--ticket-view-log-gap) - 12px));
    min-width: 0;
    margin-left: var(--ticket-view-log-gap);
    align-self: start;
}

@media (max-width: 1280px){
    .ticket-view-page{
        padding-left: 16px;
        padding-right: 16px;
    }
    .ticket-view-page > .page-header-ticket,
    .ticket-view-page > .alert{
        width: min(100%, var(--ticket-view-main-width));
    }
    .ticket-view-page > .ticket-view-layout{
        grid-template-columns: minmax(0, var(--ticket-view-main-width));
        justify-content: center;
    }
    .ticket-view-page > .ticket-view-layout > :first-child,
    .ticket-view-page > .ticket-view-layout > .ticket-log-panel{
        grid-column: 1;
        width: 100%;
        margin-left: 0;
    }
    .ticket-view-page > .ticket-view-layout > .ticket-log-panel{
        margin-top: 14px;
        padding-left: 0;
    }
}

@media (max-width: 640px){
    .ticket-view-page{
        padding-left: 12px;
        padding-right: 12px;
    }
    .ticket-view-page > .page-header-ticket,
    .ticket-view-page > .alert{
        width: 100%;
    }
}

/* v18: ticket_view sticky title and centered main header alignment
   Keep the ticket title bar in the same 900px centered column as the ticket body,
   but let the action buttons sit at the exact right edge of that column. Also
   remove the initial top spacing that made the sticky title appear to drop down
   when the page was scrolled all the way to the top. */
.ticket-view-page{
    padding-top:0 !important;
}
.ticket-view-page > .page-header-ticket{
    display:block !important;
    top:calc(var(--topbar-offset, 0px) - 1px) !important;
    margin-top:0 !important;
    margin-bottom:16px !important;
    padding:10px 0 12px !important;
    width:min(calc(100% - 32px), var(--ticket-view-main-width)) !important;
}
.ticket-view-page > .page-header-ticket::before{
    top:-1px !important;
}
.ticket-view-page > .page-header-ticket .ticket-title-row{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.ticket-view-page > .page-header-ticket .ticket-title{
    flex:1 1 auto;
    min-width:0;
    max-width:none !important;
}
.ticket-view-page > .page-header-ticket .ticket-title-actions{
    flex:0 0 auto;
    margin-left:12px;
}
.ticket-view-page > .page-header-ticket > .page-header-actions{
    display:none !important;
}
@media (max-width:640px){
    .ticket-view-page > .page-header-ticket{
        width:100% !important;
        padding-top:8px !important;
    }
    .ticket-view-page > .page-header-ticket .ticket-title-row{
        align-items:flex-start;
        gap:8px;
    }
    .ticket-view-page > .page-header-ticket .ticket-title-actions{
        margin-left:4px;
    }
}

/* v19: ticket_view horizontal overflow fix
   The sticky ticket header previously used a 100vw pseudo-background while the
   page also had a vertical scrollbar. On browsers where 100vw includes the
   scrollbar width this created a small horizontal overflow only on ticket_view.
   Keep the sticky header full-page wide, but center the actual title row in the
   same main ticket column as the cards. */
.ticket-view-page > .page-header-ticket{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible !important;
}
.ticket-view-page > .page-header-ticket::before{
    left:0 !important;
    right:0 !important;
    width:auto !important;
    transform:none !important;
}
.ticket-view-page > .page-header-ticket .ticket-title-row{
    width:min(calc(100% - 32px), var(--ticket-view-main-width)) !important;
    max-width:var(--ticket-view-main-width) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
@media (max-width:1280px){
    .ticket-view-page > .page-header-ticket .ticket-title-row{
        width:min(100%, var(--ticket-view-main-width)) !important;
    }
}
@media (max-width:640px){
    .ticket-view-page > .page-header-ticket .ticket-title-row{
        width:100% !important;
    }
}

/* v20: notification dropdown above ticket_view sticky title
   The ticket_view title bar has z-index:90 while the fixed topbar was still at
   z-index:50. Because the notification dropdown lives inside the topbar stacking
   context, the sticky title could cover the opened dropdown on ticket_view pages.
   Raise the topbar stacking context above the ticket header; modals keep their
   much higher z-index and are unaffected. */
.topbar{
    z-index: 2000 !important;
}
.notification-bell-wrap{
    z-index: 2010;
}
.notification-dropdown{
    z-index: 2020 !important;
}

/* v21: Private personal notes */
.thread-message-head{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
.thread-item.is-right .thread-message-head{
    justify-content:flex-end;
}
.thread-item.is-private{
    background: linear-gradient(135deg, rgba(2,6,23,0.94), rgba(17,24,39,0.88));
    border-color: rgba(2,6,23,0.82);
    color:#f8fafc;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 18px rgba(0,0,0,0.20);
}
.thread-item.is-private .muted,
.thread-item.is-private .thread-message-head,
.thread-item.is-private .thread-edited-by{
    color:rgba(226,232,240,0.72);
}
.thread-item.is-private .ticket-link{
    color:#93c5fd;
}
html[data-theme="dark"] .thread-item.is-private{
    background: linear-gradient(135deg, rgba(0,0,0,0.90), rgba(15,23,42,0.96));
    border-color: rgba(148,163,184,0.28);
    color:#f8fafc;
}
.thread-delete-form{
    display:inline-flex;
    margin:0;
    padding:0;
}
.thread-delete-btn,
.thread-edit-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:10px;
    border:1px solid rgba(148,163,184,0.25);
    background:rgba(15,23,42,0.10);
    color:inherit;
    cursor:pointer;
    line-height:1;
}
.thread-delete-btn:hover{
    background:rgba(220,38,38,0.22);
    border-color:rgba(220,38,38,0.50);
}
.thread-edit-btn:hover{
    background:rgba(14,165,233,0.14);
    border-color:rgba(14,165,233,0.42);
}
.btn-message-customer{
    background:rgba(127,127,127,0.08);
    border-color:var(--border);
}
.btn-message-internal{
    background:rgba(255,255,255,0.46);
    border-color:rgba(148,163,184,0.36);
}
html[data-theme="dark"] .btn-message-internal{
    background:rgba(255,255,255,0.14);
    border-color:rgba(226,232,240,0.26);
    color:#f8fafc;
}
.btn-message-private{
    background:linear-gradient(135deg, rgba(2,6,23,0.92), rgba(17,24,39,0.82));
    border-color:rgba(2,6,23,0.78);
    color:#f8fafc;
}
.btn-message-private:hover{
    background:linear-gradient(135deg, rgba(0,0,0,0.96), rgba(15,23,42,0.92));
}
html[data-theme="dark"] .btn-message-private{
    background:linear-gradient(135deg, rgba(0,0,0,0.90), rgba(15,23,42,0.96));
    border-color:rgba(148,163,184,0.30);
    color:#f8fafc;
}

/* v23: Customer ticket_view sticky header + private notes */
.customer-ticket-view-page{
    padding-top:0 !important;
}
.customer-ticket-view-page > .page-header-ticket{
    position:sticky;
    top:calc(var(--topbar-offset, 0px) - 1px);
    z-index:90;
    display:block !important;
    padding:10px 0 12px !important;
    margin-top:0 !important;
    margin-bottom:16px !important;
    isolation:isolate;
}
.customer-ticket-view-page > .page-header-ticket::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:-1px;
    bottom:0;
    left:0;
    right:0;
    background:var(--bg);
    border-bottom:1px solid rgba(148,163,184,.16);
    box-shadow:0 14px 26px rgba(2,6,23,.26);
}
body.theme-light .customer-ticket-view-page > .page-header-ticket::before,
html[data-theme="light"] .customer-ticket-view-page > .page-header-ticket::before{
    background:var(--bg);
    border-bottom-color:rgba(148,163,184,.28);
    box-shadow:0 14px 24px rgba(15,23,42,.10);
}
.customer-ticket-title-row{
    width:min(100%, 1200px);
    margin-left:auto;
    margin-right:auto;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.customer-ticket-view-page > .page-header-ticket .ticket-title{
    flex:1 1 auto;
    min-width:0;
    max-width:none !important;
}
.conversation-action-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}
@media (max-width:640px){
    .customer-ticket-view-page > .page-header-ticket{
        padding-top:8px !important;
    }
    .customer-ticket-title-row{
        width:100%;
    }
    .conversation-action-row{
        justify-content:flex-start;
    }
}

/* v24: customer ticket_view sticky header should span the full viewport like agent ticket_view
   The customer ticket page lives inside the normal 1200px .app-container. That made
   the sticky title background stop at the card column instead of covering the page
   from edge to edge. Make only this page full-width, then re-center the actual
   ticket content and title row inside the usual 1200px column. */
.customer-ticket-view-page{
    max-width:none !important;
    width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
}
.customer-ticket-view-page > .page-header-ticket{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible !important;
}
.customer-ticket-view-page > .page-header-ticket::before{
    left:0 !important;
    right:0 !important;
    width:auto !important;
    transform:none !important;
}
.customer-ticket-view-page > .page-header-ticket .customer-ticket-title-row{
    width:min(calc(100% - 32px), 1200px) !important;
    max-width:1200px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
.customer-ticket-view-page > :not(.page-header-ticket){
    width:min(calc(100% - 32px), 1200px) !important;
    max-width:1200px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
@media (max-width:640px){
    .customer-ticket-view-page > .page-header-ticket .customer-ticket-title-row,
    .customer-ticket-view-page > :not(.page-header-ticket){
        width:calc(100% - 24px) !important;
    }
}

/* v29: dockolható üzenetíró modalok */
.modal-header-actions{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
}
.modal-dock-toggle,
.modal-dock-collapse{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:var(--text);
    opacity:.85;
    border-radius:10px;
    padding:6px 10px;
    line-height:1;
    font-size:16px;
    cursor:pointer;
}
.modal-dock-toggle:hover,
.modal-dock-collapse:hover{
    opacity:1;
    background:rgba(127,127,127,.10);
}
.modal-dock-collapse{display:none;}
.modal-message-compose .modal-body{
    transition:max-height 240ms ease, opacity 180ms ease, padding 180ms ease;
}
.modal.is-docked{
    display:block;
    position:fixed;
    inset:auto 22px 22px auto;
    width:min(460px, calc(100vw - 44px));
    height:auto;
    z-index:9998;
    pointer-events:none;
}
.modal.is-docked .modal-backdrop{
    opacity:0 !important;
    pointer-events:none;
    backdrop-filter:blur(0);
    -webkit-backdrop-filter:blur(0);
    transition:opacity 420ms ease, backdrop-filter 420ms ease;
}
.modal.is-docked .modal-dialog{
    pointer-events:auto;
    width:100%;
    max-width:none;
    max-height:min(62vh, 620px);
    margin:0;
    opacity:1;
    transform:none;
    display:flex;
    flex-direction:column;
    border-radius:18px;
    box-shadow:0 18px 55px rgba(0,0,0,.42);
    overflow:hidden;
}
.modal.is-docked .modal-header{
    padding:10px 12px;
}
.modal.is-docked .modal-header h2{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
}
.modal.is-docked .modal-body{
    overflow:auto;
    max-height:calc(min(62vh, 620px) - 48px);
}
.modal.is-docked textarea.form-textarea,
.modal.is-docked textarea.form-input{
    min-height:150px;
    max-height:34vh;
    overflow:auto;
    resize:vertical;
}
.modal.is-docked .modal-dock-collapse{display:inline-flex;}
.modal.is-docked.is-dock-collapsed .modal-body{
    max-height:0 !important;
    opacity:0;
    padding-top:0;
    padding-bottom:0;
    overflow:hidden;
}
.modal.is-docked.is-dock-collapsed .modal-dialog{
    max-height:52px;
}
@media (max-width: 720px){
    .modal.is-docked{
        inset:auto 10px 10px 10px;
        width:auto;
    }
    .modal.is-docked .modal-dialog{
        max-height:70vh;
    }
    .modal.is-docked .modal-body{
        max-height:calc(70vh - 48px);
    }
}

/* v33: external cloud links beside ticket attachments */
.external-link-panel{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(148,163,184,.18);
}
.external-link-panel__title{
    font-weight:600;
    margin-bottom:8px;
}
.external-link-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.external-link-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:9px 10px;
    border:1px solid rgba(148,163,184,.22);
    border-radius:12px;
    background:rgba(15,23,42,.16);
}
body.theme-light .external-link-item,
html[data-theme="light"] .external-link-item{
    background:rgba(248,250,252,.9);
}
.external-link-item__main{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    color:inherit;
    text-decoration:none;
}
.external-link-item__main:hover .external-link-item__text{text-decoration:underline;}
.external-link-item__icon{flex:0 0 auto;}
.external-link-item__text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.external-link-item__remove{
    flex:0 0 auto;
    width:26px;
    height:26px;
    border:0;
    border-radius:999px;
    cursor:pointer;
    color:inherit;
    background:rgba(239,68,68,.18);
}
.external-link-item__remove:hover{background:rgba(239,68,68,.32);}
.external-link-delete-form{margin:0;}
.external-link-add-form{
    margin-top:10px;
    display:grid;
    grid-template-columns:minmax(190px, 1.4fr) minmax(140px, .9fr) auto;
    gap:8px;
    align-items:center;
}
.queue-external-link .queue-attachment-icon{font-size:1em;}
@media (max-width:720px){
    .external-link-add-form{grid-template-columns:1fr;}
}

/* v34: external link add moved to modal + clearer link rows */
.external-link-panel__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}
.external-link-panel__head .external-link-panel__title{margin-bottom:0;}
.external-link-add-btn{
    width:34px;
    height:34px;
    border:1px solid rgba(125,211,252,.35);
    border-radius:12px;
    background:rgba(14,165,233,.12);
    color:#7dd3fc;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.external-link-add-btn:hover{
    background:rgba(14,165,233,.2);
    border-color:rgba(125,211,252,.6);
    transform:translateY(-1px);
}
.external-link-item{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
}
.external-link-item__main{
    min-width:0;
}
.external-link-delete-form{
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.external-link-item__remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border:1px solid rgba(248,113,113,.35);
    border-radius:10px;
    background:rgba(127,29,29,.35);
    color:#fecaca;
    font-weight:700;
    line-height:1;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.external-link-item__remove:hover{
    background:rgba(220,38,38,.45);
    border-color:rgba(248,113,113,.7);
    color:#fff;
}
body.theme-light .external-link-item__remove,
html[data-theme="light"] .external-link-item__remove{
    background:rgba(254,226,226,.95);
    border-color:rgba(248,113,113,.45);
    color:#991b1b;
}
body.theme-light .external-link-item__remove:hover,
html[data-theme="light"] .external-link-item__remove:hover{
    background:rgba(248,113,113,.22);
    color:#7f1d1d;
}

/* v37: Account edit modal scrollbar flicker fix
   Keep the large account modal geometry stable while typing. The previous
   layout was exactly on the edge of overflowing, so Chrome intermittently
   showed vertical + horizontal scrollbars on every second keypress. */
.account-modal,
.account-modal *{
    box-sizing:border-box;
}
.account-modal .modal-dialog-wide{
    width:min(980px, calc(100dvw - 28px));
    max-width:calc(100dvw - 28px);
    max-height:calc(100dvh - 36px);
    overflow:hidden;
}
.account-modal .modal-dialog-wide .modal-content{
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - 36px);
    overflow:hidden;
    min-width:0;
}
.account-modal form.form-card{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
}
.account-modal .form-grid,
.account-modal .form-row,
.account-modal .form-row-inline,
.account-modal .department-assignment-list,
.account-modal .account-department-row,
.account-modal .account-switch-grid{
    min-width:0;
    max-width:100%;
}
.account-modal .form-input,
.account-modal .form-select,
.account-modal textarea{
    min-width:0;
    max-width:100%;
}
.account-modal .form-actions{
    left:0;
    right:0;
    width:100%;
    max-width:100%;
    margin:12px 0 0 !important;
    box-sizing:border-box;
    overflow:hidden;
}
.account-modal .modal-header{
    width:100%;
    min-width:0;
}
@supports not (width: 100dvw){
    .account-modal .modal-dialog-wide{
        width:min(980px, calc(100vw - 28px));
        max-width:calc(100vw - 28px);
        max-height:calc(100vh - 36px);
    }
    .account-modal .modal-dialog-wide .modal-content{
        max-height:calc(100vh - 36px);
    }
}

/* v41 - Munkalap generator button */
.status-button.status-workorder {
    background: linear-gradient(135deg, rgba(125, 211, 252, .95), rgba(56, 189, 248, .82));
    border-color: rgba(125, 211, 252, .75);
    color: #061622;
    box-shadow: 0 10px 26px rgba(56, 189, 248, .18);
    text-decoration: none;
}
.status-button.status-workorder:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(56, 189, 248, .25);
    color: #061622;
}

/* Hibakezelő 10 – részlegspecifikus folyamatjelölők */
.process-marker-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--pm-color, #64748B);
    color: var(--pm-text, #ffffff);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 4px 12px rgba(0,0,0,0.12);
    white-space: nowrap;
}
.process-marker-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    opacity: .9;
}
.process-marker-current {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 32px;
}
.process-marker-option-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.process-marker-select {
    border-color: rgba(34,197,94,0.75) !important;
    box-shadow: 0 0 0 1px rgba(34,197,94,0.18);
}

/* Hibakezelő 12 – folyamatjelölő választó modal */
.process-marker-picker-label {
    margin-bottom: 8px;
}
.process-marker-choice-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 4px;
}
.process-marker-choice {
    appearance: none;
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--pm-color, #64748B) 72%, rgba(255,255,255,.28));
    border-left-width: 8px;
    border-radius: 14px;
    padding: 11px 14px 11px 12px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--pm-color, #64748B) 30%, rgba(15,23,42,.92)), rgba(15,23,42,.72)),
        rgba(15,23,42,.84);
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.14);
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: saturate(1);
    transition: transform .18s ease, opacity .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.process-marker-choice:hover,
.process-marker-choice:focus-visible {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 12px 24px rgba(0,0,0,.20), 0 0 0 2px color-mix(in srgb, var(--pm-color, #64748B) 36%, transparent);
    outline: none;
}
.process-marker-choice-list.has-selection .process-marker-choice:not(.is-selected) {
    opacity: .54;
    filter: saturate(.72) brightness(.86);
}
.process-marker-choice-list.has-selection .process-marker-choice:not(.is-selected):hover,
.process-marker-choice-list.has-selection .process-marker-choice:not(.is-selected):focus-visible {
    opacity: .82;
    filter: saturate(.95) brightness(.98);
}
.process-marker-choice.is-selected {
    transform: translateY(-3px) scale(1.018);
    border-color: color-mix(in srgb, var(--pm-color, #64748B) 82%, #ffffff);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--pm-color, #64748B) 54%, rgba(15,23,42,.72)), rgba(15,23,42,.56)),
        rgba(15,23,42,.86);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 18px 34px rgba(0,0,0,.30), 0 0 0 2px color-mix(in srgb, var(--pm-color, #64748B) 42%, transparent);
}
.process-marker-choice-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex: 0 0 12px;
    background: var(--pm-color, #64748B);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-color, #64748B) 28%, transparent), inset 0 0 0 1px rgba(255,255,255,.42);
}
.process-marker-choice-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.process-marker-choice--none {
    border-left-color: #64748B;
}
@media (max-width: 640px) {
    .process-marker-choice {
        padding: 10px 12px;
        border-radius: 12px;
    }
}

/* Hibakezelő 15: agent naptár */
.calendar-page{max-width:1180px;}
.calendar-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin:24px auto 18px;}
.calendar-hero h1{margin:0 0 6px;font-size:28px;letter-spacing:.02em;}
.calendar-toolbar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;}
.calendar-toggle{min-height:38px;}
.calendar-department-filter .queue-department-filter-panel{right:0;left:auto;}
.calendar-department-row:has(input[type="checkbox"]:checked){background:rgba(44,211,126,0.12);}
.calendar-shell{display:grid;grid-template-columns:minmax(0, 1.65fr) minmax(290px, .85fr);gap:16px;align-items:start;}
.calendar-main-card,.calendar-side-card{border:1px solid var(--border-strong);background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)), var(--panel);border-radius:20px;box-shadow:var(--shadow);}
.calendar-main-card{padding:14px;}
.calendar-side-card{padding:16px;position:sticky;top:88px;}
.calendar-side-card h2{margin:0 0 12px;font-size:16px;}
.calendar-month-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;margin-bottom:10px;}
.calendar-month-head h2{margin:0;text-align:center;font-size:17px;letter-spacing:.02em;}
.calendar-nav-btn{width:34px;height:34px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease,transform .15s ease;}
.calendar-nav-btn:hover{background:rgba(255,255,255,.10);border-color:rgba(56,189,248,.45);transform:translateY(-1px);}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7, 1fr);gap:8px;margin:8px 4px 6px;color:#b7c7e6;font-size:12px;text-align:center;font-weight:700;}
.calendar-grid{display:grid;grid-template-columns:repeat(7, minmax(0,1fr));gap:8px;}
.calendar-day{min-height:78px;border:1px solid transparent;border-radius:14px;background:rgba(15,23,42,.18);padding:8px 7px;text-align:left;color:var(--text);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
.calendar-day:hover{background:rgba(56,189,248,.09);border-color:rgba(56,189,248,.30);transform:translateY(-1px);}
.calendar-day.is-selected{background:rgba(59,130,246,.20);border-color:rgba(96,165,250,.48);box-shadow:0 14px 32px rgba(30,64,175,.20);}
.calendar-day.is-today .calendar-day-number{color:#fff;background:#0ea5e9;border-radius:999px;padding:2px 7px;display:inline-flex;align-self:flex-start;}
.calendar-day.is-muted{opacity:.42;}
.calendar-day-number{font-size:13px;font-weight:800;color:#cbd5e1;}
.calendar-day-dots{display:flex;align-items:center;gap:4px;min-height:14px;flex-wrap:wrap;}
.calendar-dot{width:8px;height:8px;border-radius:999px;display:inline-block;box-shadow:0 0 0 3px rgba(255,255,255,.035), 0 0 12px currentColor;}
.calendar-dot--red{background:#ef4444;color:#ef4444;}
.calendar-dot--green{background:#22c55e;color:#22c55e;}
.calendar-dot--gray{background:#94a3b8;color:#94a3b8;}
.calendar-dot-more{font-size:11px;color:var(--muted);line-height:1;}
.calendar-day-panel{margin-top:16px;border:1px solid var(--border);border-radius:18px;background:rgba(2,6,23,.12);padding:14px;}
.calendar-day-panel h3{margin:0 0 12px;font-size:15px;}
.calendar-day-list,.calendar-upcoming-list{display:flex;flex-direction:column;gap:9px;}
.calendar-day-list.is-animating .calendar-task-card,
.calendar-day-list.is-animating .calendar-empty,
.calendar-upcoming-list.is-animating .calendar-task-card,
.calendar-upcoming-list.is-animating .calendar-empty{animation:calendarTaskSlideIn .34s cubic-bezier(.2,.85,.22,1) both;}
.calendar-day-list.is-animating .calendar-task-card:nth-child(2),
.calendar-upcoming-list.is-animating .calendar-task-card:nth-child(2){animation-delay:.035s;}
.calendar-day-list.is-animating .calendar-task-card:nth-child(3),
.calendar-upcoming-list.is-animating .calendar-task-card:nth-child(3){animation-delay:.07s;}
.calendar-day-list.is-animating .calendar-task-card:nth-child(4),
.calendar-upcoming-list.is-animating .calendar-task-card:nth-child(4){animation-delay:.105s;}
.calendar-day-list.is-animating .calendar-task-card:nth-child(n+5),
.calendar-upcoming-list.is-animating .calendar-task-card:nth-child(n+5){animation-delay:.14s;}
@keyframes calendarTaskSlideIn{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(2px);}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}}

.calendar-task-card{border:1px solid var(--border);border-left-width:5px;border-radius:14px;background:rgba(255,255,255,.045);padding:11px 12px;color:var(--text);text-decoration:none;display:block;box-shadow:0 10px 26px rgba(0,0,0,.10);transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;}
.calendar-task-card:hover{transform:translateY(-1px);background:rgba(255,255,255,.07);text-decoration:none;opacity:1;box-shadow:0 14px 30px rgba(0,0,0,.18);} .calendar-task-card:visited,.calendar-task-card:focus,.calendar-task-card:hover{color:var(--text);}
.calendar-task-card--red{border-left-color:#ef4444;background:linear-gradient(90deg, rgba(239,68,68,.16), rgba(255,255,255,.04));}
.calendar-task-card--green{border-left-color:#22c55e;background:linear-gradient(90deg, rgba(34,197,94,.17), rgba(255,255,255,.04));}
.calendar-task-card--gray{border-left-color:#94a3b8;background:linear-gradient(90deg, rgba(148,163,184,.13), rgba(255,255,255,.04));}
.calendar-task-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.calendar-task-title{min-width:0;font-weight:800;font-size:14px;line-height:1.25;overflow-wrap:anywhere;color:var(--text);}
.calendar-task-time{color:var(--text);margin-right:4px;white-space:nowrap;}
.calendar-task-meta{margin-top:5px;color:var(--muted);font-size:12px;line-height:1.35;}
.calendar-task-badge{flex:0 0 auto;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900;letter-spacing:.02em;white-space:nowrap;}
.calendar-task-badge--done{background:rgba(34,197,94,.22);color:#bbf7d0;border:1px solid rgba(34,197,94,.35);}
.calendar-task-badge--note{background:rgba(148,163,184,.18);color:#e2e8f0;border:1px solid rgba(148,163,184,.28);}
.calendar-upcoming-date{display:inline-flex;align-items:center;gap:6px;color:#bfdbfe;font-size:12px;font-weight:800;margin-bottom:5px;}
.calendar-empty{padding:12px;border:1px dashed var(--border-strong);border-radius:14px;color:var(--muted);font-size:13px;}
.calendar-note-error{border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.12);color:#fecaca;border-radius:12px;padding:9px 10px;font-size:13px;margin-top:8px;}
html[data-theme="light"] .calendar-main-card,html[data-theme="light"] .calendar-side-card{background:#fff;}
html[data-theme="light"] .calendar-weekdays{color:#64748b;}
html[data-theme="light"] .calendar-day{background:#f8fafc;}
html[data-theme="light"] .calendar-day-panel{background:#f8fafc;}
html[data-theme="light"] .calendar-task-card{background:#fff;}
html[data-theme="light"] .calendar-task-card--red{background:linear-gradient(90deg, rgba(239,68,68,.10), #fff 42%);}
html[data-theme="light"] .calendar-task-card--green{background:linear-gradient(90deg, rgba(34,197,94,.12), #fff 42%);}
html[data-theme="light"] .calendar-task-card--gray{background:linear-gradient(90deg, rgba(100,116,139,.10), #fff 42%);}
html[data-theme="light"] .calendar-task-badge--done{color:#166534;background:#dcfce7;border-color:#86efac;}
html[data-theme="light"] .calendar-task-badge--note{color:#334155;background:#f1f5f9;border-color:#cbd5e1;}
html[data-theme="light"] .calendar-upcoming-date{color:#2563eb;}
html[data-theme="light"] .calendar-task-card,html[data-theme="light"] .calendar-task-card:visited,html[data-theme="light"] .calendar-task-card:focus,html[data-theme="light"] .calendar-task-card:hover,html[data-theme="light"] .calendar-task-title,html[data-theme="light"] .calendar-task-time{color:#0f172a;}
@media (max-width: 980px){.calendar-hero{flex-direction:column}.calendar-toolbar{justify-content:flex-start}.calendar-shell{grid-template-columns:1fr}.calendar-side-card{position:static}.calendar-day{min-height:64px}}
@media (max-width: 620px){.calendar-grid,.calendar-weekdays{gap:5px}.calendar-day{min-height:54px;border-radius:11px;padding:6px}.calendar-day-number{font-size:12px}.calendar-dot{width:7px;height:7px}.calendar-month-head{grid-template-columns:36px 1fr 36px}.calendar-toolbar{align-items:stretch}.calendar-toolbar .btn{width:100%}}
.account-alias-line{font-size:12px;margin-top:4px;line-height:1.35;}


/* HVSZ_STAGING_ENV_H20_CSS: visible staging/testing environment banner */
.env-banner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:7px 16px;
    box-sizing:border-box;
    color:#fff;
    background:linear-gradient(90deg,#b91c1c,#ea580c,#b91c1c);
    border-top:1px solid rgba(255,255,255,.18);
    box-shadow:0 8px 22px rgba(127,29,29,.25);
    font-size:13px;
    letter-spacing:.02em;
    text-transform:uppercase;
}
.env-banner strong{font-weight:800;}
.env-banner span{font-weight:650;opacity:.96;text-transform:none;}
html[data-theme="dark"] .env-banner{
    background:linear-gradient(90deg,#7f1d1d,#9a3412,#7f1d1d);
    border-top-color:rgba(255,255,255,.12);
}
@media (max-width:720px){
    .env-banner{flex-direction:column;gap:2px;padding:6px 10px;font-size:12px;line-height:1.25;text-align:center;}
}