:root{
 --bg:#f7f8fa;--fg:#1f2937;--mute:#6b7280;--brand:#0b5fff;
 --card:#fff;--bd:#e5e7eb;--bd2:#d1d5db;
 --bad:#dc2626;--good:#059669;--warn:#d97706;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
     background:var(--bg);color:var(--fg)}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:.4em 0}
small{font-size:.85em}

/* layout */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.25rem;background:#fff;border-bottom:1px solid var(--bd);
  position:sticky;top:0;z-index:100}
.brand{font-weight:700;color:var(--fg);display:flex;align-items:center;gap:.6rem;
  text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo{max-height:32px;width:auto}
.topbar nav{display:flex;align-items:center}
.topbar nav a{margin-left:1rem;white-space:nowrap}

/* active link - bottom-bar indicator */
.nav-active{font-weight:600;color:var(--fg)!important;
  border-bottom:2px solid var(--brand);padding-bottom:2px}
.nav-active:hover{text-decoration:none}

/* + New pill CTA */
.nav-new-btn{background:var(--brand);color:#fff!important;
  padding:.22rem .8rem;border-radius:999px;font-weight:600;font-size:.88rem;
  line-height:1.5;transition:filter .15s,background .15s}
.nav-new-btn:hover{filter:brightness(1.1);text-decoration:none!important}

/* user-area group with left separator */
.nav-user-group{display:inline-flex;align-items:center;
  margin-left:1.25rem;padding-left:1.25rem;
  border-left:1px solid var(--bd2);gap:0}
.nav-user-group > a{margin-left:.55rem}
[data-theme="dark"] .nav-user-group{border-color:var(--bd2)}

/* hide profile text label on desktop - shown only in mobile drawer */
.nav-profile-text{display:none}

/* profile icon button */
.nav-profile-icon{display:inline-flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;border-radius:50%;
  border:1px solid var(--bd2);color:var(--mute);
  transition:background .15s,border-color .15s,color .15s}
.nav-profile-icon:hover{background:var(--bg);border-color:var(--brand);
  color:var(--brand);text-decoration:none!important}
[data-theme="dark"] .nav-profile-icon{border-color:var(--bd2)}

/* hamburger toggle (hidden on desktop) */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;
  padding:.35rem .45rem;font-size:1.25rem;line-height:1;color:var(--fg);
  border-radius:4px;margin-left:.5rem}
.nav-toggle:hover{background:var(--bg)}
/* overlay behind the mobile nav drawer */
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99}
.nav-overlay.active{display:block}

@media (max-width:640px){
  .nav-toggle{display:block}
  .topbar nav{
    position:fixed;inset:0 0 0 auto;width:min(260px,80vw);
    background:var(--card);border-left:1px solid var(--bd);
    flex-direction:column;align-items:stretch;
    padding:4.5rem 0 2rem;z-index:100;
    box-shadow:-4px 0 24px rgba(0,0,0,.18);
    transform:translateX(100%);transition:transform .22s ease;
  }
  .topbar nav.nav-open{transform:translateX(0)}
  .topbar nav a{margin-left:0;padding:.65rem 1.5rem;
    border-bottom:1px solid var(--bd);font-size:.95rem;display:block}
  .topbar nav a:last-child{border-bottom:none}
  /* reset desktop-only styles on mobile */
  .nav-new-btn{background:none;color:var(--brand)!important;
    border-radius:0;padding:.65rem 1.5rem;font-size:.95rem}
  .nav-active{border-bottom:none;padding-bottom:0;
    background:rgba(11,95,255,.07);color:var(--brand)!important}
  .nav-user-group{display:flex;flex-direction:column;border-left:none;
    margin-left:0;padding-left:0;border-top:1px solid var(--bd);width:100%}
  .nav-user-group > a{margin-left:0}
  .nav-profile-icon{width:auto;height:auto;border:none;border-radius:0;
    padding:.65rem 1.5rem;justify-content:flex-start;gap:.5rem;color:var(--fg)}
  .nav-profile-text{display:inline}
}

.container{max-width:1400px;margin:1.25rem auto;padding:0 1rem}
@media (max-width:480px){.container{padding:0 .75rem;margin:.75rem auto}}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}
@media (max-width:480px){
  .page-head{flex-direction:column;align-items:flex-start}
  .page-head>div{display:flex;flex-wrap:wrap;gap:.35rem}
  .page-head>div .btn,.page-head>div .btn-secondary,.page-head>div .btn-danger{margin-right:0}
}

/* cards */
.card{background:var(--card);border:1px solid var(--bd);border-radius:8px;
  padding:1rem 1.25rem;margin-bottom:1rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* scrollable home page ticket lists */
.ticket-list{list-style:none;padding:0;margin:0;max-height:320px;overflow-y:auto}
.ticket-list li a{display:flex;align-items:baseline;gap:.5rem;padding:.45rem .25rem;
  border-bottom:1px solid var(--bd);text-decoration:none;color:inherit;flex-wrap:wrap}
.ticket-list li a:hover{background:var(--bg)}
.ticket-list li:last-child a{border-bottom:none}
.ticket-list .tl-number{font-weight:600;white-space:nowrap;flex-shrink:0}
.ticket-list .tl-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ticket-list .tl-meta{display:flex;gap:.35rem;flex-shrink:0;align-items:center}
@media (max-width:800px){.grid-2{grid-template-columns:1fr}}

/* list page */
.layout{display:grid;grid-template-columns:260px 1fr;gap:1rem;align-items:start}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .layout .filters.card{order:2}   /* table first, filters below on mobile */
  .layout section.list{order:1}
}
.filters .field{margin-bottom:.6rem}
.filters label{display:block;font-size:.82rem;color:var(--mute);margin-bottom:.15rem}

