/* HVSZ Hibakezelő H21 - v2 app shell foundation
   Config gated: loaded only when APP_UI_V2_ENABLED is true.
   Focus: modern shell, controlled animation, light/dark tokens, non-destructive fallback. */

:root{
    --v2-sidebar-w: 286px;
    --v2-shell-gap: 18px;
    --v2-shell-radius: 28px;
    --v2-surface: rgba(255,255,255,.72);
    --v2-surface-strong: rgba(255,255,255,.88);
    --v2-surface-soft: rgba(248,250,252,.72);
    --v2-line: rgba(15,23,42,.10);
    --v2-line-strong: rgba(15,23,42,.18);
    --v2-text: var(--text, #0f172a);
    --v2-muted: var(--muted, #64748b);
    --v2-primary: #0ea5e9;
    --v2-primary-2: #22c55e;
    --v2-danger: #ef4444;
    --v2-warning: #f59e0b;
    --v2-glow: 0 24px 90px rgba(14,165,233,.14), 0 12px 36px rgba(15,23,42,.08);
    --v2-card-shadow: 0 18px 55px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.55);
    --v2-motion-fast: 160ms;
    --v2-motion: 260ms;
    --v2-motion-slow: 460ms;
}
html[data-theme="dark"]{
    --v2-surface: rgba(15,23,42,.74);
    --v2-surface-strong: rgba(15,23,42,.90);
    --v2-surface-soft: rgba(15,23,42,.58);
    --v2-line: rgba(226,232,240,.10);
    --v2-line-strong: rgba(226,232,240,.18);
    --v2-primary: #38bdf8;
    --v2-primary-2: #22c55e;
    --v2-glow: 0 24px 90px rgba(56,189,248,.12), 0 16px 50px rgba(0,0,0,.32);
    --v2-card-shadow: 0 20px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}

html.ui-v2-shell{--topbar-offset:0px !important;}
body.ui-v2-shell{
    padding-top:0 !important;
    min-height:100%;
    background:
      radial-gradient(900px 520px at 6% 6%, rgba(14,165,233,.12), transparent 58%),
      radial-gradient(760px 420px at 92% 10%, rgba(34,197,94,.10), transparent 55%),
      radial-gradient(760px 500px at 70% 92%, rgba(168,85,247,.10), transparent 58%),
      var(--bg);
}
body.ui-v2-shell::before{opacity:.95;filter:saturate(1.08);}

body.ui-v2-shell .topbar{
    top:var(--v2-shell-gap);
    left:var(--v2-shell-gap);
    right:auto;
    bottom:var(--v2-shell-gap);
    width:var(--v2-sidebar-w);
    z-index:70;
    display:flex;
    overflow:hidden;
    border:1px solid var(--v2-line);
    border-radius:var(--v2-shell-radius);
    background:linear-gradient(145deg, var(--v2-surface-strong), var(--v2-surface));
    box-shadow:var(--v2-glow);
    backdrop-filter:blur(22px) saturate(145%);
    -webkit-backdrop-filter:blur(22px) saturate(145%);
}
body.ui-v2-shell .topbar::before{
    content:"";
    position:absolute;
    inset:-1px;
    pointer-events:none;
    background:linear-gradient(150deg, rgba(14,165,233,.18), transparent 28%, rgba(34,197,94,.12) 62%, transparent 78%);
    opacity:.9;
}
body.ui-v2-shell .topbar-inner{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    padding:18px 14px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:14px;
    overflow:auto;
    scrollbar-width:thin;
}
body.ui-v2-shell .brand{
    width:100%;
    justify-content:center;
    flex-direction:column;
    gap:8px;
    padding:12px 10px 14px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.18));
    border:1px solid var(--v2-line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.40);
}
html[data-theme="dark"] body.ui-v2-shell .brand{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));}
body.ui-v2-shell .brand-logo{height:58px;max-width:200px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.18));}
body.ui-v2-shell .version-badge{font-weight:800;border-color:var(--v2-line);background:rgba(14,165,233,.10);color:var(--v2-text);}
body.ui-v2-shell .topbar-center{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    flex-wrap:nowrap;
    margin:2px 0 auto;
}
body.ui-v2-shell .topbar-pill,
body.ui-v2-shell button.topbar-pill{
    width:100%;
    min-height:42px;
    justify-content:flex-start;
    padding:10px 12px;
    border-radius:16px;
    font-size:13px;
    font-weight:720;
    letter-spacing:.01em;
    border:1px solid transparent;
    background:rgba(148,163,184,.10);
    color:var(--v2-text);
    opacity:.94;
    transform:translateZ(0);
    transition:transform var(--v2-motion-fast) ease, background var(--v2-motion-fast) ease, border-color var(--v2-motion-fast) ease, box-shadow var(--v2-motion-fast) ease, opacity var(--v2-motion-fast) ease;
}
body.ui-v2-shell .topbar-pill:hover,
body.ui-v2-shell button.topbar-pill:hover{
    opacity:1;
    transform:translateX(3px);
    border-color:rgba(14,165,233,.22);
    background:linear-gradient(90deg, rgba(14,165,233,.14), rgba(148,163,184,.09));
    box-shadow:0 10px 30px rgba(14,165,233,.10);
}
body.ui-v2-shell .topbar-pill.active{
    opacity:1;
    color:var(--v2-text);
    border-color:rgba(14,165,233,.34);
    background:linear-gradient(90deg, rgba(14,165,233,.20), rgba(34,197,94,.10));
    box-shadow:inset 3px 0 0 var(--v2-primary), 0 12px 34px rgba(14,165,233,.14);
}
body.ui-v2-shell .topbar-icon-wrap{width:22px;min-width:22px;justify-content:center;}
body.ui-v2-shell .topbar-img{width:19px;height:19px;}
body.ui-v2-shell .topbar-right{
    width:100%;
    justify-content:center;
    display:grid;
    grid-template-columns:repeat(5, minmax(34px, 1fr));
    gap:8px;
    padding-top:10px;
    border-top:1px solid var(--v2-line);
}
body.ui-v2-shell .notification-bell-wrap{position:relative;display:block;min-width:0;}
body.ui-v2-shell .notification-bell-wrap .topbar-icon{width:100%;}
body.ui-v2-shell .topbar-icon,
body.ui-v2-shell .topbar-right .topbar-icon{
    width:100%;
    height:40px;
    flex:initial;
    border-radius:14px;
    border:1px solid var(--v2-line);
    background:rgba(148,163,184,.11);
    color:var(--v2-text);
    transition:transform var(--v2-motion-fast) ease, background var(--v2-motion-fast) ease, border-color var(--v2-motion-fast) ease;
}
body.ui-v2-shell .topbar-icon:hover{transform:translateY(-2px);background:rgba(14,165,233,.14);border-color:rgba(14,165,233,.28);}
body.ui-v2-shell .notification-dropdown{
    left:calc(100% + 14px);
    right:auto;
    top:auto;
    bottom:0;
    width:min(420px, calc(100vw - var(--v2-sidebar-w) - 58px));
}
body.ui-v2-shell .env-banner{
    order:99;
    margin-top:4px;
    border-radius:16px;
    padding:8px 10px;
    flex-direction:column;
    gap:2px;
    font-size:11px;
    line-height:1.22;
    box-shadow:none;
}
body.ui-v2-shell .v2-mobile-toggle{display:none;}

body.ui-v2-shell main.app-container,
body.ui-v2-shell .app-container{
    max-width:none;
    width:auto;
    margin-left:calc(var(--v2-sidebar-w) + var(--v2-shell-gap) * 2);
    margin-right:0;
    padding:22px 24px 44px 10px;
}
body.ui-v2-shell.login-page .app-container,
body.ui-v2-shell.login-page{margin-left:0;}

