body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;margin:0 0 20px 0;padding:0 12px;box-sizing:border-box;background:#111;color:#ddd;font-size:12px;}
/* ---- Ticket list (CSS grid, no tables) ---- */
/* The list is one grid; rows use subgrid so columns size to content and align
   across every row (tight, no oversized gaps). */
.tickets-list{display:grid;column-gap:14px;}
.cols-open{grid-template-columns:auto auto auto auto auto minmax(140px,1fr) auto auto auto auto;}
.cols-snoozed{grid-template-columns:auto auto auto auto auto minmax(140px,1fr) auto auto auto auto auto;}
.cols-closed{grid-template-columns:auto auto auto auto auto minmax(140px,1fr) auto auto auto;}
.ticket-row,.ticket-head{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center;}
.tc,.th{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 0;}
.ticket-row .tc:first-child,.ticket-head .th:first-child{padding-left:10px;}
.ticket-row .tc:last-child,.ticket-head .th:last-child{padding-right:10px;}
.th{color:#9aa0aa;font-weight:600;font-size:11px;}
.ticket-head{border-bottom:1px solid #2a2f3a;}
.ticket-row{border-bottom:1px solid #1c1f26;}
.ticket-row[data-ticket-id]:hover{background:#2a1a2f;cursor:pointer;}
.ticket-row.row-selected{background:#241830;box-shadow:inset 3px 0 0 #e06fff;}
.ticket-row.search-hidden{display:none;}
.tc-actions,.tc-unread{overflow:visible;}
.tc-unread{text-align:left;}
.snooze-menu{position:relative;}
.snooze-dropdown{z-index:1000;}

a{color:#6aa9ff;text-decoration:none;}
a:hover{text-decoration:underline;}
.badge{display:inline-block;padding:2px 10px;border-radius:9999px;border:1px solid transparent;white-space:nowrap;font-size: 10px;cursor:pointer;}
.badge:hover{opacity:0.8;}
.badge.status-open{background:#0f2a18;color:#b7f3c1;border-color:#1e4c2d;}
.badge.status-pending{background:#2a2212;color:#ffd68a;border-color:#4d3f1f;}
.badge.status-closed{background:#2a1418;color:#ff9db0;border-color:#4d1f2b;}
.badge.status-resolved{background:#112828;color:#a6eff0;border-color:#1f4d4d;}
.badge.status-other{background:#232323;color:#ddd;border-color:#3a3a3a;}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:9999px;background:#222c37;color:#cfe1ff;border:1px solid #3a4a5a;font-size: 10px;cursor:pointer;}
.chip:hover{opacity:0.8;}
.toolbar{margin:12px 0;}
.ticket-sections-wrapper{margin-bottom:14px;}
.sections-tab-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;box-sizing:border-box;background:#1b1b1b;border:1px solid #24314d;border-radius:8px 8px 0 0;}
.tab-btn{position:relative;padding:3px 10px;border:1px solid #3a4a5a;border-radius:8px;background:#222c37;color:#cfe1ff;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;}
.tab-btn:hover{opacity:0.85;}
.tab-btn.active{background:#88097a;color:#fff;border-color:#e06fff;}
.sections-content{border:1px solid #24314d;border-top:none;border-radius:0 0 8px 8px;padding:8px 12px 10px 16px;}
.section-panel.panel-hidden{display:none;}

/* Top-level Tickets / Stats / Machines view switcher.
   Stays pinned to the top of the page on every tab. */
.top-tab-bar{position:sticky;top:0;z-index:30;background:#111;border:none;border-radius:0;height:auto;padding:0;margin:14px 0 16px;}
.top-tab-bar .tab-btn{font-size:11px;padding:3px 11px;}
/* Passkeys link — inside the fixed #updateStatus box, after Refresh Contacts */
.passkey-link{margin-left:10px;padding:4px 8px;border-radius:6px;background:#222c37;color:#cfe1ff;font-size:12px;white-space:nowrap;}
.passkey-link:hover{background:#2b3949;text-decoration:none;}
.passkey-open{color:#ffcf4d;border:1px solid #6b511a;background:#3a2e0a;}
.passkey-open:hover{background:#4a3a0d;color:#ffe08a;}
.snooze-all-menu{margin-left:auto;}
.snooze-all-menu .snooze-dropdown{left:auto;right:0;}
.dismiss-all-btn{margin-left:auto;padding:3px 12px;border:1px solid #4d1f2b;border-radius:8px;background:#2a1418;color:#ff9db0;cursor:pointer;font-size:11px;}
.dismiss-all-btn:hover{background:#3a1a22;}
.dismiss-all-btn:disabled{opacity:0.6;cursor:default;}
.empty-state{display:none;padding:48px 20px;text-align:center;color:#9ca3af;font-size:18px;font-weight:600;}
.new-tickets-section{margin-bottom:14px;}
.new-tickets-header{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;box-sizing:border-box;background:#1b1b1b;border:1px solid #24314d;border-bottom:none;border-radius:8px 8px 0 0;color:#ddd;font-weight:700;font-size:13px;}
.new-tickets-body{border:1px solid #24314d;border-top:none;border-radius:0 0 8px 8px;padding:8px 12px 10px 16px;}
.agent-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;}
.agent-pill{position:relative;padding:3px 8px 3px 14px;border:1px solid #3a4a5a;border-radius:8px;background:#222c37;color:#cfe1ff;cursor:pointer;font-size:11px;}
.agent-pill:hover{opacity:0.85;}
.agent-pill.pill-hidden{display:none;}
.agent-pill.active{background:#88097a;color:#fff;border-color:#e06fff;}
.pill-count{display:inline-block;min-width:14px;padding:0 5px;margin-left:4px;border-radius:9999px;background:rgba(0,0,0,0.35);font-size:10px;text-align:center;}
.agent-pill.active .pill-count,.tab-btn.active .pill-count{background:rgba(255,255,255,0.25);}
.agent-select{display:none;width:100%;max-width:420px;padding:9px 10px;border:1px solid #3a4a5a;border-radius:8px;background:#222c37;color:#cfe1ff;font-size:14px;margin-bottom:14px;}
.pill-tip{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;background:#171717;border:1px solid #4a4a4a;color:#ddd;padding:5px 9px;border-radius:6px;white-space:nowrap;font-size:11px;font-weight:normal;z-index:2000;box-shadow:0 4px 14px rgba(0,0,0,.4);pointer-events:none;}
.agent-pill:hover .pill-tip{display:block;}
.pill-splat{position:absolute;top:-7px;right:-6px;color:#e06fff;font-weight:bold;font-size:24px;line-height:1;pointer-events:none;}
.agent-pill.active .pill-splat{color:#ff5a5a;}

.refresh-btn{margin-left:auto;padding:3px 10px;border:1px solid #3a4a5a;border-radius:8px;background:#222c37;color:#cfe1ff;cursor:pointer;font-size:11px;}
.refresh-btn:hover{opacity:0.85;}
.refresh-btn:disabled{opacity:0.5;cursor:default;}
#updateStatus{position:fixed;top:12px;right:12px;z-index:9999;background:#111827;color:#e5e7eb;padding:8px 12px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.15);}
#updateStatus .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;margin-right:8px;}
#updateStatus.updates .dot{background:#f59e0b;}
#updateStatus button{margin-left:10px;padding:4px 8px;border:0;border-radius:6px;cursor:pointer;background:#10b981;color:#072b1f;}
#refreshContactsBtn{background:#88097a;color:#fff;}
#updateStatus .muted{color:#9ca3af;}
.snooze-menu{position:relative;display:inline-block;}
.snooze-btn, .btn-unsnooze, .btn-close, .btn-open, .btn-dismiss{padding:0px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#f9fafb;cursor:pointer;font-size:10px;}
.type-btn{padding:1px 6px;border-radius:9999px;background:#1f2937;color:#e0c5ff;border:1px solid #4b3565;font-size:8px;cursor:default;white-space:nowrap;margin-left:6px;}
.snooze-menu.open .snooze-btn{background:#111827;color:#fff;border-color:#111827;}
.snooze-dropdown{display:none;position:absolute;left:0;top:100%;background:#171717;border:1px solid #f618e9;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.15);list-style:none;padding:0 0;margin:6px 0 0;z-index:1000;}
.snooze-menu.open .snooze-dropdown{display:block;}
.snooze-menu.drop-up .snooze-dropdown{top:auto;bottom:100%;margin:0 0 6px 0;}
.snooze-dropdown li{padding:5px 12px;cursor:pointer;white-space:nowrap;}
.snooze-dropdown li:hover{background:#4a1b57;}
.snooze-dropdown .sep{border-top:1px solid #f618e9}
.badge-bell{margin-left:6px;font-size:12px;line-height:1;vertical-align:middle;opacity:0.85;}
.badge-bell:hover{ opacity:1; }.search-bar{margin:16px 0;display:flex;align-items:center;gap:12px;}
.search-input-wrap{position:relative;flex:1;max-width:420px;display:flex;}
.search-input-wrap #ticketSearch{max-width:none;padding-right:30px;}
.clear-search{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:18px;height:18px;background:transparent;border:none;color:#888;font-size:18px;line-height:1;cursor:pointer;padding:0;display:none;align-items:center;justify-content:center;}
.clear-search:hover{color:#ddd;}
.clear-search.visible{display:flex;}
#ticketSearch{flex:1;max-width:600px;padding:8px 12px;border:1px solid #3a4a5a;border-radius:8px;background:#1b1b1b;color:#ddd;font-size:13px;}
#ticketSearch:focus{outline:none;border-color:#88097a;box-shadow:0 0 0 2px rgba(136,9,122,0.2);}
#ticketSearch::placeholder{color:#666;}
#searchResults{font-size:12px;color:#9ca3af;}
.new-ticket-btn{display:inline-flex;align-items:center;padding:4px 16px;border-radius:8px;background:#88097a;color:#fff;border:1px solid #e06fff;font-size:13px;font-weight:600;white-space:nowrap;}
.new-ticket-btn:hover{background:#a30b91;text-decoration:none;}
.open-ticket-btn{display:inline-flex;align-items:center;padding:4px 16px;border-radius:8px;border:1px solid #3a4a5a;background:#222c37;color:#cfe1ff;font-family:inherit;font-size:13px;line-height:normal;white-space:nowrap;cursor:pointer;}
.open-ticket-btn:hover{background:#2b3949;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:10000;}
.modal-box{background:#1b1b1b;border:1px solid #24314d;border-radius:12px;padding:24px;min-width:280px;display:flex;flex-direction:column;gap:14px;}
.modal-title{font-size:15px;font-weight:700;color:#ddd;}
.modal-input{padding:8px 12px;border:1px solid #3a4a5a;border-radius:8px;background:#111;color:#ddd;font-size:14px;outline:none;}
.modal-input:focus{border-color:#88097a;box-shadow:0 0 0 2px rgba(136,9,122,0.25);}
.modal-actions{display:flex;gap:8px;}
.modal-submit{padding:6px 18px;border-radius:8px;background:#88097a;color:#fff;border:1px solid #e06fff;cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;}
.modal-submit:hover{background:#a30b91;}
.modal-cancel{padding:6px 14px;border-radius:8px;background:transparent;color:#9ca3af;border:1px solid #3a4a5a;cursor:pointer;font-size:13px;font-family:inherit;}
.modal-cancel:hover{color:#ddd;border-color:#666;}
.view-panel{margin:6px 0 18px;}
.stats-cards{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 20px;}
.stat-card{flex:1 1 140px;background:#1b1b1b;border:1px solid #24314d;border-radius:8px;padding:14px 16px;}
.stat-card .num{font-size:28px;font-weight:700;color:#e06fff;}
.stat-card .lbl{font-size:12px;color:#9ca3af;margin-top:4px;}
.stats-grid{display:flex;flex-wrap:wrap;gap:24px;}
.stats-block{flex:1 1 280px;min-width:240px;}
.stats-block h2{font-size:14px;color:#ddd;border-bottom:1px solid #24314d;padding-bottom:6px;}
.stats-block table{width:100%;border-collapse:collapse;}
.stats-block td{padding:4px 8px 4px 0;}
.stats-block td.n{text-align:right;color:#e06fff;font-weight:600;width:60px;}

/* OS / App tag (Machines details popup, Updates tab) */
.sw-item-type{display:inline-block;min-width:26px;margin-right:6px;padding:1px 6px;border-radius:4px;background:#1f2937;color:#9aa0aa;border:1px solid #3a4a5a;font-size:9px;font-weight:700;text-align:center;}
@keyframes rowflash{from{background:#4a1b57;}to{background:transparent;}}
.ticket-row.row-new{animation:rowflash 2.5s ease-out;}
.unread-subject{font-weight:bold;}
/* UK support inbox badge (uksupport@marketbridge.com) */
.uk-badge{display:inline-block;padding:1px 5px;margin-right:2px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.5px;background:#0a2a6b;color:#fff;border:1px solid #3b62c4;vertical-align:middle;}
.read-pill{width:18px;height:18px;padding:0;border-radius:50%;font-size:10px;line-height:1;cursor:pointer;border:1px solid;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}
.read-pill.is-unread{background:#2a1340;color:#e06fff;border-color:#e06fff;}
/* Read state: visually blank at rest, faintly revealed on row hover so it stays togglable */
.read-pill.is-read{background:transparent;color:#9aa0aa;border-color:transparent;opacity:0;transition:opacity .15s;}
.ticket-row:hover .read-pill.is-read{opacity:0.4;background:#1f2937;border-color:#3a4a5a;}
.ticket-row:hover .read-pill.is-read:hover{opacity:0.9;}
.read-pill.is-unread:hover{opacity:0.85;}

/* ---- Machine Info tab (js/machine_info.js, data from ../machines/info_data.php) ---- */
#view-machineinfo [hidden],.mx-overlay [hidden],.mx-pop [hidden]{display:none!important;}
.mx-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:80px 20px;color:#9ca3af;font-size:14px;}
.mx-spinner{width:34px;height:34px;border:3px solid #2a2f3a;border-top-color:#e06fff;border-radius:50%;animation:mxspin .8s linear infinite;}
.mx-spinner-sm{display:inline-block;width:10px;height:10px;border-width:2px;vertical-align:-1px;}
@keyframes mxspin{to{transform:rotate(360deg);}}
.mx-error{padding:40px 20px;text-align:center;color:#ff9db0;line-height:2;}
.mx-error.mx-pad{padding:12px;text-align:left;}

.mx-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 8px;}
.mx-search-wrap{position:relative;flex:1 1 260px;max-width:420px;display:flex;}
#mxSearch{flex:1;padding:6px 30px 6px 12px;border:1px solid #3a4a5a;border-radius:8px;background:#1b1b1b;color:#ddd;font-size:12px;font-family:inherit;}
#mxSearch:focus{outline:none;border-color:#88097a;box-shadow:0 0 0 2px rgba(136,9,122,0.2);}
.mx-count{color:#cfe1ff;font-weight:600;font-size:11px;white-space:nowrap;}
.mx-loaded{margin-left:auto;color:#6b7280;font-size:10px;white-space:nowrap;}
.mx-toolbar .refresh-btn{margin-left:0;}
.mx-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border:1px solid #3a4a5a;border-radius:8px;background:#222c37;color:#cfe1ff;cursor:pointer;font-size:11px;font-family:inherit;white-space:nowrap;}
.mx-btn:hover{opacity:.85;text-decoration:none;}
.mx-btn:disabled{opacity:.4;cursor:default;}
.mx-btn.active{background:#88097a;color:#fff;border-color:#e06fff;}

/* Hide / unhide a machine */
.mx-hide{margin-left:8px;padding:0 2px;border:none;background:transparent;color:#6b7280;cursor:pointer;vertical-align:-2px;opacity:0;}
.mx-row:hover .mx-hide{opacity:1;}
.mx-hide:hover{color:#ddd;}
.mx-unhide{margin-left:8px;padding:0 7px;border:1px solid #3a4a5a;border-radius:8px;background:#222c37;color:#cfe1ff;cursor:pointer;font-size:10px;font-family:inherit;}
.mx-unhide:hover{background:#2b3949;}
.mx-row-hidden td{color:#5b616b;} /* plain-text cells; not opacity, which would let scrolled content show through the frozen cells */
.mx-row-hidden td>*{opacity:.45;}
.mx-row-hidden td>.mx-unhide{opacity:1;}

/* Saved views row (named pills above the filters) */
.mx-views{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;padding-top:4px;}
.mx-views-label{color:#6b7280;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-right:2px;}
.mx-views-hint{font-size:11px;}
/* Pills styled like the top tabs (.top-tab-bar .tab-btn); the delete × is a
   corner badge so it doesn't take space inside the pill. */
.mx-view{position:relative;display:inline-flex;}
.mx-view-name{padding:3px 11px;border:1px solid #3a4a5a;border-radius:8px;background:#222c37;color:#cfe1ff;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;white-space:nowrap;}
.mx-view-name:hover{opacity:.85;}
.mx-view.active .mx-view-name{background:#88097a;color:#fff;border-color:#e06fff;}
.mx-view-del{position:absolute;top:-6px;right:-6px;width:15px;height:15px;padding:0;display:flex;align-items:center;justify-content:center;
  border:1px solid #4d1f2b;border-radius:50%;background:#2a1418;color:#ff9db0;cursor:pointer;font-size:11px;line-height:1;font-family:inherit;
  opacity:0;pointer-events:none;transition:opacity .12s;}
.mx-view:hover .mx-view-del,.mx-view-del:focus-visible{opacity:1;pointer-events:auto;}
.mx-view-del:hover{background:#4d1f2b;color:#fff;}
@media (hover:none){.mx-view-del{opacity:1;pointer-events:auto;}}
.mx-view-add{padding:3px 11px;border:1px dashed #3a4a5a;border-radius:8px;background:none;color:#9aa0aa;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;white-space:nowrap;}
.mx-view-add:hover{color:#e06fff;border-color:#e06fff;}
.mx-save-targets{display:flex;flex-wrap:wrap;gap:8px;}
.mx-view-summary{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid #24314d;border-radius:8px;background:#141821;color:#9aa0aa;font-size:12px;}
.mx-view-note{font-size:12px;color:#ffcf4d;}
.mx-filters{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px;}
.mx-fbtn{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 9px;border:1px solid #2f3b48;border-radius:8px;background:#181d24;color:#9aa0aa;cursor:pointer;font-size:11px;font-family:inherit;}
.mx-fbtn:hover{color:#cfe1ff;border-color:#3a4a5a;}
.mx-fbtn.active{background:#88097a;color:#fff;border-color:#e06fff;}

/* Table: sticky header (relative to .mx-scroll) + sticky highlight/name columns.
   Cells paint an opaque base with the row tint layered on top (--tint), so
   sticky cells hide what scrolls under them even on highlighted rows. */
.mx-scroll{overflow:auto;border:1px solid #24314d;border-radius:8px;}
.mx-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;}
.mx-table th,.mx-table td{padding:6px 10px;white-space:nowrap;text-align:left;vertical-align:middle;border-bottom:1px solid #1c1f26;
  background:linear-gradient(var(--tint,transparent),var(--tint,transparent)),#111;}
.mx-table th{position:sticky;top:0;z-index:2;color:#9aa0aa;font-weight:600;font-size:11px;border-bottom:1px solid #2a2f3a;user-select:none;}
.mx-table th.mx-sortable{cursor:pointer;}
.mx-table th.mx-sortable:hover{color:#cfe1ff;}
.mx-table .mx-c-hl{position:sticky;left:0;z-index:1;width:18px;min-width:18px;padding-right:4px;}
.mx-table .mx-c-name{position:sticky;left:var(--mx-name-left,32px);z-index:1;box-shadow:inset -1px 0 0 #2a2f3a;}
.mx-table .mx-c-user{position:sticky;left:var(--mx-user-left,200px);z-index:1;box-shadow:inset -1px 0 0 #2a2f3a;}
.mx-table.mx-user-frozen .mx-c-name{box-shadow:none;} /* divider only on the last frozen column */
.mx-table th.mx-c-hl,.mx-table th.mx-c-name,.mx-table th.mx-c-user{z-index:3;}
.mx-row{cursor:pointer;}
.mx-row:hover{--tint:rgba(255,255,255,.045);}
.mx-row.mx-hl{--tint:color-mix(in srgb,var(--hl) 20%,transparent);}
.mx-row.mx-hl:hover{--tint:color-mix(in srgb,var(--hl) 28%,transparent);}
.mx-row.mx-hl td.mx-c-hl{box-shadow:inset 3px 0 0 var(--hl);}
.mx-empty{padding:48px 20px;text-align:center;color:#9ca3af;font-size:15px;font-weight:600;}

.mx-name{font-size:12px;font-weight:600;color:#e06fff;}
.mx-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px;}
.mx-dot-on{background:#22c55e;}
.mx-dot-off{background:#4b5563;}
.mx-muted{color:#6b7280;}
.mx-mono{font-family:Consolas,'Courier New',monospace;font-size:11px;}
.mx-tag{display:inline-block;padding:0 6px;border-radius:4px;background:#1f2937;color:#9aa0aa;border:1px solid #3a4a5a;font-size:9px;font-weight:700;vertical-align:1px;}
.mx-num-pill{display:inline-block;min-width:16px;padding:0 6px;border-radius:9999px;font-size:10px;font-weight:700;text-align:center;}
.mx-bad{background:#3a0f12;color:#ff6b6b;border:1px solid #6b1b1f;}
.mx-warn{background:#3a2e0a;color:#ffcf4d;border:1px solid #6b511a;}
.mx-info{background:#10233f;color:#8cc4ff;border:1px solid #1e4070;}
.mx-bad-text{color:#ff6b6b;font-weight:600;}
.mx-warn-text{color:#ffcf4d;}

/* Highlight swatches */
.mx-swatch{display:inline-block;width:14px;height:14px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);cursor:pointer;vertical-align:middle;}
.mx-swatch-none{background:transparent;border:1px dashed #3a4a5a;opacity:.35;}
.mx-row:hover .mx-swatch-none{opacity:1;}
.mx-swatch-lg{width:22px;height:22px;}
.mx-swatch-lg.sel{box-shadow:0 0 0 2px #111,0 0 0 4px #fff;}
.mx-swatch-sm{width:10px;height:10px;margin-right:6px;cursor:default;}
.mx-hl-grid{display:grid;grid-template-columns:repeat(5,22px);gap:10px;padding:10px 12px 6px;}

/* Dropdown pills (Upgrade Type / Status). Colors by position in the option list. */
.mx-pill{display:inline-block;padding:1px 9px;border-radius:9999px;border:1px solid #3a4a5a;background:#1f2937;color:#cfe1ff;font-size:10px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;}
button.mx-pill:hover{filter:brightness(1.2);}
.mx-pill-empty{background:transparent;border-style:dashed;color:#6b7280;font-weight:400;opacity:.45;}
.mx-row:hover .mx-pill-empty{opacity:1;}
.mx-u0{background:#0f2a18;color:#86efac;border-color:#1e4c2d;}
.mx-u1{background:#10233f;color:#8cc4ff;border-color:#1e4070;}
.mx-s0{background:#2a1340;color:#e0a8ff;border-color:#5b2a80;}
.mx-s1{background:#10233f;color:#8cc4ff;border-color:#1e4070;}
.mx-s2{background:#3a2e0a;color:#ffcf4d;border-color:#6b511a;}
.mx-s3{background:#112828;color:#a6eff0;border-color:#1f4d4d;}
.mx-s4{background:#3a1d0a;color:#ffae6b;border-color:#6b3a1a;}
.mx-s5{background:#0f2a18;color:#86efac;border-color:#1e4c2d;}
/* Warranty pills + age */
.mx-w-in{background:#0f2a18;color:#86efac;border-color:#1e4c2d;}
.mx-w-soon{background:#3a2e0a;color:#ffcf4d;border-color:#6b511a;}
.mx-w-out{background:#3a0f12;color:#ff6b6b;border-color:#6b1b1f;}
.mx-w-unknown{background:transparent;color:#6b7280;border-color:#3a4a5a;font-weight:400;}
.mx-age{cursor:pointer;}
.mx-age:hover{text-decoration:underline dotted;}
.mx-date-row{display:flex;flex-wrap:wrap;gap:14px;}
.mx-date-field{display:flex;flex-direction:column;gap:5px;flex:1 1 180px;}
.mx-date-field input{color-scheme:dark;font-family:inherit;}
.mx-quick-end{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11px;}
.mx-push-right{margin-left:auto;}
.mx-link{color:#cfe1ff;border-bottom:1px dotted #6b7280;}
.mx-link:hover{text-decoration:none;color:#fff;}
.mx-edit{margin-left:6px;padding:0 4px;border:none;background:transparent;color:#6b7280;cursor:pointer;font-size:11px;opacity:0;}
.mx-row:hover .mx-edit{opacity:1;}
.mx-edit:hover{color:#ddd;}
.mx-c-notes{max-width:260px;}
.mx-note{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfd3da;cursor:text;}
.mx-note:hover{color:#fff;}

/* Popovers (appended to <body>, fixed-positioned) */
.mx-pop{position:fixed;z-index:10001;min-width:160px;max-width:340px;background:#171717;border:1px solid #f618e9;border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.5);padding:4px 0;font-size:12px;color:#ddd;}
.mx-pop-item{padding:5px 12px;cursor:pointer;white-space:nowrap;}
.mx-pop-item:hover{background:#4a1b57;}
.mx-pop-item.sel{background:#2a1a2f;}
.mx-pop-clear{border-top:1px solid #3a2a40;color:#9aa0aa;margin-top:2px;}
.mx-pop-filter{min-width:220px;}
.mx-pop-search{display:block;width:calc(100% - 16px);box-sizing:border-box;margin:4px 8px 6px;padding:5px 8px;border:1px solid #3a4a5a;border-radius:6px;background:#111;color:#ddd;font-size:12px;font-family:inherit;}
.mx-pop-search:focus{outline:none;border-color:#88097a;}
.mx-pop-list{max-height:min(55vh,420px);overflow-y:auto;}
.mx-opt{display:flex;align-items:center;gap:6px;padding:4px 12px;cursor:pointer;white-space:nowrap;}
.mx-opt:hover{background:#2a1a2f;}
.mx-opt input{margin:0;accent-color:#e06fff;}
.mx-opt-label{flex:1;overflow:hidden;text-overflow:ellipsis;}
.mx-opt-n{color:#6b7280;font-size:10px;padding-left:10px;}
.mx-opt-zero{opacity:.45;}
.mx-pop-foot{display:flex;justify-content:flex-end;padding:6px 8px 2px;border-top:1px solid #2a2f3a;margin-top:4px;}
.mx-pop-none{padding:8px 12px;}

/* Modals (reuse .modal-overlay; own box) */
.mx-modal{background:#1b1b1b;border:1px solid #24314d;border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;max-height:88vh;box-sizing:border-box;color:#ddd;}
.mx-modal-head{display:flex;align-items:center;gap:10px;}
.mx-modal-head .modal-title{flex:1;min-width:0;}
.mx-head-sub{font-size:11px;font-weight:400;margin-left:8px;}
.mx-close{border:none;background:transparent;color:#9aa0aa;font-size:22px;line-height:1;cursor:pointer;padding:0 4px;}
.mx-close:hover{color:#fff;}
.mx-hint{font-size:11px;align-self:center;margin-left:auto;}
.mx-modal-note{width:min(640px,94vw);}
.mx-note-text{width:100%;box-sizing:border-box;min-height:220px;padding:10px 12px;border:1px solid #3a4a5a;border-radius:8px;background:#111;color:#ddd;font-size:13px;font-family:inherit;line-height:1.5;resize:vertical;}
.mx-note-text:focus{outline:none;border-color:#88097a;box-shadow:0 0 0 2px rgba(136,9,122,0.25);}
.mx-modal-pick{width:min(760px,94vw);height:min(640px,88vh);}
.mx-pick-list{flex:1;overflow-y:auto;border:1px solid #24314d;border-radius:8px;}
.mx-pick-row{display:grid;grid-template-columns:auto minmax(140px,1.2fr) 1fr 1.3fr 1.3fr;gap:10px;align-items:center;padding:6px 10px;border-bottom:1px solid #1c1f26;cursor:pointer;font-size:12px;}
.mx-pick-row:hover{background:#2a1a2f;}
.mx-pick-row.sel{background:#241830;box-shadow:inset 3px 0 0 #e06fff;}
.mx-pick-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mx-pick-name{font-weight:600;color:#e06fff;}
.mx-modal-details{width:min(980px,96vw);height:88vh;}
.mx-modal-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-right:4px;}
.mx-kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px 20px;}
.mx-tracking{padding:10px 12px;border:1px solid #24314d;border-radius:8px;background:#161a20;}
.mx-kv{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:baseline;font-size:12px;min-width:0;}
.mx-k{color:#8a8f98;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.mx-v{min-width:0;overflow-wrap:anywhere;}
.mx-notes-block{display:flex;gap:12px;align-items:flex-start;}
.mx-notes-full{flex:1;white-space:pre-wrap;font-size:12px;line-height:1.5;padding:8px 12px;border-left:3px solid #88097a;background:#161a20;border-radius:0 6px 6px 0;}
.mx-dtabs{display:flex;gap:6px;border-bottom:1px solid #24314d;padding-bottom:8px;}
.mx-dtab{padding:3px 10px;border:1px solid #3a4a5a;border-radius:8px;background:#222c37;color:#cfe1ff;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;}
.mx-dtab.active{background:#88097a;color:#fff;border-color:#e06fff;}
.mx-dtab.active .pill-count{background:rgba(255,255,255,0.25);}
.mx-dpanel .modal-input{width:100%;box-sizing:border-box;margin-bottom:8px;font-size:12px;padding:6px 10px;}
.mx-dtable{width:100%;border-collapse:collapse;font-size:12px;}
.mx-dtable th{text-align:left;color:#9aa0aa;font-size:11px;font-weight:600;padding:5px 8px;border-bottom:1px solid #2a2f3a;position:sticky;top:0;background:#1b1b1b;}
.mx-dtable td{padding:5px 8px;border-bottom:1px solid #1c1f26;vertical-align:top;}
.mx-pad{padding:12px 4px;}

/* ---- Responsive / mobile ---- */
@media (max-width:768px){
  body{margin:0 6px 18px 6px;}
  /* Update status bar pinned to the bottom-right on mobile */
  #updateStatus{position:fixed;top:auto;left:auto;bottom:10px;right:10px;display:inline-flex;flex-wrap:wrap;align-items:center;margin:0;box-shadow:0 2px 12px rgba(0,0,0,.5);z-index:9999;}
  .search-bar{flex-wrap:wrap;gap:8px;margin:10px 0;}
  .search-input-wrap{flex:1 1 100%;max-width:none;}
  #ticketSearch{font-size:16px;} /* prevents iOS zoom-on-focus */
  .new-ticket-btn{flex:0 0 auto;}
  /* Replace the wrapping pill row with a compact dropdown */
  .agent-filter{display:none;}
  .agent-select{display:block;}
  .new-tickets-header{height:44px;}
  .sections-tab-bar{height:auto;padding:6px 8px;flex-wrap:wrap;}
  .sections-content,.new-tickets-body{padding:6px 6px 6px 8px;}

  /* Stats: summary cards 2-per-row, breakdown blocks stacked under them */
  .stats-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 16px;}
  .stat-card{flex:none;min-width:0;padding:10px 12px;}
  .stat-card .num{font-size:22px;}
  .stats-grid{display:block;}
  .stats-block{min-width:0;margin-bottom:16px;}

  /* Card layout: row 1 = title, row 2 = pills (collapsed shows just those two) */
  .tickets-list{display:block;}
  .ticket-head{display:none;}                 /* hide column headers */
  .ticket-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:8px;cursor:pointer;
    margin:10px 0;padding:11px 14px 11px 30px;border:1px solid #2a2f3a;border-radius:10px;background:#15171c;grid-template-columns:none;}
  .ticket-row[data-ticket-id]:hover{background:#15171c;}   /* no hover tint on touch */
  .ticket-row.row-selected{background:#1d1526;}
  .ticket-row.row-selected .tc-id{box-shadow:none;}        /* no stray accent bar on mobile */

  /* Unread cards: brighter border + a splat in the top-right corner */
  .ticket-row[data-unread='1']{border-color:#8a909c;}
  .ticket-row[data-unread='1']::before{content:'*';position:absolute;top:-11px;right:-4px;
    color:#e06fff;font-weight:bold;font-size:28px;line-height:1;pointer-events:none;z-index:2;}
  .ticket-row[data-unread='1'] .unread-icon .unread-splat{display:none;}

  /* Title: full first row, single line with ellipsis (never wraps) */
  .tc-subject{order:-3;flex:1 1 100%;min-width:0;display:block;font-size:14px;font-weight:400;line-height:1.3;color:#cfd3da;
    padding:0 10px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tc-subject.unread-subject{font-weight:700;color:#fff;}
  .tc-subject .subject-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* Pills row: read pill + status + agent (no labels) */
  .tc-status,.tc-agent,.tc-unread{order:-2;flex:0 0 auto;display:flex;align-items:center;padding:0;position:static;}
  .tc-unread:empty{display:none;}
  .ticket-row .tc-status[data-label]::before,.ticket-row .tc-agent[data-label]::before{content:none;}
  .tc-type .type-btn{font-size:10px;padding:2px 10px;margin:0;}

  /* Detail rows (expanded): each full-width with an aligned label */
  .tc-type,.tc-requester,.tc-snoozed,.tc-created,.tc-updated,.tc-timeopen{order:0;flex:1 1 100%;
    display:grid;grid-template-columns:84px 1fr;align-items:center;justify-items:start;gap:10px;font-size:13px;}
  .tc-type:empty{display:none;}
  .tc-type::before{content:'TAGS';color:#8a8f98;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
  .tc[data-label]::before{content:attr(data-label);color:#8a8f98;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}

  /* Ticket # flush in the top-right corner; read toggle to its left */
  .tc-id{order:-1;flex:0 0 auto;margin-left:auto;position:static;display:block;font-size:12px;line-height:1;}
  .tc-id[data-label]::before{content:none;}

  /* Action button at the bottom */
  .tc-actions{order:9;flex:1 1 100%;display:block;margin-top:2px;}
  .ticket-row .btn-unsnooze,.ticket-row .btn-dismiss,.ticket-row .snooze-btn{padding:6px 14px;font-size:12px;}

  /* Expand/collapse chevron; collapsed hides the detail rows + action */
  .ticket-row::after{content:'▸';position:absolute;top:12px;left:11px;color:#8a8f98;font-size:13px;}
  .ticket-row.expanded::after{content:'▾';}
  .ticket-row:not(.expanded) .tc-type,
  .ticket-row:not(.expanded) .tc-requester,
  .ticket-row:not(.expanded) .tc-snoozed,
  .ticket-row:not(.expanded) .tc-created,
  .ticket-row:not(.expanded) .tc-updated,
  .ticket-row:not(.expanded) .tc-timeopen,
  .ticket-row:not(.expanded) .tc-actions{display:none;}
}