@import url('style_original.css');
@import url('branding.css');



/* ===== Live updates (toasts, refresh button, banners, sound toggle) ===== */
.live-toasts {
    position: fixed; right: 16px; bottom: 16px; z-index: 2000;
    display: flex; flex-direction: column; gap: 10px;
    width: min(340px, calc(100vw - 32px)); pointer-events: none;
}
.live-toast {
    --nt: #d0141c;
    position: relative; display: flex; align-items: flex-start; gap: 12px; overflow: hidden;
    padding: 14px 38px 16px 14px; border-radius: 16px;
    background: #fff; color: #1f2937; text-decoration: none;
    border: 1px solid #f0f0f2; border-left: 5px solid var(--nt);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .22), 0 0 0 4px color-mix(in srgb, var(--nt) 8%, transparent);
    pointer-events: auto; animation: liveToastIn .4s cubic-bezier(.2, 1.1, .4, 1);
}
.live-toast:hover { background: #fffdfd; }
.live-toast .nt-ico {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--nt) 13%, #fff); color: var(--nt);
    animation: ntRing 1.2s ease .3s 2;
}
.live-toast .nt-ico svg { width: 22px; height: 22px; }
.live-toast .nt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-toast .nt-label { font-size: .72rem; color: var(--nt); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.live-toast .nt-msg { font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.live-toast .nt-open { margin-top: 4px; font-size: .78rem; font-weight: 600; color: var(--nt); }
.live-toast .nt-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--nt); transform-origin: left; animation: ntBar var(--nt-ms, 8s) linear forwards; opacity: .7; }
.live-toast.is-paused .nt-bar { animation-play-state: paused; }
.live-toast-x {
    position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
    border: 0; background: transparent; color: #9ca3af; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.live-toast-x:hover { background: #f3f4f6; color: #374151; }
@keyframes liveToastIn { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ntBar { to { transform: scaleX(0); } }
@keyframes ntRing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
.nt-tkt { font-weight: 700; color: #1f2937; }

.live-refresh {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1999;
    padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(135deg, #f0555a, #d0141c); color: #fff;
    font: inherit; font-weight: 600; font-size: .9rem;
    box-shadow: 0 8px 22px rgba(208, 20, 28, .35);
}
.live-refresh[hidden], .live-banner[hidden] { display: none; }

.live-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 2100;
    padding: 8px 14px; text-align: center; font-size: .9rem;
    background: #fff3cd; color: #664d03; border-bottom: 1px solid #ffe69c;
}
.live-banner a { color: #d0141c; font-weight: 600; }

.live-sound {
    display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 12px; background: transparent; cursor: pointer;
    font-size: 1.05rem; line-height: 1; transition: background .2s;
}
.live-sound:hover { background: rgba(127, 127, 127, .15); }

@media (prefers-reduced-motion: reduce) { .live-toast, .live-toast .nt-ico, .live-toast .nt-bar { animation: none; } }


/* ===== Notices (flash messages) fade in, then fade out by themselves ===== */
.flash {
    position: relative; overflow: hidden; padding-right: 40px;
    animation: flashIn .35s ease;
    transition: opacity .45s ease, transform .45s ease, max-height .5s ease, margin .5s ease, padding .5s ease;
}
.flash.is-leaving {
    opacity: 0; transform: translateY(-8px);
    max-height: 0 !important; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
}
.flash-x {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: inherit; opacity: .55; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.flash-x:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
@keyframes flashIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* live toasts (bottom right) fade out too */
.live-toast { transition: opacity .35s ease, transform .35s ease; }
.live-toast.is-leaving { opacity: 0; transform: translateY(8px); }

/* ===== Team status (who is online) ===== */
.site-header .team { position: relative; }
.site-header .main-nav .team-btn {
    position: relative; display: inline-grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 12px; background: transparent; color: #374151; cursor: pointer;
    transition: background .2s, color .2s;
}
.site-header .main-nav .team-btn:hover,
.site-header .main-nav .team-btn[aria-expanded="true"] { background: #fff1f1; color: #d0141c; }
.site-header .main-nav .team-count {
    position: absolute; top: 3px; right: 3px;
    display: grid; place-items: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border: 2px solid #fff; border-radius: 999px; box-sizing: content-box;
    background: #16a34a; color: #fff; font-size: .66rem; font-weight: 600; line-height: 1;
}
.team-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 1000;
    width: min(320px, 90vw); max-height: 420px; overflow-y: auto; padding: 6px;
    background: #fff; color: #1f2937; border-radius: 16px; text-align: left;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .18); animation: profilePop .15s ease;
}
.team-panel[hidden] { display: none; }
.team-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 8px; }
.team-head strong { font-size: .95rem; }
.team-sub { font-size: .78rem; font-weight: 600; color: #16a34a; background: #dcfce7; padding: 2px 10px; border-radius: 999px; }
.team-empty { margin: 0; padding: 14px 12px; color: #6b7280; font-size: .88rem; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; }
.team-row:hover { background: #f9fafb; }
.team-avatar {
    position: relative; flex: 0 0 auto; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 50%; background: #d0141c; color: #fff;
    font-size: .8rem; font-weight: 600;
}
.team-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.team-dot {
    position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
    border: 2px solid #fff; border-radius: 50%; background: #9ca3af;
}
.team-dot.team-online { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: teamPulse 2s infinite; }
.team-dot.team-away { background: #f59e0b; }
.team-dot.team-offline { background: #9ca3af; }
@keyframes teamPulse { 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.team-who { display: flex; flex-direction: column; min-width: 0; }
.team-who strong { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-who em { font-weight: 400; font-style: normal; color: #6b7280; }
.team-who small { font-size: .76rem; color: #6b7280; }
.team-state-online { color: #16a34a; font-weight: 600; }
.team-state-away { color: #d97706; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .flash, .team-panel, .team-dot.team-online { animation: none; }
    .flash, .live-toast { transition: opacity .2s ease; }
}


/* ===== Smart (live) search on technician lists ===== */
.smart-page .filter-bar input[type="text"] {
    width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px;
    border: 2px solid transparent; border-radius: 12px; background-color: #f3f4f6;
    font: inherit; font-size: .93rem; color: #111827; outline: none;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.smart-page .filter-bar input[type="text"]::placeholder { color: #9ca3af; }
.smart-page .filter-bar input[type="text"]:focus { background-color: #fff; border-color: #e0343b; box-shadow: 0 0 0 4px rgba(224, 52, 59, .12); }
.smart-page .filter-bar .wide { grid-column: span 2; }
.smart-page.ma-page .filter-bar .ma-field.wide { flex: 2 1 340px; max-width: 560px; }
.smart-page .ss-reset {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 22px; border: 0; border-radius: 12px;
    background: #f3f4f6; color: #374151; font: inherit; font-size: .95rem; font-weight: 500; cursor: pointer;
    transition: background .2s, color .2s, transform .15s, opacity .2s;
}
.smart-page .ss-reset svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s ease; }
.smart-page .ss-reset:hover:not(:disabled) { background: #fee2e2; color: #d0141c; transform: translateY(-2px); }
.smart-page .ss-reset:hover:not(:disabled) svg { transform: rotate(-180deg); }
.smart-page .ss-reset:disabled { opacity: .45; cursor: not-allowed; }
.smart-page .tq-actions .ss-reset { width: 100%; }

.smart-page .ss-progress {
    height: 3px; margin: -12px 10px 14px; border-radius: 999px; opacity: 0;
    background: linear-gradient(90deg, transparent, #e0343b, transparent) no-repeat; background-size: 40% 100%;
    transition: opacity .2s;
}
.smart-page.is-loading .ss-progress { opacity: 1; animation: ssSlide 1s linear infinite; }
@keyframes ssSlide { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.smart-page #liveResults { transition: opacity .2s ease; }
.smart-page.is-loading #liveResults { opacity: .45; pointer-events: none; }
@keyframes ssRowIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ssFade  { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.smart-page #liveResults.ss-in .table-card { animation: none; }
.smart-page #liveResults.ss-in tbody tr,
.smart-page #liveResults.ss-in .ticket-tile,
.smart-page #liveResults.ss-in .tile-empty {
    animation: ssRowIn .45s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms);
}
.smart-page #liveSummary.ss-in > p { animation: ssFade .35s ease backwards; }
@media (max-width: 640px) { .smart-page .filter-bar .wide { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) {
    .smart-page #liveResults.ss-in tbody tr, .smart-page #liveResults.ss-in .ticket-tile, .smart-page #liveResults.ss-in .tile-empty,
    .smart-page #liveSummary.ss-in > p, .smart-page.is-loading .ss-progress { animation: none; }
}


/* notice type used by "already assigned" messages, and the reason box next to the Reassign dropdown */
.flash-info { background: #e0f2fe; color: #075985; }
.tv-page .tv-row > input[type="text"] { flex: 2 1 260px; width: auto; }


/* ===== Header dropdowns (Team status, Notifications, Account menu) always sit ABOVE the page =====
   The header used to have no stacking level, so cards that lift on hover (transform) or animate in painted
   on top of the open dropdown. Giving the header its own level fixes every dropdown at once.
   (Toasts are 2000 and the loading bar 2100, so they still sit above the header.) */
body .site-header { position: relative; z-index: 1000; }


/* ===== "Back to dashboard" button: ONE look for every page =====
   Used by create ticket, view ticket (employee + technician/admin), profile and resolved tickets.
   It is a real button with its own spacing, so it never crowds the ticket number or the title under it. */
.back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 18px; margin: 0 0 20px;
    border: 1px solid #f3c4c6; border-radius: 12px;
    background: #fff; color: #d0141c;
    font: inherit; font-size: .92rem; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transition: background .2s, border-color .2s, transform .15s, box-shadow .15s;
}
.back-btn .back-arrow { display: inline-block; transition: transform .2s; }
.back-btn:hover { background: #fff1f1; border-color: #d0141c; text-decoration: none; box-shadow: 0 6px 14px rgba(208, 20, 28, .14); }
.back-btn:hover .back-arrow { transform: translateX(-3px); }
.back-btn:active { transform: translateY(1px); }
.back-btn:focus-visible { outline: 3px solid rgba(208, 20, 28, .35); outline-offset: 2px; }
/* inside a row that already has its own spacing (page title + button) the bottom margin is not needed */
.tk-top .back-btn, .pf-top .back-btn, .rt-head .back-btn { margin-bottom: 0; }
@media (max-width: 600px) { .back-btn { height: 44px; } }
@media (prefers-reduced-motion: reduce) { .back-btn, .back-btn .back-arrow { transition: none; } }


/* ===== Notification dropdown (bell) ===== */
.notif-panel { width: 372px; max-width: calc(100vw - 24px); max-height: 480px; border-radius: 18px; border: 1px solid #f0f0f2; box-shadow: 0 18px 48px rgba(0, 0, 0, .2); padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.notif-panel .notif-head { position: sticky; top: 0; z-index: 2; padding: 14px 16px; background: #fff; border-bottom: 1px solid #f1f1f3; }
.notif-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; }
.notif-head strong svg { width: 18px; height: 18px; color: #d0141c; }
.nt-count { padding: 2px 9px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: .72rem; font-weight: 700; }
.notif-link { padding: 5px 12px !important; border-radius: 999px !important; background: #fff5f5 !important; color: #d0141c !important; font-weight: 600; font-size: .78rem !important; border: 0; cursor: pointer; }
.notif-link:hover { background: #fee2e2 !important; text-decoration: none !important; }
.notif-item { --nt: #6b7280; border-bottom: 1px solid #f4f4f6 !important; }
.notif-item button { display: flex !important; align-items: flex-start; gap: 12px; padding: 12px 16px !important; border-left: 4px solid transparent !important; background: #fff; cursor: pointer; transition: background .15s; }
.notif-item button:hover { background: #fafafb !important; }
.notif-item.unread button { background: color-mix(in srgb, var(--nt) 7%, #fff) !important; border-left-color: var(--nt) !important; }
.notif-item .nt-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--nt) 13%, #fff); color: var(--nt); }
.notif-item .nt-ico svg { width: 20px; height: 20px; }
.notif-item:not(.unread) .nt-ico { opacity: .7; }
.notif-item .nt-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item .nt-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--nt); }
.notif-item .notif-msg { font-size: .86rem !important; line-height: 1.4; color: #1f2937; overflow-wrap: anywhere; }
.notif-item:not(.unread) .notif-msg { color: #4b5563; }
.notif-item .notif-time { font-size: .72rem !important; color: #9ca3af !important; margin-top: 2px !important; }
.nt-dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--nt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nt) 22%, transparent); }
.nt-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 32px 20px; text-align: center; color: #6b7280; font-size: .85rem; }
.nt-empty strong { color: #1f2937; font-size: .95rem; }
.nt-empty-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #f3f4f6; color: #9ca3af; margin-bottom: 6px; }
.nt-empty-ico svg { width: 26px; height: 26px; }
@media (max-width: 480px) { .live-toasts { right: 10px; left: 10px; width: auto; } }