body.ui-v2-shell .page-header,
body.ui-v2-shell .table-toolbar,
body.ui-v2-shell .ticket-view-page > .page-header-ticket{
    border:1px solid var(--v2-line);
    background:linear-gradient(135deg, var(--v2-surface-strong), var(--v2-surface-soft));
    border-radius:24px;
    padding:14px 16px;
    box-shadow:var(--v2-card-shadow);
    backdrop-filter:blur(18px) saturate(135%);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
}
body.ui-v2-shell .card,
body.ui-v2-shell .form-card,
body.ui-v2-shell .modal-dialog,
body.ui-v2-shell .table-wrapper,
body.ui-v2-shell .settings-card,
body.ui-v2-shell .admin-card,
body.ui-v2-shell .queue-card,
body.ui-v2-shell .calendar-shell,
body.ui-v2-shell .auth-card,
body.ui-v2-shell .login-card{
    border:1px solid var(--v2-line);
    background:linear-gradient(145deg, var(--v2-surface-strong), var(--v2-surface-soft));
    border-radius:24px;
    box-shadow:var(--v2-card-shadow);
    backdrop-filter:blur(18px) saturate(135%);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
}
body.ui-v2-shell .btn,
body.ui-v2-shell button,
body.ui-v2-shell .form-input,
body.ui-v2-shell .form-select,
body.ui-v2-shell select,
body.ui-v2-shell textarea,
body.ui-v2-shell input[type="text"],
body.ui-v2-shell input[type="email"],
body.ui-v2-shell input[type="password"],
body.ui-v2-shell input[type="search"],
body.ui-v2-shell input[type="number"],
body.ui-v2-shell input[type="date"],
body.ui-v2-shell input[type="datetime-local"]{
    border-radius:14px;
}
body.ui-v2-shell .btn,
body.ui-v2-shell .topbar-pill,
body.ui-v2-shell .topbar-icon,
body.ui-v2-shell .card,
body.ui-v2-shell .form-card,
body.ui-v2-shell .badge{
    will-change:auto;
}
body.ui-v2-shell .btn-primary{
    background:linear-gradient(135deg, var(--v2-primary), #2563eb);
    border-color:rgba(14,165,233,.45);
    box-shadow:0 12px 30px rgba(14,165,233,.20);
}
body.ui-v2-shell .badge{
    border-color:var(--v2-line);
    background:rgba(148,163,184,.10);
}
body.ui-v2-shell .ticket-table tbody tr,
body.ui-v2-shell .card,
body.ui-v2-shell .form-card{transition:background var(--v2-motion-fast) ease, transform var(--v2-motion-fast) ease, box-shadow var(--v2-motion-fast) ease;}
body.ui-v2-shell .ticket-table tbody tr:hover{background:rgba(14,165,233,.07);}
body.ui-v2-shell .card:hover,
body.ui-v2-shell .form-card:hover{box-shadow:0 22px 62px rgba(15,23,42,.11), inset 0 1px 0 rgba(255,255,255,.48);}

body.ui-v2-shell.v2-page-enter main.app-container{animation:v2PageIn var(--v2-motion-slow) cubic-bezier(.2,.8,.2,1) both;}
body.ui-v2-shell.v2-page-leave main.app-container{opacity:.74;transform:translateY(4px) scale(.997);transition:opacity var(--v2-motion-fast) ease, transform var(--v2-motion-fast) ease;}
@keyframes v2PageIn{from{opacity:0;transform:translateY(10px) scale(.992);filter:blur(4px);}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}}

body.ui-v2-shell .v2-route-progress{
    position:fixed;
    left:calc(var(--v2-sidebar-w) + var(--v2-shell-gap) * 2);
    right:20px;
    top:0;
    height:3px;
    z-index:120;
    pointer-events:none;
    opacity:0;
    transform:scaleX(.15);
    transform-origin:left center;
    background:linear-gradient(90deg,var(--v2-primary),var(--v2-primary-2));
    box-shadow:0 0 24px rgba(14,165,233,.44);
    transition:opacity var(--v2-motion-fast) ease, transform 850ms cubic-bezier(.2,.8,.2,1);
}
body.ui-v2-shell.v2-navigating .v2-route-progress{opacity:1;transform:scaleX(.82);}

@media (max-width:1100px){
    body.ui-v2-shell{padding-top:var(--topbar-offset, 84px) !important;}
    html.ui-v2-shell{--topbar-offset:84px !important;}
    body.ui-v2-shell .topbar{
        top:0;left:0;right:0;bottom:auto;width:auto;border-radius:0;border-left:0;border-right:0;border-top:0;
        max-height:calc(100vh - 12px);
    }
    body.ui-v2-shell .topbar-inner{
        min-height:74px;height:auto;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;overflow:visible;
    }
    body.ui-v2-shell .brand{grid-column:2;flex-direction:row;justify-content:center;padding:8px 10px;background:transparent;border:0;box-shadow:none;}
    body.ui-v2-shell .brand-logo{height:42px;max-width:170px;}
    body.ui-v2-shell .v2-mobile-toggle{
        display:inline-flex;grid-column:1;grid-row:1;width:42px;height:42px;align-items:center;justify-content:center;border-radius:14px;border:1px solid var(--v2-line);background:rgba(148,163,184,.12);color:var(--v2-text);font-size:20px;cursor:pointer;
    }
    body.ui-v2-shell .topbar-center{
        position:absolute;left:12px;right:12px;top:72px;max-height:calc(100vh - 92px);overflow:auto;padding:10px;border:1px solid var(--v2-line);border-radius:22px;background:var(--v2-surface-strong);box-shadow:var(--v2-glow);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity var(--v2-motion-fast) ease, transform var(--v2-motion-fast) ease;
    }
    body.ui-v2-shell.v2-sidebar-open .topbar-center{opacity:1;transform:translateY(0);pointer-events:auto;}
    body.ui-v2-shell .topbar-right{grid-column:3;grid-row:1;width:auto;display:flex;align-items:center;justify-content:flex-end;border:0;padding:0;gap:6px;}
    body.ui-v2-shell .topbar-right .topbar-icon, body.ui-v2-shell .topbar-icon{width:38px;height:38px;}
    body.ui-v2-shell .notification-bell-wrap{display:block;position:relative;min-width:0;}
    body.ui-v2-shell .notification-dropdown{left:auto;right:0;top:calc(100% + 10px);bottom:auto;width:min(390px,calc(100vw - 24px));}
    body.ui-v2-shell .env-banner{grid-column:1 / -1;order:initial;margin:0 -2px -2px;border-radius:14px;}
    body.ui-v2-shell main.app-container, body.ui-v2-shell .app-container{margin-left:auto;margin-right:auto;max-width:1200px;padding:18px 16px 36px;}
    body.ui-v2-shell .v2-route-progress{left:0;right:0;}
}

@media (max-width:720px){
    html.ui-v2-shell{--topbar-offset:104px !important;}
    body.ui-v2-shell{padding-top:var(--topbar-offset,104px) !important;}
    body.ui-v2-shell .topbar-inner{grid-template-columns:auto 1fr;}
    body.ui-v2-shell .topbar-right{grid-column:1 / -1;justify-content:center;flex-wrap:wrap;}
    body.ui-v2-shell .brand{grid-column:2;}
    body.ui-v2-shell .version-badge{display:none;}
    body.ui-v2-shell .topbar-center{top:112px;}
    body.ui-v2-shell .page-header, body.ui-v2-shell .table-toolbar{border-radius:18px;}
}

@media (prefers-reduced-motion: reduce){
    body.ui-v2-shell *, body.ui-v2-shell *::before, body.ui-v2-shell *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}

/* HVSZ_V2_VISUAL_REFINEMENT_H22_BEGIN */
/* H22 - v2 visual refinement: cleaner background, compact sidebar, integrated staging badge. */
:root{
    --v2-sidebar-w: 198px;
    --v2-shell-gap: 16px;
    --v2-shell-radius: 22px;
    --v2-content-radius: 22px;
    --v2-focus-ring: 0 0 0 3px rgba(56,189,248,.22);
    --v2-bg-clean: #f3f6fb;
    --v2-bg-clean-2: #e8eef7;
    --v2-surface: rgba(255,255,255,.78);
    --v2-surface-strong: rgba(255,255,255,.92);
    --v2-surface-soft: rgba(248,250,252,.78);
    --v2-line: rgba(15,23,42,.10);
    --v2-line-strong: rgba(15,23,42,.16);
    --v2-muted: #64748b;
    --v2-card-shadow: 0 12px 34px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.58);
    --v2-glow: 0 20px 64px rgba(15,23,42,.10);
}
html[data-theme="dark"]{
    --v2-bg-clean: #07111e;
    --v2-bg-clean-2: #0b1728;
    --v2-surface: rgba(15,23,42,.70);
    --v2-surface-strong: rgba(13,24,41,.92);
    --v2-surface-soft: rgba(15,23,42,.58);
    --v2-line: rgba(226,232,240,.09);
    --v2-line-strong: rgba(226,232,240,.15);
    --v2-muted: #94a3b8;
    --v2-card-shadow: 0 16px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
    --v2-glow: 0 22px 70px rgba(0,0,0,.30);
}

