/* =====================================================================
   SGC Service Desk — operations console
   Palette taken from the SGC Telecom | Security mark.
   ===================================================================== */

:root{
  /* Brand */
  --navy:        #12296B;
  --navy-deep:   #0B1A44;
  --navy-mid:    #1B3A8C;
  --red:         #D81E28;
  --red-deep:    #A81119;

  /* Signal */
  --amber:       #E8A33D;
  --green:       #1F8A5F;
  --slate:       #5A6480;

  /* Surface */
  --page:        #EEF1F6;
  --surface:     #FFFFFF;
  --surface-alt: #F6F8FB;
  --line:        #DCE2ED;
  --line-strong: #C3CCDD;

  /* Ink */
  --ink:         #131A2C;
  --ink-2:       #3D4761;
  --ink-3:       #6B7695;

  --rail-w:      248px;
  --radius:      6px;
  --radius-lg:   10px;

  --shadow-1: 0 1px 2px rgba(11,26,68,.06), 0 1px 3px rgba(11,26,68,.05);
  --shadow-2: 0 4px 14px rgba(11,26,68,.10);
  --shadow-3: 0 18px 50px rgba(11,26,68,.22);

  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cond: "Barlow Semi Condensed", var(--sans);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--navy-mid); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
  border-radius:3px;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------------------------------------------------------------------
   Sign-in
   --------------------------------------------------------------------- */
.auth-wrap{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  background:var(--navy-deep);
}
.auth-brand{
  position:relative;
  padding:56px 64px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(216,30,40,.30) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 72%);
  overflow:hidden;
}
.auth-brand::after{
  content:"";
  position:absolute; inset:auto -80px -140px auto;
  width:520px; height:520px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
}
.auth-brand::before{
  content:"";
  position:absolute; inset:auto -20px -260px auto;
  width:520px; height:520px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:50%;
}
.auth-brand img{ height:46px; width:auto; filter:brightness(0) invert(1); }
.auth-brand .lede{ position:relative; z-index:2; max-width:30ch; }
.auth-brand h1{
  font-family:var(--cond);
  font-size:52px;
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0 0 14px;
}
.auth-brand p{ color:rgba(255,255,255,.72); font-size:16px; margin:0; }
.auth-stats{
  position:relative; z-index:2;
  display:flex; gap:38px;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:22px;
}
.auth-stats div span{
  display:block;
  font-family:var(--mono);
  font-size:22px;
  color:#fff;
}
.auth-stats div small{ color:rgba(255,255,255,.55); font-size:12.5px; }

.auth-panel{
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  padding:48px;
}
.auth-card{ width:100%; max-width:376px; }
.auth-card h2{
  font-family:var(--cond);
  font-size:30px; font-weight:600;
  margin:0 0 6px;
}
.auth-card .sub{ color:var(--ink-3); margin:0 0 30px; font-size:14.5px; }

@media (max-width:900px){
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-brand{ padding:34px; }
  .auth-brand h1{ font-size:36px; }
  .auth-stats{ display:none; }
}

/* ---------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------- */
.shell{ display:flex; min-height:100vh; }