/* collapsible filter header on mobile */
.filters-toggle-btn{display:none;width:100%;background:none;border:none;
  font:inherit;font-weight:700;font-size:1rem;padding:.2rem 0;color:var(--fg);
  text-align:left;cursor:pointer;justify-content:space-between;align-items:center}
.filters-toggle-caret{font-size:.75rem;color:var(--mute);transition:transform .18s}
.filters.filters-open .filters-toggle-caret{transform:rotate(180deg)}
.filters-body{display:block}
@media (max-width:900px){
  .filters-toggle-btn{display:flex}
  .filters h3{display:none}
  .filters-body{display:none}
  .filters.filters-open .filters-body{display:block}
}

/* horizontal scroll for wide tables on mobile */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px}

/* constrained form width for readability */
.form-card{width:100%;margin-left:auto;margin-right:auto}

/* login page */
.login-wrap{max-width:420px;margin:3rem auto}
.login-logo{text-align:center;margin-bottom:1rem}
.login-logo img{max-height:60px}
.login-title{text-align:center;margin-top:0}
.login-note{text-align:center}
@media (max-width:480px){.login-wrap{margin:1.5rem auto}}
.input{width:100%;padding:.4rem .5rem;border:1px solid var(--bd2);border-radius:6px;
  background:#fff;font:inherit}
.input:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
select.input{background:#fff}

.btn,.btn-secondary,.btn-danger{display:inline-block;padding:.45rem .9rem;
  border-radius:6px;border:1px solid;cursor:pointer;font:inherit;
  margin-right:.35rem;text-align:center;
  transition:filter .15s,background .15s,border-color .15s,color .15s}
.btn{background:var(--brand);border-color:var(--brand);color:#fff}
.btn:hover{filter:brightness(1.05);text-decoration:none}
.btn-secondary{background:#fff;border-color:var(--bd2);color:var(--fg)}
.btn-secondary:hover{background:#f3f4f6;text-decoration:none}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}

.ticket-table{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.ticket-table th,.ticket-table td{padding:.5rem .65rem;border-bottom:1px solid var(--bd);
  text-align:left;font-size:.92rem;vertical-align:top}
.ticket-table th{background:#f3f4f6;font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.ticket-table tr:last-child td{border-bottom:none}
.ticket-table tr:hover{background:#fafafa}
.row-overdue{background:#fff7ed}
.row-overdue:hover{background:#ffedd5}

.pagination{display:flex;gap:.6rem;align-items:center;justify-content:center;
  padding:1rem 0}

/* badges + chips */
.badge{display:inline-block;padding:.1rem .5rem;border-radius:.25rem;
  background:#eef2ff;color:#3730a3;font-size:.78rem;line-height:1.4;font-weight:600}
.badge.bad{background:#fee2e2;color:#991b1b}
.badge.good{background:#d1fae5;color:#065f46}
.badge.s-draft{background:#fef3c7;color:#78350f;border:1px dashed #f59e0b}
.badge.s-new{background:#e0f2fe;color:#075985}
.badge.s-triage{background:#fef9c3;color:#854d0e}
.badge.s-assigned{background:#dbeafe;color:#1e40af}
.badge.s-indev{background:#ede9fe;color:#5b21b6}
.badge.s-wait_req{background:#fef3c7;color:#92400e}
.badge.s-wait_tr{background:#fef3c7;color:#92400e}
.badge.s-test{background:#cffafe;color:#155e75}
.badge.s-resolved{background:#d1fae5;color:#065f46}
.badge.s-closed{background:#e5e7eb;color:#374151}
.badge.s-assign_fail{background:#fee2e2;color:#991b1b}
.badge.s-withdrawn{background:#fee2e2;color:#991b1b}
.badge.s-rejected{background:#fee2e2;color:#991b1b}
.badge.u-low{background:#e0e7ff;color:#3730a3}
.badge.u-normal{background:#dbeafe;color:#1e40af}
.badge.u-high{background:#fef3c7;color:#92400e}
.badge.u-critical{background:#fee2e2;color:#991b1b}

.chip{display:inline-block;padding:.1rem .5rem;border-radius:999px;
  background:#f3f4f6;color:#374151;font-size:.8rem;margin:.1rem .15rem}
.chip-sm{font-size:.7rem;padding:.05rem .35rem;margin:.05rem .1rem}
.chips{list-style:none;padding:0;margin:.4rem 0;display:flex;flex-wrap:wrap;gap:.2rem}
.chips .chip a{margin-left:.3rem;color:var(--bad);font-weight:700}

/* key-value tables */
.kv{border-collapse:collapse;width:100%}
.kv th,.kv td{padding:.4rem .8rem;border-bottom:1px solid var(--bd);text-align:left;
  vertical-align:middle}
.kv th{font-weight:600;color:var(--mute);width:18%}
.kv-2col th{width:14%}

/* forms */
.form-stack{display:flex;flex-direction:column;gap:.6rem}
.form-stack .field{display:flex;flex-direction:column;gap:.2rem}
.form-stack label{font-size:.85rem;color:var(--mute)}
.actions{margin-top:.5rem}
.inline-form{display:flex;gap:.4rem;align-items:center;margin-top:.6rem;flex-wrap:wrap}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.err{color:var(--bad);font-size:.85rem}

/* interactions */
.interaction{border-left:4px solid var(--bd2);padding:.6rem .8rem;margin-bottom:.6rem;
  background:#fafafa;border-radius:0 6px 6px 0}
.interaction.kind-question{border-left-color:#f59e0b;background:#fffbeb}
.interaction.kind-answer{border-left-color:#10b981;background:#ecfdf5}
.interaction.kind-decision{border-left-color:#6366f1;background:#eef2ff}
.sup-round{margin:.3rem 0;padding:.35rem .6rem;border-left:3px solid #6366f1;background:#eef2ff;border-radius:0 4px 4px 0;font-size:.85rem}
.interaction.internal{border-left-color:#9ca3af;background:#f3f4f6}
.interaction header{margin-bottom:.3rem;font-size:.9rem;display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.interaction header .interaction-meta{flex:1;min-width:0}
.interaction .body{}
.interaction.deleted{opacity:.7;border-left-color:#9ca3af!important;background:#f3f4f6!important;
  padding-top:.35rem;padding-bottom:.35rem}
.btn-icon{background:transparent;border:none;cursor:pointer;padding:.15rem .3rem;border-radius:4px;
  line-height:1;color:var(--bad);opacity:.45;font-size:.95rem}
.btn-icon:hover{opacity:1;background:rgba(239,68,68,.12)}
.btn-icon.restore{color:var(--brand)}
.btn-icon.restore:hover{background:rgba(37,99,235,.12)}
/* Interactions tab: enlarge the delete (trashcan) icon and make it more
   visible than the default faint btn-icon, so it is easy to spot per message. */
.interaction .btn-icon{font-size:1.35rem;opacity:.7;padding:.2rem .45rem}
.interaction .btn-icon:hover{opacity:1}

.note{border-left:4px solid #9ca3af;background:#f3f4f6;padding:.6rem .8rem;
  margin-bottom:.5rem;border-radius:0 6px 6px 0;font-size:.92rem}

.attachments{list-style:none;padding:0;margin:.4rem 0}
.attachments li{padding:.2rem 0}
.attachments.small li{font-size:.85rem}

.timeline{list-style:none;padding:0;margin:.4rem 0}
.timeline li{padding:.25rem 0;border-bottom:1px dashed var(--bd);font-size:.9rem}
.timeline.mono li{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.muted{color:var(--mute)}
.overdue{color:var(--bad);font-weight:700;margin-left:.3rem}
.prose{}

/* ---- Markdown-rendered content (.prose = description, .interaction .body = messages) ---- */
.prose p,.interaction .body p{margin:.35em 0}
.prose p:first-child,.interaction .body p:first-child{margin-top:0}
.prose p:last-child,.interaction .body p:last-child{margin-bottom:0}
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6,
.interaction .body h1,.interaction .body h2,.interaction .body h3,
.interaction .body h4,.interaction .body h5,.interaction .body h6{
  margin:.75em 0 .25em;font-weight:700;line-height:1.25}
.prose h1,.interaction .body h1{font-size:1.35em}
.prose h2,.interaction .body h2{font-size:1.2em}
.prose h3,.interaction .body h3{font-size:1.07em}
.prose h4,.prose h5,.prose h6,.interaction .body h4,.interaction .body h5,.interaction .body h6{font-size:1em}
.prose ul,.prose ol,.interaction .body ul,.interaction .body ol{margin:.35em 0;padding-left:1.6em}
.prose li,.interaction .body li{margin:.15em 0}
.prose table,.interaction .body table{border-collapse:collapse;width:100%;margin:.5em 0;font-size:.9em}
.prose th,.prose td,.interaction .body th,.interaction .body td{
  border:1px solid var(--bd);padding:.3em .6em;text-align:left;vertical-align:top}
.prose thead tr,.interaction .body thead tr{background:var(--bg);font-weight:600}
.prose code,.interaction .body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.87em;background:var(--bg);padding:.1em .3em;border-radius:3px}
.prose pre,.interaction .body pre{
  background:var(--bg);border:1px solid var(--bd);border-radius:4px;
  padding:.65em 1em;overflow-x:auto;margin:.5em 0}
.prose pre code,.interaction .body pre code{background:transparent;padding:0}
.prose blockquote,.interaction .body blockquote{
  border-left:3px solid var(--brand);margin:.4em 0;
  padding:.25em .75em;color:var(--mute)}
.prose hr,.interaction .body hr{border:none;border-top:1px solid var(--bd);margin:.65em 0}
.prose strong,.interaction .body strong{font-weight:700}
.prose em,.interaction .body em{font-style:italic}

/* ticket detail - team info: 2-column grid */
.detail-team-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.5rem;
  margin-top:.75rem;padding-top:.75rem}
@media (max-width:560px){.detail-team-grid{grid-template-columns:1fr}}
.detail-team-cell{display:flex;flex-direction:column;gap:.2rem}
.detail-team-cell--wide{grid-column:1/-1}
.detail-team-label{font-size:.78rem;font-weight:600;color:var(--mute);
  text-transform:uppercase;letter-spacing:.04em}
.detail-team-value{display:flex;flex-wrap:wrap;gap:.2rem;align-items:center;
  min-height:1.4rem}

/* inline status dropdown in kv table */
.status-dd{position:relative;display:inline-block}
.status-dd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.25rem}
.status-dd summary::-webkit-details-marker{display:none}
.status-dd-panel{position:absolute;top:calc(100% + .3rem);left:0;z-index:50;
  background:var(--card);border:1px solid var(--bd);border-radius:6px;padding:.5rem .6rem;
  min-width:11rem;box-shadow:0 4px 16px rgba(0,0,0,.14)}
.status-dd-panel form{display:flex;flex-direction:column;gap:.3rem}
.status-dd-panel select,.status-dd-panel .input{font-size:.85rem;padding:.2rem .4rem}
.status-dd-panel .btn{font-size:.8rem;padding:.2rem .55rem;align-self:flex-start}
.status-dd .picker-caret{font-size:1rem;line-height:1}

/* team cell inline add-user dropdown */
.detail-team-label-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.user-add-dd{position:relative}
.user-add-btn{list-style:none;cursor:pointer;color:var(--mute);background:var(--bg);
  border:1px solid var(--bd);border-radius:50%;width:1.25rem;height:1.25rem;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:600;line-height:1;user-select:none;flex-shrink:0}
.user-add-btn:hover{background:var(--bd)}
.user-add-btn::-webkit-details-marker{display:none}
.user-add-panel{position:absolute;top:calc(100% + .3rem);left:0;z-index:50;
  background:var(--card);border:1px solid var(--bd);border-radius:6px;
  padding:.5rem .6rem;min-width:14rem;max-width:18rem;
  box-shadow:0 4px 16px rgba(0,0,0,.14);display:flex;flex-direction:column;gap:.3rem}
.user-add-panel .picker-options{max-height:12rem;overflow-y:auto;display:flex;
  flex-direction:column;gap:.05rem}
.user-add-panel .picker-option{display:flex;align-items:center;gap:.4rem;
  padding:.2rem .1rem;cursor:pointer;font-size:.88rem}
.user-add-submit{font-size:.8rem;padding:.2rem .55rem;align-self:flex-start;margin-top:.15rem}

/* attachment image preview */
.att-preview{background:none;border:none;cursor:pointer;color:var(--brand);
  font-size:.8rem;padding:0 .3rem;text-decoration:underline;vertical-align:middle}
.att-preview:hover{opacity:.75}
.img-preview{margin-top:.4rem}
.img-preview img{max-width:100%;max-height:28rem;border-radius:4px;
  border:1px solid var(--bd);display:block}

/* ticket detail - actions: 2-column grid (pickers side by side) */
.detail-actions-2col{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem;
  margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--bd);align-items:start}
@media (max-width:560px){.detail-actions-2col{grid-template-columns:1fr}}
.detail-action-block{display:flex;flex-direction:column;gap:.3rem;padding:.35rem 0}
.detail-action-block+.detail-action-block{border-top:1px solid var(--bd)}
.detail-action-controls{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.detail-pickers-col{display:flex;flex-direction:column;border-right:1px solid var(--bd);
  padding-right:1.25rem}

/* edit-ticket dialog */
.edit-dialog{border:none;border-radius:10px;padding:0;max-width:640px;width:95%;
  box-shadow:0 20px 60px rgba(0,0,0,.25)}
.edit-dialog::backdrop{background:rgba(0,0,0,.45)}
.edit-dialog-head{display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.25rem;border-bottom:1px solid var(--bd);gap:.5rem}
.edit-dialog-head h2{margin:0;font-size:1.05rem}
.edit-dialog-body{padding:1.25rem;max-height:80vh;overflow-y:auto}
[data-theme="dark"] .edit-dialog{background:var(--card)}
[data-theme="dark"] .edit-dialog-head{border-color:var(--bd)}

/* inner table (subtickets, time tracking - inside cards) */
.inner-table{width:100%;border-collapse:collapse;margin:.5rem 0 .25rem}
.inner-table th,.inner-table td{padding:.4rem .75rem;border-bottom:1px solid var(--bd);
  text-align:left;font-size:.9rem;vertical-align:middle}
.inner-table th{font-weight:600;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--mute);background:#f9fafb;white-space:nowrap}
.inner-table tr:last-child td{border-bottom:none}
[data-theme="dark"] .inner-table th{background:#374151}
[data-theme="dark"] .inner-table th,[data-theme="dark"] .inner-table td{border-color:var(--bd)}

/* section divider within a card */
.card-divider{border:none;border-top:1px solid var(--bd);margin:1rem 0}

/* banners */
.banner-warning{background:#fef9c3;border:1px solid #fbbf24;border-radius:6px;
  padding:.6rem 1rem;margin-bottom:1rem}
.banner-info{background:#eff6ff;border:1px solid #3b82f6;border-radius:6px;
  padding:.5rem 1rem;margin-bottom:.75rem;font-size:.875rem}
[data-theme="dark"] .banner-warning{background:#2a1a00;border-color:#92400e;color:#fde68a}
[data-theme="dark"] .banner-info{background:#0c2030;border-color:#1d4ed8;color:#7dd3fc}

/* superticket selection mode */
.superticket-col{display:none}
body.superticket-selection .superticket-col{display:table-cell}
.ticket-select-cb{cursor:pointer;width:1rem;height:1rem}
.superticket-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  display:none;align-items:center;gap:1rem;flex-wrap:wrap;
  background:#1f2937;color:#fff;padding:.75rem 1.5rem;
  box-shadow:0 -2px 8px rgba(0,0,0,.2);
}
body.superticket-selection .superticket-bar{display:flex}
.superticket-bar .btn{background:var(--brand);border-color:var(--brand)}
.superticket-bar .btn-secondary{background:transparent;border-color:#6b7280;color:#d1d5db}
.superticket-bar .btn-secondary:hover{background:rgba(255,255,255,.08)}
.superticket-ticket-list{list-style:none;padding:0;margin:.4rem 0}
.superticket-ticket-list li{padding:.2rem 0;border-bottom:1px solid var(--bd);font-size:.92rem}
.superticket-ticket-list li:last-child{border-bottom:none}
.warn-box{background:#fff7ed;border:1px solid #fed7aa;border-radius:6px;
  padding:.75rem 1rem;margin-bottom:1rem}
.warn-box p{margin:.25rem 0}

.messages{list-style:none;padding:0;margin:0 0 1rem}
.messages li{padding:.5rem .75rem;border-radius:6px;margin-bottom:.5rem;background:#fef3c7}
.messages li.success{background:#dcfce7}
.messages li.error{background:#fee2e2}
.messages li.warning{background:#fef3c7}
.messages li.info{background:#dbeafe}

.footer{text-align:center;color:var(--mute);padding:1rem;font-size:.85rem}
.footer a{color:var(--mute);text-decoration:none}
.footer a:hover{color:var(--brand);text-decoration:underline}
.footer-sep{margin:0 .4rem;opacity:.6}

details{margin:.5rem 0}
details summary{cursor:pointer;color:var(--brand);padding:.3rem 0}

/* user-picker dropdown */
.user-picker{position:relative;display:inline-block}
.picker-toggle{display:flex;align-items:center;gap:.5rem;
  padding:.4rem .6rem;border:1px solid var(--bd2);border-radius:6px;
  background:var(--card);color:var(--fg);font:inherit;cursor:pointer;
  min-width:11rem;white-space:nowrap}
.picker-toggle:focus{outline:2px solid var(--brand);outline-offset:0}
.picker-caret{margin-left:auto;font-size:.75em;color:var(--mute)}
.picker-panel{position:absolute;z-index:200;top:calc(100% + 3px);left:0;
  min-width:100%;max-height:220px;overflow-y:auto;
  background:var(--card);border:1px solid var(--bd2);border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);padding:.3rem}
.picker-option{display:flex;align-items:center;gap:.5rem;
  padding:.3rem .5rem;border-radius:4px;cursor:pointer;
  font-size:.9rem;white-space:nowrap;user-select:none}
.picker-option:hover{background:var(--bg)}
.picker-option input[type=checkbox]{cursor:pointer;flex-shrink:0}
[data-theme="dark"] .picker-panel{box-shadow:0 4px 12px rgba(0,0,0,.4)}

/* topbar height custom property (used by JS sticky header clone) */
:root{ --topbar-h: 46px }

/* clickable rows */
.ticket-table tbody tr[data-href]{cursor:pointer}

/* sort column indicators */
th[data-sort]{user-select:none;cursor:pointer}
th[data-sort]:hover{background:#e9eaec;color:var(--fg)}
[data-theme="dark"] th[data-sort]:hover{background:#4b5563}
.sort-ind{color:var(--brand);font-size:.75rem;margin-left:.25rem}

/* active filter badge on filter panel */
.filter-badge{display:inline-flex;align-items:center;justify-content:center;
  width:1.2rem;height:1.2rem;border-radius:50%;background:var(--brand);color:#fff;
  font-size:.7rem;font-weight:700;margin-left:.4rem;flex-shrink:0;line-height:1}

/* click-to-copy ticket number */
.copy-number{cursor:pointer;border-radius:4px;padding:.05rem .25rem;
  transition:background .15s,color .15s}
.copy-number:hover{background:var(--bd)}

/* section-level collapsible (status history, audit log) */
.section-summary{cursor:pointer;user-select:none;list-style:none;
  display:flex;align-items:center;gap:.5rem;padding:.1rem 0}
.section-summary::-webkit-details-marker{display:none}
.section-summary h2{margin:0;display:inline}
.section-summary::after{content:'▸';font-size:.8rem;color:var(--mute);
  margin-left:auto;transition:transform .2s}
details[open] > .section-summary::after{transform:rotate(90deg)}

/* ── Notification channel toggle pill ───────────────────────────────── */
/* Used on the profile page for Email / Teams / Bell toggles. */
.notif-toggle{display:inline-flex;align-items:center;gap:.45rem;
  padding:.32rem .75rem;border-radius:999px;
  border:1px solid var(--bd2);background:#fff;
  color:var(--mute);cursor:pointer;font:inherit;font-size:.85rem;
  transition:background .15s,border-color .15s,color .15s;line-height:1.4}
.notif-toggle:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.notif-toggle:disabled{opacity:.45;cursor:default}
.notif-toggle-dot{width:9px;height:9px;border-radius:50%;
  background:var(--bd2);flex-shrink:0;
  transition:background .15s}
/* ON state */
.notif-toggle.notif-toggle-on{background:var(--brand);border-color:var(--brand);
  color:#fff}
.notif-toggle.notif-toggle-on .notif-toggle-dot{background:rgba(255,255,255,.85)}
.notif-toggle.notif-toggle-on:hover{filter:brightness(1.08)}
[data-theme="dark"] .notif-toggle{background:transparent;border-color:var(--bd2)}
[data-theme="dark"] .notif-toggle.notif-toggle-on{background:var(--brand)}

/* ── Notification bell ───────────────────────────────────────────────── */
.notif-wrap{position:relative;display:inline-flex}
.notif-bell{position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:1.9rem;height:1.9rem;border-radius:50%;
  border:1px solid var(--bd2);background:none;cursor:pointer;
  color:var(--mute);transition:background .15s,border-color .15s,color .15s;
  margin-left:.55rem;padding:0;flex-shrink:0}
.notif-bell:hover{background:var(--bg);border-color:var(--brand);color:var(--brand)}
.notif-bell.has-unread{color:var(--bad);border-color:var(--bad)}
[data-theme="dark"] .notif-bell{border-color:var(--bd2)}

/* Red badge number */
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;
  padding:0 3px;background:var(--bad);color:#fff;border-radius:999px;
  font-size:9px;font-weight:700;line-height:16px;text-align:center;
  display:none;pointer-events:none;white-space:nowrap}
.notif-badge.visible{display:block}

/* Dropdown panel */
.notif-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;
  width:340px;max-height:460px;overflow-y:auto;
  background:var(--card);border:1px solid var(--bd);border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.13);z-index:200}
.notif-dropdown.open{display:flex;flex-direction:column}
[data-theme="dark"] .notif-dropdown{box-shadow:0 8px 32px rgba(0,0,0,.4)}

/* Dropdown header row */
.notif-header{display:flex;align-items:center;justify-content:space-between;
  padding:.6rem .9rem;border-bottom:1px solid var(--bd);flex-shrink:0}
.notif-header strong{font-size:.9rem}
.notif-mark-all{background:none;border:none;cursor:pointer;font:inherit;
  font-size:.78rem;color:var(--brand);padding:0;line-height:1}
.notif-mark-all:hover{text-decoration:underline}
.notif-mark-all:disabled{color:var(--mute);cursor:default;text-decoration:none}

/* Empty state */
.notif-empty{padding:1.5rem;text-align:center;color:var(--mute);font-size:.88rem}

/* Individual notification item (grouped by ticket) */
.notif-item{display:block;padding:.65rem .9rem;border-bottom:1px solid var(--bd);
  color:var(--fg);text-decoration:none;cursor:pointer;transition:background .1s;
  position:relative}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--bg);text-decoration:none}
/* Unread: subtle blue tint + left accent bar */
.notif-item.unread{background:rgba(11,95,255,.045);
  border-left:3px solid var(--brand);padding-left:calc(.9rem - 3px)}
[data-theme="dark"] .notif-item.unread{background:rgba(11,95,255,.1)}

/* Title row: ticket name + "N new" badge */
.notif-title{display:flex;align-items:baseline;gap:.4rem;
  font-weight:600;font-size:.88rem;margin-bottom:.25rem;flex-wrap:wrap}
.notif-title > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;flex:1}
.notif-new-badge{background:var(--bad);color:#fff;border-radius:999px;
  font-size:.7rem;font-weight:700;padding:.05rem .38rem;
  white-space:nowrap;flex-shrink:0;line-height:1.5}

/* Meta row: kind · from actor · time (right-aligned) */
.notif-meta{display:flex;align-items:center;gap:.35rem;font-size:.76rem;
  color:var(--mute);flex-wrap:wrap;margin-bottom:.15rem}
.notif-kind{font-weight:500}
.notif-from-inline{color:var(--mute)}
.notif-time{margin-left:auto;white-space:nowrap;flex-shrink:0}

/* Body preview: 2-line clamp */
.notif-preview{font-size:.81rem;color:var(--mute);margin:.1rem 0 0;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;word-break:break-word}

/* Mobile: full-width dropdown fixed to top of viewport */
@media (max-width:640px){
  .notif-dropdown{position:fixed;top:56px;right:.5rem;left:.5rem;width:auto;
    max-height:70vh;border-radius:8px}
}

/* inline quick-edit dropdown (urgency / due-date) */
.inline-edit-dd{position:relative;display:inline-block}
.inline-edit-dd > summary{list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.3rem}
.inline-edit-dd > summary::-webkit-details-marker{display:none}
.inline-edit-hint{font-size:.75rem;color:var(--mute);opacity:.45;
  transition:opacity .15s}
.inline-edit-dd > summary:hover .inline-edit-hint{opacity:.9}
.inline-edit-panel{position:absolute;top:calc(100% + .3rem);left:0;z-index:60;
  background:var(--card);border:1px solid var(--bd);border-radius:6px;
  padding:.5rem .65rem;min-width:11rem;box-shadow:0 4px 16px rgba(0,0,0,.14)}
[data-theme="dark"] .inline-edit-panel{box-shadow:0 4px 16px rgba(0,0,0,.4)}
.inline-edit-panel form{display:flex;flex-direction:column;gap:.3rem}
.inline-edit-panel select,.inline-edit-panel .input{font-size:.85rem;padding:.2rem .4rem}
.inline-edit-panel .btn{font-size:.8rem;padding:.2rem .55rem;align-self:flex-start}

/* auto-resize textareas */
textarea.input{overflow:hidden;resize:none;min-height:5rem}
/* description field scales with viewport height so it fills large monitors */
[data-field="description"] textarea.input{min-height:max(14rem, 35vh)}

/* search input inside user-picker panels */
.picker-search{font-size:.83rem;padding:.3rem .45rem;margin-bottom:.35rem;width:100%}

/* column visibility picker */
.col-picker-wrap{position:relative;display:inline-block;vertical-align:middle}
.btn-col-picker{background:none;border:1px solid var(--bd2);border-radius:6px;
  padding:.38rem .55rem;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--mute);
  display:inline-flex;align-items:center;transition:color .15s,background .15s}
.btn-col-picker:hover{background:var(--bg);color:var(--fg)}
.col-picker-panel{position:absolute;right:0;top:calc(100% + 4px);
  background:var(--card);border:1px solid var(--bd);border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);padding:.5rem 0;min-width:155px;
  z-index:200;display:none}
.col-picker-panel.open{display:block}
.col-picker-title{padding:.2rem .85rem .4rem;font-size:.75rem;font-weight:600;
  color:var(--mute);text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--bd);margin-bottom:.3rem}
.col-picker-panel label{display:flex;align-items:center;gap:.55rem;
  padding:.32rem .85rem;cursor:pointer;font-size:.88rem;white-space:nowrap;
  user-select:none}
.col-picker-panel label:hover{background:var(--bg)}
.col-picker-panel input[type=checkbox]{cursor:pointer;flex-shrink:0}
[data-theme="dark"] .col-picker-panel{box-shadow:0 4px 16px rgba(0,0,0,.4)}
[data-theme="dark"] .col-picker-panel label:hover{background:#293548}

/* ── Response template picker ──────────────────────────────── */
.tpl-picker-wrap{position:relative}
.tpl-picker{position:absolute;top:.35rem;right:.35rem;z-index:10}
.tpl-trigger{
  display:flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;padding:0;
  background:var(--card);border:1px solid var(--bd2);border-radius:4px;
  cursor:pointer;color:var(--mute);opacity:.5;
  transition:opacity .15s,color .15s,border-color .15s}
.tpl-trigger:hover{opacity:1;color:var(--brand);border-color:var(--brand)}
.tpl-panel{
  position:absolute;top:calc(100% + .25rem);right:0;
  background:var(--card);border:1px solid var(--bd2);border-radius:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  min-width:200px;max-width:320px;padding:.3rem 0;z-index:200}
.tpl-option{
  display:block;width:100%;background:none;border:none;
  text-align:left;padding:.38rem .75rem;cursor:pointer;
  font-size:.85rem;color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-option:hover{background:var(--bg);color:var(--brand)}
[data-theme="dark"] .tpl-panel{box-shadow:0 4px 16px rgba(0,0,0,.4)}
[data-theme="dark"] .tpl-option:hover{background:#293548}

/* paste-to-attach zone */
.paste-zone{border:2px dashed var(--bd2);border-radius:6px;padding:.45rem .9rem;
  color:var(--mute);font-size:.85em;text-align:center;margin-top:.35rem;
  transition:border-color .25s,background .25s,color .25s}
.paste-zone kbd{background:var(--bg);border:1px solid var(--bd2);border-radius:3px;
  padding:.05rem .35rem;font:inherit;font-size:.9em}
.paste-zone--pasted{border-color:var(--good);background:#f0fdf4;color:var(--good)}
[data-theme="dark"] .paste-zone--pasted{background:#022c22}
.paste-thumbs{list-style:none;padding:0;margin:.35rem 0 0;
  display:flex;flex-wrap:wrap;gap:.4rem}
.paste-thumbs li{position:relative;display:flex;align-items:center;gap:.4rem;
  background:var(--bg);border:1px solid var(--bd);border-radius:5px;
  padding:.2rem .5rem;font-size:.82rem;color:var(--mute)}
.paste-thumbs li img{height:28px;width:auto;border-radius:3px;object-fit:cover}
/* "x" button to discard a pasted screenshot before submitting; sits at the
   top-right corner of the thumbnail. */
.paste-thumb-remove{position:absolute;top:-7px;right:-7px;width:18px;height:18px;
  padding:0;border:1px solid var(--bd);border-radius:50%;background:var(--card);
  color:var(--bad);font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.paste-thumb-remove:hover{background:var(--bad);color:#fff;border-color:var(--bad)}

/* topbar logout link */
.nav-logout{display:inline-flex;align-items:center;gap:.35rem;
  padding:.2rem .55rem;border-radius:6px;border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s!important}
.nav-logout:hover{background:rgba(220,38,38,.08);border-color:var(--bad);
  color:var(--bad)!important;text-decoration:none!important}
.nav-logout svg{flex-shrink:0}
[data-theme="dark"] .nav-logout:hover{background:rgba(248,113,113,.1)}

/* dashboard */
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;
  margin-bottom:1rem}
@media (max-width:1100px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#fff;border:1px solid var(--bd);border-radius:8px;padding:.9rem 1rem}
.kpi-label{color:var(--mute);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:.25rem}
.kpi-value{font-size:1.85rem;font-weight:700;color:var(--fg);line-height:1.1}
.kpi-bad{background:#fff7ed;border-color:#fdba74}
.kpi-bad .kpi-value{color:var(--bad)}
.grid-span{grid-column:1 / -1}

/* ============================================================
   DARK MODE  - applied when <html data-theme="dark"> is set.
   html[data-theme="dark"] has specificity (0,1,1) which beats
   :root (0,1,0), ensuring these variables always take precedence.
   ============================================================ */
html[data-theme="dark"]{
  --bg:#111827;--fg:#f3f4f6;--mute:#9ca3af;--brand:#60a5fa;
  --card:#1f2937;--bd:#374151;--bd2:#4b5563;
  --bad:#f87171;--good:#34d399;--warn:#fbbf24;
}
[data-theme="dark"] body{background:var(--bg);color:var(--fg)}
[data-theme="dark"] .topbar{background:#1f2937;border-color:var(--bd)}
[data-theme="dark"] .input{background:#111827;color:var(--fg);border-color:var(--bd2)}
[data-theme="dark"] select.input,[data-theme="dark"] select.input option{background:#111827;color:var(--fg)}
[data-theme="dark"] textarea.input{background:#111827;color:var(--fg)}
[data-theme="dark"] .btn-secondary{background:#374151;border-color:var(--bd2);color:var(--fg)}
[data-theme="dark"] .btn-secondary:hover{background:#4b5563}
/* tables */
[data-theme="dark"] .ticket-table{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .ticket-table th{background:#374151;color:var(--mute);border-color:var(--bd)}
[data-theme="dark"] .ticket-table td{border-color:var(--bd)}
[data-theme="dark"] .ticket-table tr:hover td{background:#293548}
[data-theme="dark"] .ticket-table tr:last-child td{border-bottom:none}
[data-theme="dark"] .row-overdue{background:#3b1a06}
[data-theme="dark"] .row-overdue:hover td{background:#4a2208}
[data-theme="dark"] .kv th,[data-theme="dark"] .kv td{border-color:var(--bd)}
/* interactions & notes */
[data-theme="dark"] .interaction{background:#1a2436;border-left-color:var(--bd2)}
[data-theme="dark"] .interaction.kind-question{background:#2a1f08;border-left-color:#f59e0b}
[data-theme="dark"] .interaction.kind-answer{background:#0d2118;border-left-color:#10b981}
[data-theme="dark"] .interaction.kind-decision{background:#1a1b42;border-left-color:#6366f1}
[data-theme="dark"] .sup-round{background:#1a1b42}
[data-theme="dark"] .interaction.internal{background:#1f2937;border-left-color:#9ca3af}
[data-theme="dark"] .interaction.automated{background:#1a2436}
[data-theme="dark"] .interaction.deleted{background:#1f2937!important;border-left-color:#6b7280!important}
[data-theme="dark"] .note{background:#1f2937;border-left-color:#9ca3af}
/* messages */
[data-theme="dark"] .messages li{background:#2a1a00;color:#fde68a}
[data-theme="dark"] .messages li.success{background:#052e16;color:#6ee7b7}
[data-theme="dark"] .messages li.error{background:#450a0a;color:#fca5a5}
[data-theme="dark"] .messages li.warning{background:#2a1a00;color:#fde68a}
[data-theme="dark"] .messages li.info{background:#1e3a5f;color:#bfdbfe}
/* dashboard KPIs */
[data-theme="dark"] .kpi{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .kpi-bad{background:#431407;border-color:#92400e}
[data-theme="dark"] .kpi-bad .kpi-value{color:var(--bad)}
/* chips */
[data-theme="dark"] .chip{background:#374151;color:#d1d5db}
/* badges - default */
[data-theme="dark"] .badge{background:#1e3a5f;color:#93c5fd}
[data-theme="dark"] .badge.bad{background:#450a0a;color:#fca5a5}
[data-theme="dark"] .badge.good{background:#052e16;color:#6ee7b7}
/* status badges */
[data-theme="dark"] .badge.s-draft{background:#2a1a00;color:#fde68a;border-color:#92400e}
[data-theme="dark"] .badge.s-new{background:#0c2030;color:#7dd3fc}
[data-theme="dark"] .badge.s-triage{background:#2a1e00;color:#fde68a}
[data-theme="dark"] .badge.s-assigned{background:#1e3a5f;color:#93c5fd}
[data-theme="dark"] .badge.s-indev{background:#1e1b42;color:#c4b5fd}
[data-theme="dark"] .badge.s-wait_req,[data-theme="dark"] .badge.s-wait_tr{background:#2a1a00;color:#fcd34d}
[data-theme="dark"] .badge.s-test{background:#0c2a30;color:#67e8f9}
[data-theme="dark"] .badge.s-resolved{background:#052e16;color:#6ee7b7}
[data-theme="dark"] .badge.s-closed{background:#374151;color:#9ca3af}
[data-theme="dark"] .badge.s-assign_fail,[data-theme="dark"] .badge.s-withdrawn,[data-theme="dark"] .badge.s-rejected{background:#450a0a;color:#fca5a5}
/* urgency badges */
[data-theme="dark"] .badge.u-low{background:#1e1b42;color:#a5b4fc}
[data-theme="dark"] .badge.u-normal{background:#1e3a5f;color:#93c5fd}
[data-theme="dark"] .badge.u-high{background:#2a1a00;color:#fcd34d}
[data-theme="dark"] .badge.u-critical{background:#450a0a;color:#fca5a5}
/* timeline + misc */
[data-theme="dark"] .timeline li{border-color:var(--bd)}
[data-theme="dark"] details summary{color:var(--brand)}
/* dark nav drawer */
[data-theme="dark"] .nav-overlay{background:rgba(0,0,0,.55)}
[data-theme="dark"] .nav-toggle{color:var(--fg)}
[data-theme="dark"] .topbar nav{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .topbar nav a{border-color:var(--bd)}

/* ============================================================
   MOBILE / RESPONSIVE IMPROVEMENTS
   ============================================================ */

/* Interaction messages: prevent long URLs / long words breaking the layout */
.interaction .body{word-break:break-word;overflow-wrap:break-word}
.interaction .body a{word-break:break-all}

/* Action button rows: stack vertically on small phones */
@media (max-width:480px){
  .actions{display:flex;flex-direction:column;align-items:stretch;gap:.4rem}
  .actions .btn,.actions .btn-secondary,.actions .btn-danger{
    display:block;width:100%;margin-right:0;text-align:center}
}

/* Ticket list table: tighter cells and hide low-priority columns on mobile */
@media (max-width:640px){
  .ticket-table th,.ticket-table td{padding:.35rem .4rem;font-size:.85rem}
  /* category, site, project, change are secondary info - hide on narrow screens */
  .ticket-table [data-col="category"],
  .ticket-table [data-col="site"],
  .ticket-table [data-col="project"],
  .ticket-table [data-col="change"]{display:none}
}
@media (max-width:480px){
  /* further trim to: #, Title, Status, Urgency, Due */
  .ticket-table [data-col="requestor"],
  .ticket-table [data-col="age"]{display:none}
}

/* KV tables: stack label/value pairs vertically instead of fixed-width side-by-side */
@media (max-width:560px){
  .kv tr{display:block;padding:.4rem 0}
  .kv th,.kv td{display:block;width:100%;border-bottom:none;padding:.1rem .2rem}
  .kv th{font-size:.78rem;padding-bottom:0}
  .kv td{padding-top:.1rem;padding-left:.4rem}
  /* visual gap between the two pairs in a kv-2col row (td immediately before the 2nd th) */
  .kv td+th{margin-top:.4rem}
  .kv tr:not(:last-child){border-bottom:1px solid var(--bd)}
}

/* Inner tables (subtickets, time tracking): touch-friendly sizing */
@media (max-width:640px){
  .inner-table th,.inner-table td{padding:.3rem .45rem;font-size:.83rem}
}