html.ui-v2-shell,
body.ui-v2-shell{
    background:var(--v2-bg-clean) !important;
}
body.ui-v2-shell{
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 34%),
        linear-gradient(135deg, var(--v2-bg-clean), var(--v2-bg-clean-2)) !important;
    background-attachment:fixed !important;
}
html[data-theme="dark"] body.ui-v2-shell{
    background-image:
        linear-gradient(180deg, rgba(148,163,184,.045), rgba(15,23,42,0) 34%),
        linear-gradient(135deg, #07111e 0%, #0b1728 56%, #07111e 100%) !important;
}
body.ui-v2-shell::before,
body.ui-v2-shell::after{
    display:none !important;
    content:none !important;
}

body.ui-v2-shell .topbar{
    width:var(--v2-sidebar-w) !important;
    top:var(--v2-shell-gap) !important;
    left:var(--v2-shell-gap) !important;
    bottom:var(--v2-shell-gap) !important;
    border-radius:var(--v2-shell-radius) !important;
    background:linear-gradient(180deg, var(--v2-surface-strong), rgba(255,255,255,.62)) !important;
    border-color:var(--v2-line-strong) !important;
    box-shadow:var(--v2-glow) !important;
}
html[data-theme="dark"] body.ui-v2-shell .topbar{
    background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(8,18,32,.86)) !important;
}
body.ui-v2-shell .topbar::before{
    inset:0 auto 0 0 !important;
    width:3px !important;
    background:linear-gradient(180deg, var(--v2-primary), var(--v2-primary-2)) !important;
    opacity:.80 !important;
}
body.ui-v2-shell .topbar-inner{
    padding:14px 12px !important;
    gap:10px !important;
    overflow-x:hidden !important;
}
body.ui-v2-shell .brand{
    min-height:auto !important;
    padding:12px 10px !important;
    border-radius:18px !important;
    overflow:hidden !important;
    background:rgba(148,163,184,.08) !important;
    border-color:var(--v2-line) !important;
}
body.ui-v2-shell .brand-logo{
    width:auto !important;
    max-width:142px !important;
    height:auto !important;
    max-height:46px !important;
    object-fit:contain !important;
}
body.ui-v2-shell .version-badge{
    padding:3px 9px !important;
    font-size:11px !important;
    line-height:1.1 !important;
}
body.ui-v2-shell .topbar-center{
    gap:7px !important;
    margin:2px 0 auto !important;
}
body.ui-v2-shell .topbar-pill,
body.ui-v2-shell button.topbar-pill{
    min-height:38px !important;
    padding:8px 10px !important;
    border-radius:14px !important;
    font-size:12.5px !important;
    box-shadow:none !important;
    background:rgba(148,163,184,.10) !important;
}
body.ui-v2-shell .topbar-pill:hover,
body.ui-v2-shell button.topbar-pill:hover{
    transform:translateX(2px) !important;
    background:rgba(56,189,248,.12) !important;
    box-shadow:0 8px 22px rgba(14,165,233,.10) !important;
}
body.ui-v2-shell .topbar-pill.active{
    background:linear-gradient(90deg, rgba(34,197,94,.18), rgba(56,189,248,.10)) !important;
    border-color:rgba(56,189,248,.24) !important;
    box-shadow:inset 3px 0 0 var(--v2-primary-2) !important;
}
body.ui-v2-shell .topbar-icon-wrap{width:22px !important;min-width:22px !important;}
body.ui-v2-shell .topbar-img{width:18px !important;height:18px !important;}
body.ui-v2-shell .topbar-right{
    order:90 !important;
    grid-template-columns:repeat(3, minmax(34px, 1fr)) !important;
    gap:7px !important;
    padding-top:8px !important;
    margin-top:0 !important;
}
body.ui-v2-shell .topbar-icon,
body.ui-v2-shell .topbar-right .topbar-icon{
    height:36px !important;
    border-radius:13px !important;
    background:rgba(148,163,184,.10) !important;
}

body.ui-v2-shell .env-banner{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    z-index:auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    transform:none !important;
    writing-mode:horizontal-tb !important;
    order:84 !important;
    display:block !important;
    flex:0 0 auto !important;
    margin:8px 0 0 !important;
    padding:9px 10px !important;
    border-radius:15px !important;
    color:#fff !important;
    text-align:left !important;
    font-size:10.5px !important;
    line-height:1.22 !important;
    letter-spacing:0 !important;
    background:linear-gradient(135deg, rgba(127,29,29,.86), rgba(154,52,18,.78)) !important;
    border:1px solid rgba(252,165,165,.20) !important;
    box-shadow:0 10px 28px rgba(127,29,29,.18), inset 0 1px 0 rgba(255,255,255,.16) !important;
    white-space:normal !important;
}
body.ui-v2-shell .env-banner strong,
body.ui-v2-shell .env-banner b{
    display:block !important;
    margin-bottom:3px !important;
    font-size:11px !important;
    letter-spacing:.02em !important;
    text-transform:uppercase !important;
}

body.ui-v2-shell main.app-container,
body.ui-v2-shell .app-container{
    margin-left:calc(var(--v2-sidebar-w) + var(--v2-shell-gap) * 2) !important;
    padding:20px 24px 42px 0 !important;
}
body.ui-v2-shell .page-header,
body.ui-v2-shell .table-toolbar,
body.ui-v2-shell .ticket-view-page > .page-header-ticket{
    border-radius:var(--v2-content-radius) !important;
    background:linear-gradient(180deg, var(--v2-surface-strong), var(--v2-surface-soft)) !important;
    border-color:var(--v2-line) !important;
    box-shadow:var(--v2-card-shadow) !important;
}
body.ui-v2-shell .card,
body.ui-v2-shell .form-card,
body.ui-v2-shell .modal-dialog,
body.ui-v2-shell .table-wrapper,
body.ui-v2-shell .settings-card,
body.ui-v2-shell .admin-card,
body.ui-v2-shell .queue-card,
body.ui-v2-shell .calendar-shell,
body.ui-v2-shell .auth-card,
body.ui-v2-shell .login-card{
    border-radius:var(--v2-content-radius) !important;
    background:linear-gradient(180deg, var(--v2-surface-strong), var(--v2-surface-soft)) !important;
    border-color:var(--v2-line) !important;
    box-shadow:var(--v2-card-shadow) !important;
}
body.ui-v2-shell .table-wrapper{overflow:hidden !important;}
body.ui-v2-shell .ticket-table tbody tr{
    transition:background 140ms ease, transform 140ms ease, box-shadow 140ms ease !important;
}
body.ui-v2-shell .ticket-table tbody tr:hover{
    transform:translateY(-1px) !important;
    background:rgba(56,189,248,.075) !important;
}
body.ui-v2-shell .card:hover,
body.ui-v2-shell .form-card:hover{
    transform:none !important;
    box-shadow:var(--v2-card-shadow) !important;
}
body.ui-v2-shell .btn:focus-visible,
body.ui-v2-shell button:focus-visible,
body.ui-v2-shell a:focus-visible,
body.ui-v2-shell input:focus-visible,
body.ui-v2-shell select:focus-visible,
body.ui-v2-shell textarea:focus-visible{
    outline:none !important;
    box-shadow:var(--v2-focus-ring) !important;
}