.rail{
  width:var(--rail-w);
  flex:0 0 var(--rail-w);
  background:var(--navy-deep);
  color:rgba(255,255,255,.74);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  z-index:40;
}
.rail-head{
  padding:20px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.rail-head img{ height:30px; width:auto; filter:brightness(0) invert(1); }
.rail-head .desk{
  display:block;
  font-family:var(--cond);
  font-size:12.5px;
  letter-spacing:.10em;
  color:rgba(255,255,255,.45);
  margin-top:9px;
}
.rail-nav{ padding:14px 12px; overflow-y:auto; flex:1; }
.rail-group{
  font-family:var(--cond);
  font-size:11.5px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.34);
  padding:16px 10px 7px;
}
.rail-nav a{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px;
  border-radius:var(--radius);
  color:rgba(255,255,255,.76);
  font-size:14.5px;
  font-weight:500;
  margin-bottom:2px;
  border-left:2px solid transparent;
  transition:background .13s ease, color .13s ease;
}
.rail-nav a:hover{ background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.rail-nav a.on{
  background:rgba(255,255,255,.11);
  color:#fff;
  border-left-color:var(--red);
}
.rail-nav a svg{ width:17px; height:17px; flex:0 0 17px; opacity:.85; }
.rail-nav .count{
  margin-left:auto;
  font-family:var(--mono);
  font-size:11.5px;
  background:rgba(255,255,255,.14);
  padding:1px 7px;
  border-radius:20px;
}
.rail-nav .count.hot{ background:var(--red); color:#fff; }

.rail-foot{
  padding:14px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; gap:11px;
}
.avatar{
  width:34px; height:34px; flex:0 0 34px;
  border-radius:50%;
  background:linear-gradient(150deg, var(--red) 0%, var(--red-deep) 100%);
  color:#fff;
  display:grid; place-items:center;
  font-family:var(--cond); font-size:14px; font-weight:600;
}
.rail-foot .who{ min-width:0; }
.rail-foot .who b{ display:block; color:#fff; font-size:13.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-foot .who span{ font-size:11.5px; color:rgba(255,255,255,.48); text-transform:capitalize; }
.rail-foot a.out{ margin-left:auto; color:rgba(255,255,255,.55); display:grid; place-items:center; }
.rail-foot a.out:hover{ color:#fff; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:0 26px;
  height:60px;
  display:flex; align-items:center; gap:18px;
  position:sticky; top:0; z-index:30;
}
.topbar h1{
  font-family:var(--cond);
  font-size:21px; font-weight:600;
  margin:0;
}
.topbar .crumb{ color:var(--ink-3); font-size:13px; }
.topbar .spacer{ flex:1; }

.live-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px;
  padding:5px 11px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  color:var(--ink-2);
  background:var(--surface-alt);
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--slate); }
.dot.live{ background:var(--green); box-shadow:0 0 0 0 rgba(31,138,95,.5); animation:pulse 2.4s infinite; }
.dot.down{ background:var(--red); }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(31,138,95,.45); }
  70%{ box-shadow:0 0 0 7px rgba(31,138,95,0); }
  100%{ box-shadow:0 0 0 0 rgba(31,138,95,0); }
}

.bell{ position:relative; color:var(--ink-2); display:grid; place-items:center; }
.bell .badge{
  position:absolute; top:-4px; right:-6px;
  background:var(--red); color:#fff;
  font-family:var(--mono); font-size:10px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:9px; display:grid; place-items:center;
}

.page{ padding:26px; flex:1; }

.hamburger{ display:none; background:none; border:0; color:var(--ink); cursor:pointer; }

@media (max-width:1024px){
  .rail{ position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s ease; }
  .rail.open{ transform:none; box-shadow:var(--shadow-3); }
  .hamburger{ display:grid; place-items:center; }
  .page{ padding:18px 14px; }
  .topbar{ padding:0 14px; }
}

/* ---------------------------------------------------------------------
   Blocks
   --------------------------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
}
.card-head{
  padding:15px 18px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
}
.card-head h3{
  font-family:var(--cond);
  font-size:16.5px; font-weight:600; margin:0;
}
.card-head .spacer{ flex:1; }
.card-body{ padding:18px; }
.card-body.tight{ padding:0; }

.grid{ display:grid; gap:18px; }
.g4{ grid-template-columns:repeat(4,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g-main{ grid-template-columns:1fr 340px; align-items:start; }
@media (max-width:1200px){ .g4{ grid-template-columns:repeat(2,1fr); } .g-main{ grid-template-columns:1fr; } }
@media (max-width:760px){ .g4,.g3,.g2{ grid-template-columns:1fr; } }

/* Metric tiles — the numbers are the point, so they get the mono face */
.metric{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  box-shadow:var(--shadow-1);
  position:relative;
  overflow:hidden;
}
.metric::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--navy);
}
.metric.is-red::before{ background:var(--red); }
.metric.is-amber::before{ background:var(--amber); }
.metric.is-green::before{ background:var(--green); }
.metric .k{ font-size:13px; color:var(--ink-3); }
.metric .v{
  font-family:var(--mono);
  font-size:31px; font-weight:500;
  line-height:1.15; margin-top:4px;
  letter-spacing:-.02em;
}
.metric .foot{ font-size:12.5px; color:var(--ink-3); margin-top:5px; }
.metric .foot b{ color:var(--ink-2); font-weight:600; }

/* ---------------------------------------------------------------------
   SLA burn — the one place this interface raises its voice
   --------------------------------------------------------------------- */