body.ui-v2-shell .ticket-view-page{
    --ticket-view-main-width: 980px;
    --ticket-view-log-width: 330px;
    padding-left:0 !important;
    padding-right:24px !important;
}
body.ui-v2-shell .ticket-view-page > .page-header-ticket,
body.ui-v2-shell .ticket-view-page > .alert{
    width:100% !important;
    max-width:1320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
body.ui-v2-shell .ticket-view-page > .ticket-view-layout{
    width:100% !important;
    max-width:1320px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(292px, var(--ticket-view-log-width)) !important;
    gap:18px !important;
    align-items:start !important;
}
body.ui-v2-shell .ticket-view-page > .ticket-view-layout > :first-child{
    grid-column:1 !important;
    min-width:0 !important;
}
body.ui-v2-shell .ticket-view-page > .ticket-view-layout > .ticket-log-panel{
    grid-column:2 !important;
    width:auto !important;
    max-width:none !important;
    margin-left:0 !important;
    align-self:start !important;
    position:sticky !important;
    top:18px !important;
}
body.ui-v2-shell .ticket-view-page .ticket-main-details-card,
body.ui-v2-shell .ticket-view-page .ticket-log-panel{
    background:linear-gradient(180deg, var(--v2-surface-strong), rgba(15,23,42,.035)) !important;
}
html[data-theme="dark"] body.ui-v2-shell .ticket-view-page .ticket-main-details-card,
html[data-theme="dark"] body.ui-v2-shell .ticket-view-page .ticket-log-panel{
    background:linear-gradient(180deg, rgba(15,23,42,.82), rgba(15,23,42,.56)) !important;
}

@media (max-width:1280px){
    :root{--v2-sidebar-w:184px;--v2-shell-gap:12px;}
    body.ui-v2-shell .ticket-view-page > .ticket-view-layout{
        grid-template-columns:minmax(0,1fr) !important;
        max-width:980px !important;
    }
    body.ui-v2-shell .ticket-view-page > .ticket-view-layout > .ticket-log-panel{
        grid-column:1 !important;
        position:static !important;
    }
    body.ui-v2-shell .ticket-view-page > .page-header-ticket,
    body.ui-v2-shell .ticket-view-page > .alert{max-width:980px !important;}
}
@media (max-width:1100px){
    body.ui-v2-shell .topbar{width:auto !important;}
    body.ui-v2-shell .topbar-inner{padding:10px 12px !important;}
    body.ui-v2-shell .brand{padding:6px 8px !important;}
    body.ui-v2-shell .brand-logo{max-height:38px !important;max-width:160px !important;}
    body.ui-v2-shell .env-banner{
        grid-column:1 / -1 !important;
        order:initial !important;
        margin:0 !important;
        padding:7px 10px !important;
        text-align:center !important;
    }
    body.ui-v2-shell .env-banner strong{display:inline !important;margin:0 6px 0 0 !important;}
    body.ui-v2-shell main.app-container,
    body.ui-v2-shell .app-container{margin-left:auto !important;padding:18px 16px 36px !important;}
}
@media (max-width:720px){
    body.ui-v2-shell .page-header,
    body.ui-v2-shell .table-toolbar,
    body.ui-v2-shell .card,
    body.ui-v2-shell .form-card,
    body.ui-v2-shell .table-wrapper{border-radius:18px !important;}
    body.ui-v2-shell .topbar-pill:hover,
    body.ui-v2-shell button.topbar-pill:hover,
    body.ui-v2-shell .ticket-table tbody tr:hover{transform:none !important;}
}
/* HVSZ_V2_VISUAL_REFINEMENT_H22_END */

/* HVSZ_V2_RADICAL_VISUAL_H23_BEGIN */
/* H23 - v2 radical visual pass: neutral graphite/stone palette, non-intrusive staging badge, readable light mode. */
:root{
    --v2-sidebar-w: 224px;
    --v2-shell-gap: 16px;
    --v2-shell-radius: 20px;
    --v2-content-radius: 18px;
    --v2-text: #121821;
    --v2-muted: #64707f;
    --v2-bg-clean: #f5f3ee;
    --v2-bg-clean-2: #e8e3d8;
    --v2-surface: rgba(255,255,255,.80);
    --v2-surface-strong: rgba(255,255,255,.95);
    --v2-surface-soft: rgba(248,247,243,.86);
    --v2-line: rgba(21,28,37,.10);
    --v2-line-strong: rgba(21,28,37,.17);
    --v2-primary: #0f766e;
    --v2-primary-2: #22c55e;
    --v2-danger: #dc2626;
    --v2-warning: #d97706;
    --v2-card-shadow: 0 10px 28px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.72);
    --v2-glow: 0 18px 48px rgba(16,24,40,.10);
    --v2-focus-ring: 0 0 0 3px rgba(15,118,110,.22);
}
html[data-theme="dark"]{
    --v2-text: #f0efea;
    --v2-muted: #a8adb6;
    --v2-bg-clean: #0f1012;
    --v2-bg-clean-2: #181a1f;
    --v2-surface: rgba(25,27,32,.80);
    --v2-surface-strong: rgba(27,29,35,.96);
    --v2-surface-soft: rgba(18,20,24,.90);
    --v2-line: rgba(255,255,255,.075);
    --v2-line-strong: rgba(255,255,255,.13);
    --v2-primary: #7dd3fc;
    --v2-primary-2: #a3e635;
    --v2-card-shadow: 0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
    --v2-glow: 0 20px 60px rgba(0,0,0,.34);
    --v2-focus-ring: 0 0 0 3px rgba(125,211,252,.24);
}

html.ui-v2-shell,
body.ui-v2-shell{
    background:var(--v2-bg-clean) !important;
    color:var(--v2-text) !important;
}
body.ui-v2-shell{
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 240px),
        repeating-linear-gradient(0deg, rgba(17,24,39,.022) 0, rgba(17,24,39,.022) 1px, transparent 1px, transparent 44px),
        repeating-linear-gradient(90deg, rgba(17,24,39,.018) 0, rgba(17,24,39,.018) 1px, transparent 1px, transparent 44px),
        linear-gradient(135deg, var(--v2-bg-clean), var(--v2-bg-clean-2)) !important;
    background-attachment:fixed !important;
}
html[data-theme="dark"] body.ui-v2-shell{
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 260px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0, rgba(255,255,255,.026) 1px, transparent 1px, transparent 46px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.020) 0, rgba(255,255,255,.020) 1px, transparent 1px, transparent 46px),
        linear-gradient(135deg, #0f1012 0%, #181a1f 55%, #101113 100%) !important;
}
body.ui-v2-shell::before,
body.ui-v2-shell::after{display:none !important;content:none !important;}

body.ui-v2-shell .topbar{
    width:var(--v2-sidebar-w) !important;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,242,236,.84)) !important;
    border:1px solid var(--v2-line-strong) !important;
    border-radius:var(--v2-shell-radius) !important;
    box-shadow:var(--v2-glow) !important;
}
html[data-theme="dark"] body.ui-v2-shell .topbar{
    background:linear-gradient(180deg, rgba(24,26,31,.98), rgba(16,17,20,.92)) !important;
}
body.ui-v2-shell .topbar::before{
    width:4px !important;
    background:linear-gradient(180deg, var(--v2-primary), var(--v2-primary-2)) !important;
    opacity:.9 !important;
}
body.ui-v2-shell .topbar-inner{
    padding:13px 12px !important;
    gap:9px !important;
    overflow-x:hidden !important;
}
body.ui-v2-shell .brand{
    border-radius:16px !important;
    padding:11px 9px !important;
    background:rgba(148,163,184,.08) !important;
    border-color:var(--v2-line) !important;
}
body.ui-v2-shell .brand-logo{max-width:154px !important;max-height:44px !important;}
body.ui-v2-shell .version-badge{font-size:10.5px !important;padding:3px 8px !important;color:var(--v2-text) !important;}
body.ui-v2-shell .topbar-pill,
body.ui-v2-shell button.topbar-pill{
    min-height:38px !important;
    padding:8px 10px !important;
    border-radius:13px !important;
    font-size:12.5px !important;
    color:var(--v2-text) !important;
    background:rgba(148,163,184,.10) !important;
    border-color:transparent !important;
}
body.ui-v2-shell .topbar-pill:hover,
body.ui-v2-shell button.topbar-pill:hover{
    transform:translateX(2px) !important;
    background:rgba(15,118,110,.12) !important;
    border-color:rgba(15,118,110,.18) !important;
}
html[data-theme="dark"] body.ui-v2-shell .topbar-pill:hover,
html[data-theme="dark"] body.ui-v2-shell button.topbar-pill:hover{
    background:rgba(125,211,252,.10) !important;
    border-color:rgba(125,211,252,.18) !important;
}
body.ui-v2-shell .topbar-pill.active{
    color:var(--v2-text) !important;
    background:linear-gradient(90deg, rgba(15,118,110,.18), rgba(34,197,94,.08)) !important;
    border-color:rgba(15,118,110,.24) !important;
    box-shadow:inset 4px 0 0 var(--v2-primary) !important;
}
html[data-theme="dark"] body.ui-v2-shell .topbar-pill.active{
    background:linear-gradient(90deg, rgba(125,211,252,.16), rgba(163,230,53,.07)) !important;
    border-color:rgba(125,211,252,.22) !important;
}
body.ui-v2-shell .topbar-right{
    order:95 !important;
    display:grid !important;
    grid-template-columns:repeat(5, minmax(30px, 1fr)) !important;
    gap:6px !important;
    padding-top:8px !important;
    margin-top:8px !important;
    border-top:1px solid var(--v2-line) !important;
    position:sticky !important;
    bottom:0 !important;
    z-index:2 !important;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.82) 28%) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
}
html[data-theme="dark"] body.ui-v2-shell .topbar-right{
    background:linear-gradient(180deg, transparent, rgba(18,20,24,.90) 28%) !important;
}
body.ui-v2-shell .topbar-icon,
body.ui-v2-shell .topbar-right .topbar-icon{
    height:34px !important;
    border-radius:12px !important;
    color:var(--v2-text) !important;
    border-color:var(--v2-line) !important;
    background:rgba(148,163,184,.10) !important;
}
body.ui-v2-shell .topbar-icon:hover{transform:translateY(-1px) !important;background:rgba(15,118,110,.12) !important;}

/* The staging marker must not change the real layout. It becomes a tiny hoverable badge. */
body.ui-v2-shell .env-banner{
    position:fixed !important;
    right:16px !important;
    bottom:14px !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    max-width:210px !important;
    min-width:0 !important;
    z-index:160 !important;
    order:initial !important;
    margin:0 !important;
    padding:7px 10px !important;
    display:block !important;
    border-radius:999px !important;
    font-size:10.5px !important;
    line-height:1.1 !important;
    color:#fff !important;
    text-align:center !important;
    background:rgba(153,27,27,.82) !important;
    border:1px solid rgba(254,202,202,.28) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
    opacity:.74 !important;
    pointer-events:auto !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
}
body.ui-v2-shell .env-banner:hover{opacity:1 !important;max-width:340px !important;border-radius:14px !important;}
body.ui-v2-shell .env-banner strong{display:inline !important;margin:0 !important;font-size:10.5px !important;letter-spacing:.03em !important;text-transform:uppercase !important;}
body.ui-v2-shell .env-banner span{display:none !important;margin-left:6px !important;}
body.ui-v2-shell .env-banner:hover span{display:inline !important;}

body.ui-v2-shell main.app-container,
body.ui-v2-shell .app-container{
    margin-left:calc(var(--v2-sidebar-w) + var(--v2-shell-gap) * 2) !important;
    padding:20px 24px 44px 0 !important;
}
body.ui-v2-shell .page-header,
body.ui-v2-shell .table-toolbar,
body.ui-v2-shell .ticket-view-page > .page-header-ticket,
body.ui-v2-shell .card,
body.ui-v2-shell .form-card,
body.ui-v2-shell .modal-dialog,
body.ui-v2-shell .table-wrapper,
body.ui-v2-shell .settings-card,
body.ui-v2-shell .admin-card,
body.ui-v2-shell .queue-card,
body.ui-v2-shell .calendar-shell,
body.ui-v2-shell .auth-card,
body.ui-v2-shell .login-card{
    color:var(--v2-text) !important;
    background:linear-gradient(180deg, var(--v2-surface-strong), var(--v2-surface-soft)) !important;
    border:1px solid var(--v2-line) !important;
    border-radius:var(--v2-content-radius) !important;
    box-shadow:var(--v2-card-shadow) !important;
}
body.ui-v2-shell .ticket-table,
body.ui-v2-shell .ticket-table th,
body.ui-v2-shell .ticket-table td,
body.ui-v2-shell .table-wrapper,
body.ui-v2-shell .page-header,
body.ui-v2-shell .table-toolbar,
body.ui-v2-shell .ticket-view-page{
    color:var(--v2-text) !important;
}
body.ui-v2-shell .ticket-table thead th{
    color:var(--v2-text) !important;
    background:rgba(148,163,184,.10) !important;
    border-bottom:1px solid var(--v2-line) !important;
}
body.ui-v2-shell .ticket-table tbody tr{
    background:rgba(255,255,255,.30) !important;
}
html[data-theme="dark"] body.ui-v2-shell .ticket-table tbody tr{
    background:rgba(255,255,255,.035) !important;
}
body.ui-v2-shell .ticket-table tbody tr:hover{
    background:rgba(15,118,110,.07) !important;
    transform:translateY(-1px) !important;
}
html[data-theme="dark"] body.ui-v2-shell .ticket-table tbody tr:hover{
    background:rgba(125,211,252,.07) !important;
}
body.ui-v2-shell .muted,
body.ui-v2-shell .form-hint,
body.ui-v2-shell .small,
body.ui-v2-shell .field-label,
body.ui-v2-shell .ticket-meta,
body.ui-v2-shell .ticket-log-panel small{color:var(--v2-muted) !important;}
body.ui-v2-shell input,
body.ui-v2-shell select,
body.ui-v2-shell textarea,
body.ui-v2-shell .form-input,
body.ui-v2-shell .form-select{
    color:var(--v2-text) !important;
    background:rgba(255,255,255,.60) !important;
    border-color:var(--v2-line-strong) !important;
}
html[data-theme="dark"] body.ui-v2-shell input,
html[data-theme="dark"] body.ui-v2-shell select,
html[data-theme="dark"] body.ui-v2-shell textarea,
html[data-theme="dark"] body.ui-v2-shell .form-input,
html[data-theme="dark"] body.ui-v2-shell .form-select{
    background:rgba(0,0,0,.18) !important;
}
body.ui-v2-shell a{color:inherit;}
body.ui-v2-shell .btn-primary{background:linear-gradient(135deg, var(--v2-primary), #059669) !important;border-color:rgba(15,118,110,.28) !important;}
html[data-theme="dark"] body.ui-v2-shell .btn-primary{background:linear-gradient(135deg, #0ea5e9, #10b981) !important;}

/* Ticket view gets a cleaner product-dashboard balance without touching data logic. */
body.ui-v2-shell .ticket-view-page{padding-right:24px !important;}
body.ui-v2-shell .ticket-view-page > .page-header-ticket,
body.ui-v2-shell .ticket-view-page > .alert,
body.ui-v2-shell .ticket-view-page > .ticket-view-layout{
    max-width:1440px !important;
}
body.ui-v2-shell .ticket-view-page > .ticket-view-layout{
    grid-template-columns:minmax(0, 1fr) minmax(300px, 360px) !important;
    gap:20px !important;
}
body.ui-v2-shell .ticket-view-page > .ticket-view-layout > .ticket-log-panel{
    top:20px !important;
}

@media (max-width:1280px){
    :root{--v2-sidebar-w:204px;--v2-shell-gap:12px;}
    body.ui-v2-shell .topbar-right{grid-template-columns:repeat(5, minmax(28px, 1fr)) !important;}
}
@media (max-width:1100px){
    body.ui-v2-shell .topbar{width:auto !important;}
    body.ui-v2-shell main.app-container,
    body.ui-v2-shell .app-container{margin-left:auto !important;padding:18px 16px 36px !important;}
    body.ui-v2-shell .env-banner{right:12px !important;bottom:10px !important;}
}
@media (max-width:720px){
    body.ui-v2-shell .env-banner{font-size:10px !important;padding:6px 9px !important;}
    body.ui-v2-shell .env-banner:hover span{display:none !important;}
}
/* HVSZ_V2_RADICAL_VISUAL_H23_END */

/* HVSZ_V2_LAYOUT_ZINDEX_SCROLL_H24_BEGIN */
/* H24 - v2 layout stability pass: fixed stage background, sane stacking, dropdown overlays, non-sticky ticket title. */
html.ui-v2-shell{
    min-height:100% !important;
    background:var(--v2-bg-clean, #0f1012) !important;
    overflow-x:hidden !important;
}
body.ui-v2-shell{
    min-height:100vh !important;
    position:relative !important;
    isolation:isolate !important;
    overflow-x:hidden !important;
    background:var(--v2-bg-clean, #0f1012) !important;
    background-image:none !important;
    background-attachment:initial !important;
}
/* Fixed viewport background so the grid/texture does not visibly scroll away behind the app. */
body.ui-v2-shell::before{
    content:"" !important;
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 260px),
        repeating-linear-gradient(0deg, rgba(17,24,39,.025) 0, rgba(17,24,39,.025) 1px, transparent 1px, transparent 46px),
        repeating-linear-gradient(90deg, rgba(17,24,39,.020) 0, rgba(17,24,39,.020) 1px, transparent 1px, transparent 46px),
        linear-gradient(135deg, var(--v2-bg-clean, #f5f3ee), var(--v2-bg-clean-2, #e8e3d8)) !important;
    background-position:center top !important;
    background-size:auto !important;
    transform:translateZ(0) !important;
}
html[data-theme="dark"] body.ui-v2-shell::before{
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 260px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0, rgba(255,255,255,.026) 1px, transparent 1px, transparent 46px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.020) 0, rgba(255,255,255,.020) 1px, transparent 1px, transparent 46px),
        linear-gradient(135deg, #0f1012 0%, #181a1f 55%, #101113 100%) !important;
}
body.ui-v2-shell::after{
    content:"" !important;
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:
        radial-gradient(circle at 18% 10%, rgba(34,197,94,.055), transparent 30%),
        radial-gradient(circle at 86% 18%, rgba(14,165,233,.050), transparent 34%),
        linear-gradient(90deg, rgba(0,0,0,.035), transparent 18%, transparent 82%, rgba(0,0,0,.035)) !important;
    opacity:.9 !important;
}
html[data-theme="light"] body.ui-v2-shell::after,
body.theme-light.ui-v2-shell::after{
    background:
        radial-gradient(circle at 18% 10%, rgba(15,118,110,.055), transparent 30%),
        radial-gradient(circle at 86% 18%, rgba(14,165,233,.055), transparent 34%),
        linear-gradient(90deg, rgba(15,23,42,.035), transparent 18%, transparent 82%, rgba(15,23,42,.030)) !important;
    opacity:.75 !important;
}
body.ui-v2-shell .topbar{
    z-index:3000 !important;
}
body.ui-v2-shell main.app-container,
body.ui-v2-shell .app-container{
    position:relative !important;
    z-index:10 !important;
}
body.ui-v2-shell .env-banner{
    z-index:8500 !important;
}
/* Drop-downs and floating controls must always render over ticket tables/cards. */
body.ui-v2-shell .page-header,
body.ui-v2-shell .table-toolbar{
    position:relative !important;
    overflow:visible !important;
    z-index:2200 !important;
}
body.ui-v2-shell .table-toolbar:has(.queue-department-filter.is-open),
body.ui-v2-shell .page-header:has(.queue-department-filter.is-open){
    z-index:7600 !important;
}
body.ui-v2-shell .table-toolbar-right,
body.ui-v2-shell .queue-toolbar,
body.ui-v2-shell .filter-toolbar{
    position:relative !important;
    overflow:visible !important;
    z-index:7600 !important;
}
body.ui-v2-shell .queue-department-filter,
body.ui-v2-shell .queue-department-filter.is-open{
    position:relative !important;
    z-index:7800 !important;
}
body.ui-v2-shell .queue-department-filter-panel{
    z-index:7900 !important;
    background:rgba(245,243,238,.98) !important;
    color:var(--v2-text, #121821) !important;
    border-color:var(--v2-line-strong, rgba(21,28,37,.17)) !important;
    box-shadow:0 24px 64px rgba(0,0,0,.24) !important;
}
html[data-theme="dark"] body.ui-v2-shell .queue-department-filter-panel{
    background:rgba(28,29,34,.985) !important;
    box-shadow:0 28px 70px rgba(0,0,0,.56) !important;
}
body.ui-v2-shell .table-wrapper,
body.ui-v2-shell .queue-card,
body.ui-v2-shell .ticket-table{
    position:relative !important;
    z-index:10 !important;
}
/* Original ticket_view sticky title was useful in the old layout, but in v2 it overlaps content while scrolling. */
body.ui-v2-shell .ticket-view-page > .page-header-ticket{
    position:relative !important;
    top:auto !important;
    z-index:1200 !important;
    margin-top:0 !important;
    transform:none !important;
}
body.ui-v2-shell .ticket-view-page > .page-header-ticket::before{
    display:none !important;
    content:none !important;
}
body.ui-v2-shell .ticket-view-page > .ticket-view-layout{
    position:relative !important;
    z-index:20 !important;
}
body.ui-v2-shell .ticket-view-page > .ticket-view-layout > .ticket-log-panel{
    z-index:900 !important;
}
/* Keep modal layers above the new fixed background and all app chrome. */
body.ui-v2-shell .modal-backdrop,
body.ui-v2-shell .modal-overlay{
    z-index:9000 !important;
}
body.ui-v2-shell .modal,
body.ui-v2-shell .modal-dialog,
body.ui-v2-shell [role="dialog"]{
    z-index:9100 !important;
}
/* Small refinement: bottom icon row must remain clickable above the background but below dialogs. */
body.ui-v2-shell .topbar-right{
    z-index:3200 !important;
}
@media (max-width:1100px){
    body.ui-v2-shell .topbar{z-index:8200 !important;}
    body.ui-v2-shell .topbar.is-open{z-index:8300 !important;}
}
/* HVSZ_V2_LAYOUT_ZINDEX_SCROLL_H24_END */

/* HVSZ_V2_CLEANUP_LIGHTMODE_PORTAL_H25_BEGIN */
/* H25 - v2 cleanup: neutral leftovers, stronger light mode, customer portal separation, sane topic/fallback visuals. */
:root{
    --v2-radius-xl: 22px;
    --v2-radius-lg: 16px;
    --v2-radius-md: 12px;
}
html:not([data-theme="dark"]){
    --v2-bg-clean:#ebe7dc;
    --v2-bg-clean-2:#dcd8cc;
    --v2-text:#15191f;
    --v2-muted:#5c6470;
    --v2-surface:#f8f6f0;
    --v2-surface-strong:#ffffff;
    --v2-surface-soft:#f2f0ea;
    --v2-panel:#fbfaf6;
    --v2-panel-2:#f2f0ea;
    --v2-panel-muted:#ece9df;
    --v2-line:rgba(21,25,31,.13);
    --v2-line-strong:rgba(21,25,31,.22);
    --v2-primary:#008f7a;
    --v2-primary-2:#15b8a6;
    --v2-card-shadow:0 18px 42px rgba(28,25,23,.10), inset 0 1px 0 rgba(255,255,255,.74);
    --v2-glow:0 20px 62px rgba(28,25,23,.12);
}
html[data-theme="dark"]{
    --v2-bg-clean:#111214;
    --v2-bg-clean-2:#181a1e;
    --v2-text:#f2f4f7;
    --v2-muted:#a8b0bd;
    --v2-surface:#1a1c20;
    --v2-surface-strong:#202328;
    --v2-surface-soft:#181a1e;
    --v2-panel:#1b1d21;
    --v2-panel-2:#24262b;
    --v2-panel-muted:#16181c;
    --v2-line:rgba(255,255,255,.10);
    --v2-line-strong:rgba(255,255,255,.17);
    --v2-primary:#24d3b5;
    --v2-primary-2:#a3e635;
}

html.ui-v2-shell,
body.ui-v2-shell{
    color:var(--v2-text) !important;
    background-color:var(--v2-bg-clean) !important;
}
body.ui-v2-shell{
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(135deg, var(--v2-bg-clean), var(--v2-bg-clean-2)) !important;
    background-size:64px 64px,64px 64px,auto !important;
    background-position:0 0,0 0,0 0 !important;
}
html:not([data-theme="dark"]) body.ui-v2-shell{
    background-image:
        linear-gradient(rgba(21,25,31,.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,25,31,.038) 1px, transparent 1px),
        radial-gradient(circle at 88% 7%, rgba(0,143,122,.09), transparent 30%),
        linear-gradient(135deg, var(--v2-bg-clean), var(--v2-bg-clean-2)) !important;
}
body.ui-v2-shell,
body.ui-v2-shell p,
body.ui-v2-shell td,
body.ui-v2-shell th,
body.ui-v2-shell label,
body.ui-v2-shell .detail-value,
body.ui-v2-shell .thread-message-body{
    color:var(--v2-text) !important;
}
body.ui-v2-shell .muted,
body.ui-v2-shell .detail-label,
body.ui-v2-shell .ticket-log-date,
body.ui-v2-shell small{
    color:var(--v2-muted) !important;
    opacity:1 !important;
}

/* Reset the remaining legacy blue panels into the current v2 material system. */
body.ui-v2-shell .page-header,
body.ui-v2-shell .table-toolbar,
body.ui-v2-shell .table-wrapper,
body.ui-v2-shell .card,
body.ui-v2-shell .form-card,
body.ui-v2-shell .settings-card,
body.ui-v2-shell .admin-card,
body.ui-v2-shell .queue-card,
body.ui-v2-shell .stats-chart-card,
body.ui-v2-shell .calendar-shell,
body.ui-v2-shell .ticket-main-details-card,
body.ui-v2-shell .ticket-log-panel,
body.ui-v2-shell #conversation,
body.ui-v2-shell .modal-dialog{
    background:linear-gradient(180deg, var(--v2-panel), var(--v2-panel-2)) !important;
    border-color:var(--v2-line) !important;
    color:var(--v2-text) !important;
    box-shadow:var(--v2-card-shadow) !important;
}
html[data-theme="dark"] body.ui-v2-shell .page-header,
html[data-theme="dark"] body.ui-v2-shell .table-toolbar,
html[data-theme="dark"] body.ui-v2-shell .table-wrapper,
html[data-theme="dark"] body.ui-v2-shell .card,
html[data-theme="dark"] body.ui-v2-shell .form-card,
html[data-theme="dark"] body.ui-v2-shell .settings-card,
html[data-theme="dark"] body.ui-v2-shell .admin-card,
html[data-theme="dark"] body.ui-v2-shell .queue-card,
html[data-theme="dark"] body.ui-v2-shell .stats-chart-card,
html[data-theme="dark"] body.ui-v2-shell .calendar-shell,
html[data-theme="dark"] body.ui-v2-shell .ticket-main-details-card,
html[data-theme="dark"] body.ui-v2-shell .ticket-log-panel,
html[data-theme="dark"] body.ui-v2-shell #conversation,
html[data-theme="dark"] body.ui-v2-shell .modal-dialog{
    background:linear-gradient(180deg, rgba(32,35,40,.96), rgba(24,26,30,.96)) !important;
}
body.ui-v2-shell .page-header-ticket,
body.ui-v2-shell .ticket-view-page > .page-header-ticket{
    background:linear-gradient(180deg, var(--v2-panel), var(--v2-panel-muted)) !important;
    position:relative !important;
}
body.ui-v2-shell .ticket-log-panel{
    background:linear-gradient(180deg, var(--v2-panel), var(--v2-panel-muted)) !important;
    border-radius:18px !important;
    padding:14px !important;
    max-height:calc(100vh - 52px) !important;
    overflow:auto !important;
}
body.ui-v2-shell .ticket-log-item{
    border-bottom:1px solid var(--v2-line) !important;
    padding:10px 0 !important;
}
body.ui-v2-shell .ticket-log-item:last-child{border-bottom:0 !important;}

/* Tables: readable light mode and a less blue dark mode. */
body.ui-v2-shell .ticket-table thead th,
body.ui-v2-shell table thead th{
    background:rgba(127,127,127,.08) !important;
    color:var(--v2-text) !important;
    border-bottom:1px solid var(--v2-line) !important;
}
body.ui-v2-shell .ticket-table tbody tr,
body.ui-v2-shell table tbody tr{
    background:rgba(255,255,255,.28) !important;
    border-bottom:1px solid var(--v2-line) !important;
}
html[data-theme="dark"] body.ui-v2-shell .ticket-table tbody tr,
html[data-theme="dark"] body.ui-v2-shell table tbody tr{
    background:rgba(255,255,255,.055) !important;
}
html:not([data-theme="dark"]) body.ui-v2-shell .ticket-table tbody tr,
html:not([data-theme="dark"]) body.ui-v2-shell table tbody tr{
    background:rgba(255,255,255,.72) !important;
}
body.ui-v2-shell .ticket-table tbody tr:hover,
body.ui-v2-shell table tbody tr:hover{
    background:rgba(36,211,181,.12) !important;
}

/* Inputs and form controls: remove low-contrast washed-out light theme. */
body.ui-v2-shell input,
body.ui-v2-shell select,
body.ui-v2-shell textarea,
body.ui-v2-shell .form-input,
body.ui-v2-shell .form-select,
body.ui-v2-shell .form-textarea{
    color:var(--v2-text) !important;
    background:rgba(255,255,255,.58) !important;
    border-color:var(--v2-line-strong) !important;
    opacity:1 !important;
}
html[data-theme="dark"] body.ui-v2-shell input,
html[data-theme="dark"] body.ui-v2-shell select,
html[data-theme="dark"] body.ui-v2-shell textarea,
html[data-theme="dark"] body.ui-v2-shell .form-input,
html[data-theme="dark"] body.ui-v2-shell .form-select,
html[data-theme="dark"] body.ui-v2-shell .form-textarea{
    background:rgba(0,0,0,.16) !important;
}
html:not([data-theme="dark"]) body.ui-v2-shell input::placeholder,
html:not([data-theme="dark"]) body.ui-v2-shell textarea::placeholder{color:#8a93a0 !important;opacity:1 !important;}

/* Customer portal must not look like the agent console. */
body.ui-v2-shell.customer-v2-portal .brand::after{
    content:"ÜGYFÉLPORTÁL";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:6px;
    padding:4px 9px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    color:#063b36;
    background:linear-gradient(135deg, rgba(36,211,181,.96), rgba(163,230,53,.82));
    box-shadow:0 8px 22px rgba(36,211,181,.18);
}
body.ui-v2-shell.customer-v2-portal .topbar::before{
    background:linear-gradient(180deg, #24d3b5, #a3e635) !important;
}
body.ui-v2-shell.customer-v2-portal .topbar-pill.active{
    background:linear-gradient(90deg, rgba(36,211,181,.20), rgba(163,230,53,.10)) !important;
    border-color:rgba(36,211,181,.34) !important;
}
body.ui-v2-shell.customer-v2-portal .page-header h1::before{
    content:"Ügyfélportál";
    display:inline-flex;
    vertical-align:middle;
    margin-right:10px;
    padding:4px 8px;
    border-radius:999px;
    font-size:10px;
    line-height:1;
    letter-spacing:.08em;
    font-weight:900;
    color:#063b36;
    background:linear-gradient(135deg, rgba(36,211,181,.95), rgba(163,230,53,.82));
}

/* Remove topic/category double-appearance until department is chosen. */
body.ui-v2-shell #customer_category_fallback[style*="display:none"] + *,
body.ui-v2-shell select[name="topic_id"]:disabled{
    opacity:.72 !important;
}

/* Keep the staging pill small and useful, not layout-dominant. */
body.ui-v2-shell .env-banner{
    max-width:112px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    padding:8px 9px !important;
    border-radius:999px !important;
    text-align:center !important;
    font-size:10px !important;
    line-height:1 !important;
}
body.ui-v2-shell .env-banner span,
body.ui-v2-shell .env-banner small{display:none !important;}
body.ui-v2-shell .env-banner:hover{
    max-width:190px !important;
    white-space:normal !important;
    border-radius:14px !important;
    line-height:1.2 !important;
}
body.ui-v2-shell .env-banner:hover span,
body.ui-v2-shell .env-banner:hover small{display:block !important;}

/* Stronger layering for autocomplete and dropdown panels. */
body.ui-v2-shell .ac-box,
body.ui-v2-shell .dropdown-menu,
body.ui-v2-shell [data-queue-department-menu],
body.ui-v2-shell .queue-department-menu{
    z-index:9500 !important;
    background:var(--v2-panel) !important;
    border:1px solid var(--v2-line-strong) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.28) !important;
}

/* HVSZ_V2_CLEANUP_LIGHTMODE_PORTAL_H25_END */
/* HVSZ_V2_STABILIZATION_H26_BEGIN */
/* H26 - v2 stabilization: sticky ticket headers, clean form controls, modal/panel material reset, settings AJAX progress cleanup. */

/* Ticket headers: keep the title/status visible while scrolling, without old overlap. */
body.ui-v2-shell .ticket-view-page > .page-header-ticket,
body.ui-v2-shell .customer-ticket-view-page > .page-header-ticket{
    position:sticky !important;
    top:14px !important;
    z-index:6200 !important;
    margin-top:0 !important;
    margin-bottom:16px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,244,238,.86)) !important;
    border:1px solid var(--v2-line, rgba(15,23,42,.12)) !important;
    border-radius:20px !important;
    box-shadow:0 18px 45px rgba(28,25,23,.10), inset 0 1px 0 rgba(255,255,255,.80) !important;
    backdrop-filter:blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(130%) !important;
    overflow:visible !important;
}
html[data-theme="dark"] body.ui-v2-shell .ticket-view-page > .page-header-ticket,
html[data-theme="dark"] body.ui-v2-shell .customer-ticket-view-page > .page-header-ticket{
    background:linear-gradient(180deg, rgba(31,33,38,.94), rgba(22,24,28,.88)) !important;
    box-shadow:0 20px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.ui-v2-shell .ticket-view-page > .page-header-ticket::before,
body.ui-v2-shell .customer-ticket-view-page > .page-header-ticket::before{
    display:none !important;
    content:none !important;
}
body.ui-v2-shell .ticket-title,
body.ui-v2-shell .customer-ticket-title{
    color:var(--v2-text) !important;
}

/* Old blue leftovers in ticket detail cards/logs: force them to use the new v2 material. */
body.ui-v2-shell .ticket-main-details-card,
body.ui-v2-shell .ticket-meta-grid,
body.ui-v2-shell .ticket-meta-col,
body.ui-v2-shell .ticket-meta-grid .detail-row,
body.ui-v2-shell .detail-grid .detail-row,
body.ui-v2-shell .ticket-view-layout .detail-row,
body.ui-v2-shell .customer-ticket-view-page .detail-row{
    background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.38)) !important;
    border-color:var(--v2-line, rgba(15,23,42,.12)) !important;
    color:var(--v2-text) !important;
}
html[data-theme="dark"] body.ui-v2-shell .ticket-main-details-card,
html[data-theme="dark"] body.ui-v2-shell .ticket-meta-grid,
html[data-theme="dark"] body.ui-v2-shell .ticket-meta-col,
html[data-theme="dark"] body.ui-v2-shell .ticket-meta-grid .detail-row,
html[data-theme="dark"] body.ui-v2-shell .detail-grid .detail-row,
html[data-theme="dark"] body.ui-v2-shell .ticket-view-layout .detail-row,
html[data-theme="dark"] body.ui-v2-shell .customer-ticket-view-page .detail-row{
    background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028)) !important;
    border-color:rgba(255,255,255,.10) !important;
}
body.ui-v2-shell .ticket-view-page > .ticket-view-layout > .ticket-log-panel,
body.ui-v2-shell .ticket-log-panel,
body.ui-v2-shell .changes-panel,
body.ui-v2-shell .modifications-panel{
    background:linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.34)) !important;
    border:1px solid var(--v2-line, rgba(15,23,42,.12)) !important;
    color:var(--v2-text) !important;
    box-shadow:0 18px 44px rgba(28,25,23,.08), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
html[data-theme="dark"] body.ui-v2-shell .ticket-view-page > .ticket-view-layout > .ticket-log-panel,
html[data-theme="dark"] body.ui-v2-shell .ticket-log-panel,
html[data-theme="dark"] body.ui-v2-shell .changes-panel,
html[data-theme="dark"] body.ui-v2-shell .modifications-panel{
    background:linear-gradient(180deg, rgba(28,30,35,.92), rgba(20,22,26,.86)) !important;
    border-color:rgba(255,255,255,.10) !important;
    box-shadow:0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Modal material reset: remove leftover navy bodies but keep contrast. */
body.ui-v2-shell .modal-dialog,
body.ui-v2-shell .modal-content{
    background:linear-gradient(180deg, var(--v2-panel, #fbfaf6), var(--v2-panel-2, #f2f0ea)) !important;
    color:var(--v2-text) !important;
    border:1px solid var(--v2-line-strong, rgba(15,23,42,.18)) !important;
    box-shadow:0 30px 95px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.52) !important;
}
html[data-theme="dark"] body.ui-v2-shell .modal-dialog,
html[data-theme="dark"] body.ui-v2-shell .modal-content{
    background:linear-gradient(180deg, rgba(31,33,38,.98), rgba(20,22,26,.98)) !important;
    box-shadow:0 34px 110px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.ui-v2-shell .modal-header{
    background:linear-gradient(180deg, rgba(255,255,255,.36), rgba(127,127,127,.06)) !important;
    border-bottom:1px solid var(--v2-line, rgba(15,23,42,.12)) !important;
}
html[data-theme="dark"] body.ui-v2-shell .modal-header{
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)) !important;
}
body.ui-v2-shell .modal-body,
body.ui-v2-shell .modal-footer,
body.ui-v2-shell .modal-dialog form{
    background:transparent !important;
    color:var(--v2-text) !important;
}
body.ui-v2-shell .modal-close{color:var(--v2-text) !important; opacity:.88 !important;}

/* Form control sanity: do not style hidden checkbox/radio inputs as full white blocks. */
body.ui-v2-shell input[type="checkbox"],
body.ui-v2-shell input[type="radio"]{
    accent-color:var(--v2-primary, #24d3b5) !important;
    box-shadow:none !important;
}
body.ui-v2-shell .assignee-picker-chip input[type="checkbox"],
body.ui-v2-shell .segmented-option input[type="radio"],
body.ui-v2-shell .queue-department-filter-row input[type="radio"]{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    min-width:1px !important;
    min-height:1px !important;
    inset:auto !important;
    margin:0 !important;
    padding:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
    background:transparent !important;
}
body.ui-v2-shell .assignee-picker-chip{
    background:linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.22)) !important;
    border-color:var(--v2-line, rgba(15,23,42,.12)) !important;
}
html[data-theme="dark"] body.ui-v2-shell .assignee-picker-chip{
    background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026)) !important;
    border-color:rgba(255,255,255,.10) !important;
}
body.ui-v2-shell .assignee-picker-chip:has(input:checked){
    border-color:rgba(36,211,181,.50) !important;
    background:linear-gradient(180deg, rgba(36,211,181,.20), rgba(36,211,181,.08)) !important;
    box-shadow:0 14px 34px rgba(36,211,181,.12) !important;
}
body.ui-v2-shell .segmented-control{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    padding:5px !important;
    border-radius:16px !important;
    background:rgba(127,127,127,.08) !important;
    border:1px solid var(--v2-line, rgba(15,23,42,.12)) !important;
}
body.ui-v2-shell .segmented-option span{
    min-height:30px !important;
    padding:6px 11px !important;
    border-radius:12px !important;
    border:1px solid transparent !important;
    color:var(--v2-text) !important;
    background:transparent !important;
    font-weight:760 !important;
}
body.ui-v2-shell .segmented-option input:checked + span{
    border-color:rgba(36,211,181,.50) !important;
    background:linear-gradient(135deg, rgba(36,211,181,.22), rgba(14,165,233,.12)) !important;
    color:var(--v2-text) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(36,211,181,.10) !important;
}