.burnboard{ display:flex; flex-direction:column; }
.burn-row{
  display:grid;
  grid-template-columns:112px 1fr 128px;
  gap:14px;
  align-items:center;
  padding:11px 18px;
  border-bottom:1px solid var(--line);
}
.burn-row:last-child{ border-bottom:0; }
.burn-row:hover{ background:var(--surface-alt); }
.burn-ref{ font-family:var(--mono); font-size:12.5px; color:var(--navy-mid); }
.burn-mid{ min-width:0; }
.burn-subject{
  font-size:14px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:6px;
}
.burn-track{
  height:7px;
  background:var(--line);
  border-radius:4px;
  overflow:hidden;
  position:relative;
}
.burn-fill{
  height:100%;
  border-radius:4px;
  background:var(--green);
  transition:width .4s ease;
}
.burn-fill.warning{ background:var(--amber); }
.burn-fill.breached{
  background:repeating-linear-gradient(45deg,var(--red) 0 7px,var(--red-deep) 7px 14px);
}
.burn-time{
  font-family:var(--mono);
  font-size:12.5px;
  text-align:right;
  color:var(--ink-2);
}
.burn-time.warning{ color:#9a6510; }
.burn-time.breached{ color:var(--red-deep); font-weight:500; }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.table-wrap{ overflow-x:auto; }
table.dt{ width:100%; border-collapse:collapse; }
table.dt th{
  font-family:var(--cond);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--ink-3);
  text-align:left;
  padding:10px 14px;
  background:var(--surface-alt);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.dt td{
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  vertical-align:middle;
}
table.dt tbody tr:hover{ background:var(--surface-alt); }
table.dt tbody tr:last-child td{ border-bottom:0; }
table.dt .ref{ font-family:var(--mono); font-size:12.5px; color:var(--navy-mid); white-space:nowrap; }
table.dt .num{ font-family:var(--mono); font-size:13px; }
table.dt .muted{ color:var(--ink-3); font-size:13px; }
.row-link{ cursor:pointer; }

.empty{
  padding:52px 24px;
  text-align:center;
  color:var(--ink-3);
}
.empty svg{ width:34px; height:34px; opacity:.35; margin-bottom:12px; }
.empty h4{ font-family:var(--cond); font-size:17px; color:var(--ink-2); margin:0 0 5px; }
.empty p{ margin:0 0 16px; font-size:14px; }

/* ---------------------------------------------------------------------
   Badges & chips
   --------------------------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
  border:1px solid transparent;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.s-new        { background:#E7EDFB; color:#1B3A8C; }
.badge.s-assigned   { background:#E4F0FA; color:#12578C; }
.badge.s-in_progress{ background:#FFF2DC; color:#8A5A0B; }
.badge.s-on_hold    { background:#EFF1F5; color:#5A6480; }
.badge.s-resolved   { background:#E2F3EB; color:#166B49; }
.badge.s-closed     { background:#E9ECF2; color:#4A5470; }
.badge.s-cancelled  { background:#F2E9EA; color:#8A4046; }

.pri{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--cond);
  font-size:12.5px; font-weight:600;
  letter-spacing:.04em;
}
.pri i{ width:3px; height:13px; border-radius:2px; background:currentColor; display:inline-block; }
.pri.p-critical{ color:var(--red); }
.pri.p-high    { color:#C2660C; }
.pri.p-medium  { color:var(--navy-mid); }
.pri.p-low     { color:var(--slate); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px;
  padding:3px 9px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  color:var(--ink-2);
  background:var(--surface);
}
.chip .swatch{ width:8px; height:8px; border-radius:2px; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
label.fl{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  margin-bottom:6px;
}
.hint{ font-size:12.5px; color:var(--ink-3); margin-top:5px; }

.input, select.input, textarea.input{
  width:100%;
  font-family:var(--sans);
  font-size:14.5px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:9px 12px;
  transition:border-color .13s ease, box-shadow .13s ease;
}
.input:focus, select.input:focus, textarea.input:focus{
  border-color:var(--navy-mid);
  box-shadow:0 0 0 3px rgba(27,58,140,.12);
  outline:none;
}
.input.mono{ font-family:var(--mono); font-size:13.5px; }
textarea.input{ min-height:104px; resize:vertical; line-height:1.55; }
select.input{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7695' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
  background-size:17px;
  padding-right:34px;
}
.field{ margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }

.switch{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch .track{
  width:38px; height:21px;
  background:var(--line-strong);
  border-radius:20px;
  position:relative;
  transition:background .16s ease;
  flex:0 0 38px;
}
.switch .track::after{
  content:""; position:absolute; top:2px; left:2px;
  width:17px; height:17px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-1);
  transition:transform .16s ease;
}
.switch input:checked + .track{ background:var(--green); }
.switch input:checked + .track::after{ transform:translateX(17px); }
.switch input:focus-visible + .track{ outline:2px solid var(--red); outline-offset:2px; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans);
  font-size:14px; font-weight:600;
  padding:9px 16px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  background:var(--surface);
  color:var(--ink);
  transition:background .13s ease, border-color .13s ease, color .13s ease;
  white-space:nowrap;
}
.btn:hover{ text-decoration:none; }
.btn svg{ width:16px; height:16px; }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-mid); }
.btn-danger{ background:var(--red); color:#fff; }
.btn-danger:hover{ background:var(--red-deep); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink-2); }
.btn-ghost:hover{ background:var(--surface-alt); border-color:var(--ink-3); }
.btn-quiet{ color:var(--ink-2); }
.btn-quiet:hover{ background:var(--surface-alt); }
.btn-sm{ padding:6px 11px; font-size:13px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn-group{ display:flex; gap:9px; flex-wrap:wrap; }

/* ---------------------------------------------------------------------
   Modals — every confirmation in this product uses these
   --------------------------------------------------------------------- */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(11,26,68,.52);
  backdrop-filter:blur(2px);
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  z-index:100;
}
.modal-backdrop.show{ display:flex; }
.modal{
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);
  width:100%; max-width:480px;
  max-height:90vh;
  display:flex; flex-direction:column;
  animation:modal-in .16s ease-out;
}
.modal.wide{ max-width:660px; }
@keyframes modal-in{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to{ opacity:1; transform:none; }
}
.modal-head{
  padding:18px 20px 14px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; gap:13px;
}
.modal-icon{
  width:36px; height:36px; flex:0 0 36px;
  border-radius:var(--radius);
  display:grid; place-items:center;
  background:#E7EDFB; color:var(--navy);
}
.modal-icon.danger{ background:#FBE9EA; color:var(--red); }
.modal-icon.warn  { background:#FFF3DF; color:#8A5A0B; }
.modal-icon svg{ width:19px; height:19px; }
.modal-head h3{ font-family:var(--cond); font-size:18px; font-weight:600; margin:0 0 3px; }
.modal-head p{ margin:0; font-size:13.5px; color:var(--ink-3); }
.modal-body{ padding:18px 20px; overflow-y:auto; }
.modal-body p{ margin:0 0 12px; font-size:14.5px; color:var(--ink-2); }
.modal-body p:last-child{ margin-bottom:0; }
.modal-foot{
  padding:14px 20px;
  border-top:1px solid var(--line);
  display:flex; justify-content:flex-end; gap:9px;
  background:var(--surface-alt);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.modal-close{ margin-left:auto; background:none; border:0; cursor:pointer; color:var(--ink-3); padding:2px; }
.modal-close:hover{ color:var(--ink); }

/* ---------------------------------------------------------------------
   Toasts
   --------------------------------------------------------------------- */
.toast-stack{
  position:fixed; bottom:20px; right:20px;
  display:flex; flex-direction:column; gap:9px;
  z-index:200;
}
.toast{
  background:var(--ink);
  color:#fff;
  padding:12px 16px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-3);
  font-size:14px;
  display:flex; align-items:center; gap:10px;
  max-width:380px;
  border-left:3px solid var(--navy-mid);
  animation:toast-in .18s ease-out;
}
.toast.ok   { border-left-color:var(--green); }
.toast.error{ border-left-color:var(--red); }
.toast.warn { border-left-color:var(--amber); }
@keyframes toast-in{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------------------
   Ticket detail
   --------------------------------------------------------------------- */
.tk-head{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:18px;
  box-shadow:var(--shadow-1);
}
.tk-ref{
  font-family:var(--mono);
  font-size:13px;
  color:var(--navy-mid);
  margin-bottom:5px;
}
.tk-head h2{
  font-family:var(--cond);
  font-size:25px; font-weight:600;
  margin:0 0 12px;
  line-height:1.22;
}
.tk-meta{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }

.sla-strip{
  margin-top:16px;
  padding-top:15px;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
@media (max-width:640px){ .sla-strip{ grid-template-columns:1fr; } }
.sla-item .lbl{
  font-family:var(--cond); font-size:12.5px;
  letter-spacing:.05em; color:var(--ink-3); margin-bottom:6px;
}
.sla-item .val{ font-family:var(--mono); font-size:15px; margin-bottom:7px; }
.sla-item .val.breached{ color:var(--red-deep); }
.sla-item .val.warning { color:#9a6510; }
.sla-item .val.met     { color:var(--green); }

.thread{ display:flex; flex-direction:column; }
.note{
  padding:15px 18px;
  border-bottom:1px solid var(--line);
  display:flex; gap:12px;
}
.note:last-child{ border-bottom:0; }
.note .avatar{ width:30px; height:30px; flex:0 0 30px; font-size:12px; }
.note.system .avatar{ background:var(--surface-alt); color:var(--ink-3); border:1px solid var(--line); }
.note-body{ min-width:0; flex:1; }
.note-meta{ font-size:13px; color:var(--ink-3); margin-bottom:4px; }
.note-meta b{ color:var(--ink); font-weight:600; }
.note-text{ font-size:14.5px; color:var(--ink-2); white-space:pre-wrap; word-wrap:break-word; }
.note.internal{ background:#FFFCF4; }
.note.internal .note-body::after{
  content:"Internal note";
  display:inline-block;
  margin-top:7px;
  font-size:11.5px;
  color:#8A5A0B;
  background:#FFF3DF;
  padding:1px 7px;
  border-radius:20px;
}

.side-block{ margin-bottom:18px; }
.kv{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.kv:last-child{ border-bottom:0; }
.kv .k{ color:var(--ink-3); }
.kv .v{ text-align:right; font-weight:500; }
.kv .v.mono{ font-family:var(--mono); font-size:13px; }

/* Call log entries inside a ticket */
.call-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.call-item:last-child{ border-bottom:0; }
.call-dir{
  width:26px; height:26px; flex:0 0 26px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface-alt);
  border:1px solid var(--line);
  color:var(--ink-3);
}
.call-dir svg{ width:13px; height:13px; }
.call-item .num{ font-family:var(--mono); font-size:12.5px; }
.call-item .when{ margin-left:auto; color:var(--ink-3); font-size:12.5px; white-space:nowrap; }

/* ---------------------------------------------------------------------
   Filter bar
   --------------------------------------------------------------------- */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-bottom:18px;
}
.filters .input, .filters select.input{ width:auto; min-width:150px; }
.filters .search{ min-width:250px; flex:1; max-width:400px; }

.pager{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px;
  border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-3);
}
.pager .pages{ display:flex; gap:5px; }
.pager .pages a, .pager .pages span{
  min-width:31px; height:31px;
  display:grid; place-items:center;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  font-family:var(--mono); font-size:12.5px;
  color:var(--ink-2);
}
.pager .pages a:hover{ background:var(--surface-alt); text-decoration:none; }
.pager .pages .on{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* Tabs */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:20px; flex-wrap:wrap; }
.tabs a{
  padding:10px 15px;
  font-size:14px; font-weight:600;
  color:var(--ink-3);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tabs a:hover{ color:var(--ink); text-decoration:none; }
.tabs a.on{ color:var(--navy); border-bottom-color:var(--red); }

.alert{
  padding:12px 15px;
  border-radius:var(--radius);
  font-size:14px;
  margin-bottom:16px;
  border:1px solid;
  display:flex; gap:10px; align-items:flex-start;
}
.alert svg{ width:17px; height:17px; flex:0 0 17px; margin-top:1px; }
.alert-info  { background:#EDF2FC; border-color:#C6D5F1; color:#1B3A8C; }
.alert-ok    { background:#E7F5EF; border-color:#B8DFCD; color:#166B49; }
.alert-warn  { background:#FFF6E6; border-color:#F0D5A0; color:#8A5A0B; }
.alert-error { background:#FBEBEC; border-color:#F0C2C5; color:#A81119; }

.section-title{
  font-family:var(--cond);
  font-size:15.5px; font-weight:600;
  color:var(--ink-2);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}

.code-line{
  font-family:var(--mono);
  font-size:12.5px;
  background:var(--navy-deep);
  color:#C9D6F0;
  padding:11px 13px;
  border-radius:var(--radius);
  overflow-x:auto;
  white-space:nowrap;
  display:flex; align-items:center; gap:10px;
}
.code-line button{
  margin-left:auto;
  background:rgba(255,255,255,.12);
  border:0; color:#fff;
  font-size:11.5px; font-family:var(--sans); font-weight:600;
  padding:3px 9px; border-radius:4px; cursor:pointer;
}
.code-line button:hover{ background:rgba(255,255,255,.22); }

.chart-box{ position:relative; height:270px; }

.skip-link{
  position:absolute; left:-9999px;
  background:var(--navy); color:#fff; padding:10px 16px; z-index:300;
}
.skip-link:focus{ left:12px; top:12px; }

@media print{
  .rail,.topbar,.btn,.filters{ display:none !important; }
  .page{ padding:0; }
  .card{ box-shadow:none; border:1px solid #ccc; }
}