/* Native select/readability. Browsers differ here, but this fixes the white-on-white cases where supported. */
body.ui-v2-shell select,
body.ui-v2-shell .form-select{
    color:var(--v2-text) !important;
    background-color:rgba(255,255,255,.58) !important;
}
html[data-theme="dark"] body.ui-v2-shell select,
html[data-theme="dark"] body.ui-v2-shell .form-select{
    background-color:#15171b !important;
    color:#f4f6f8 !important;
}
body.ui-v2-shell select option,
body.ui-v2-shell .form-select option{
    background:#fbfaf6 !important;
    color:#15191f !important;
}
html[data-theme="dark"] body.ui-v2-shell select option,
html[data-theme="dark"] body.ui-v2-shell .form-select option{
    background:#1f2126 !important;
    color:#f4f6f8 !important;
}
body.ui-v2-shell select option:checked,
body.ui-v2-shell .form-select option:checked{
    background:#24d3b5 !important;
    color:#061411 !important;
}

/* Settings AJAX: do not leave the page looking disabled if the old partial AJAX path misbehaves. */
body.ui-v2-shell .settings-layout.is-loading{
    opacity:1 !important;
    pointer-events:auto !important;
}
body.ui-v2-shell .v2-route-progress{
    z-index:9300 !important;
}
body.ui-v2-shell:not(.v2-navigating) .v2-route-progress{
    opacity:0 !important;
    transform:scaleX(.15) !important;
}

/* Customer portal balance: make customer ticket content feel centered inside the remaining work area. */
body.ui-v2-shell.customer-v2-portal main.app-container.customer-ticket-view-page{
    padding-left:clamp(18px, 2.8vw, 44px) !important;
    padding-right:clamp(18px, 2.8vw, 44px) !important;
}
body.ui-v2-shell.customer-v2-portal .customer-ticket-view-page > :not(.page-header-ticket){
    width:min(100%, 1280px) !important;
    max-width:1280px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
body.ui-v2-shell.customer-v2-portal .customer-ticket-view-page > .page-header-ticket .customer-ticket-title-row{
    width:min(100%, 1280px) !important;
    max-width:1280px !important;
}

/* Customer sidebar bottom: avoid username overlapping the theme/logout/test controls until a real profile page exists. */
body.ui-v2-shell.customer-v2-portal .topbar-right{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    grid-template-columns:none !important;
}
body.ui-v2-shell.customer-v2-portal .topbar-right > .topbar-pill{
    flex:1 0 100% !important;
    width:100% !important;
    min-height:32px !important;
    justify-content:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    padding:7px 8px !important;
}
body.ui-v2-shell.customer-v2-portal .topbar-right > .topbar-icon{
    flex:1 1 40px !important;
    max-width:52px !important;
}

/* Autocomplete/dropdown panels in v2 should look intentional, not legacy blue/white blocks. */
body.ui-v2-shell .ac-box,
body.ui-v2-shell .autocomplete-list,
body.ui-v2-shell .dropdown-menu,
body.ui-v2-shell [data-queue-department-menu],
body.ui-v2-shell .queue-department-menu{
    background:var(--v2-panel, #fbfaf6) !important;
    color:var(--v2-text) !important;
    border:1px solid var(--v2-line-strong, rgba(15,23,42,.18)) !important;
    border-radius:14px !important;
    box-shadow:0 24px 70px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] body.ui-v2-shell .ac-box,
html[data-theme="dark"] body.ui-v2-shell .autocomplete-list,
html[data-theme="dark"] body.ui-v2-shell .dropdown-menu,
html[data-theme="dark"] body.ui-v2-shell [data-queue-department-menu],
html[data-theme="dark"] body.ui-v2-shell .queue-department-menu{
    background:#1f2126 !important;
    color:#f4f6f8 !important;
}
body.ui-v2-shell .ac-box *,
body.ui-v2-shell .autocomplete-list *,
body.ui-v2-shell .dropdown-menu *{
    color:inherit !important;
}

/* HVSZ_V2_STABILIZATION_H26_END */