/* ═══════════════════════════════════════════════
   KUVRR STANDARD — New UI Design System
   ═══════════════════════════════════════════════ */

/* ── CSS Variables ──
   Design tokens (--navy, --blue, --t1..--t5, --f, --r, --sh, status colors, etc.)
   are defined in kuvrr-global.css :root as the single source of truth.
   kuvrr-global.css is linked BEFORE this file in shared/layout.html, so every
   var(--token) reference below resolves correctly. Do NOT redefine tokens
   here — change values in kuvrr-global.css instead. */

/* ── Base .inp class (inputs, selects, textareas) ── */
.inp {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t1);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.inp:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,186,255,.1);
}
.inp:disabled, .inp[disabled] {
  background: #f3f5f8;
  cursor: not-allowed;
  color: var(--t3);
}
select.inp {
  appearance: auto;
  cursor: pointer;
}
textarea.inp {
  height: auto;
  padding: 8px 10px;
  resize: vertical;
}

/* ═══════════════════════════════════════════════
   BODY GRID LAYOUT
   ═══════════════════════════════════════════════ */
/* Kill old emc.css html { min-width: 960px } that forces page wider than viewport */
html {
  min-width: 0 !important;
  min-height: 0 !important;
}
body.loggedin.has-sidebar,
body.loggedin.has-sidebar *:not([class*="fa"]):not([class*="icon-"]):not([class*="glyphicon"]) {
  font-family: var(--f) !important;
}
body.loggedin.has-sidebar {
  background: var(--page) !important;
  color: var(--t1);
  height: 100vh;
  display: grid !important;
  grid-template-rows: 46px minmax(0, 1fr);
  grid-template-columns: 212px 1fr;
  overflow: hidden;
  background-image: none !important;
  background-repeat: no-repeat !important;
  transition: grid-template-columns .25s ease;
}
/* Kill clearfix pseudo-elements — .cf::before/::after from emc.css create
   extra grid items that add implicit rows and break the 1fr height calc */
body.loggedin.has-sidebar::before,
body.loggedin.has-sidebar::after {
  display: none !important;
  content: none !important;
}
body.loggedin.has-sidebar.sb-collapsed {
  grid-template-columns: 46px 1fr;
}

/* ═══════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════ */
.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  background: var(--navy) !important;
  display: flex !important;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index: 200;
  height: 46px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.topbar-brand {
  width: 212px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 100%;
  border-right: 1px solid rgba(255,255,255,.07);
  box-sizing: border-box;
}
/* Shield icon for collapsed state — hidden by default */
.brand-icon-collapsed {
  display: none;
  width: 22px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Inline topbar SOS bar ── */
.sos-inline {
  flex: 1;
  margin: 0 12px;
  height: 26px;
  border-radius: var(--r2);
  display: none;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  position: relative;
  overflow: hidden;
  background: #C81E1E;
  animation: edgePulse 2.4s ease-in-out infinite;
  min-width: 0;
}
.sos-inline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #7F0000 0%, #B91C1C 8%, #DC2626 16%, #EF4444 22%,
    #F97316 28%, #FB923C 31%, #FCD34D 33.33%,
    #FB923C 35.66%, #F97316 38%, #EF4444 44%,
    #DC2626 50%, #B91C1C 58%, #7F0000 66.66%,
    #B91C1C 75%, #DC2626 82%, #EF4444 88%,
    #F97316 94%, #FB923C 97%, #FCD34D 100%
  );
  background-size: 300% 100%;
  animation: waveRoll 2.6s linear infinite;
  z-index: 0;
}
.sos-inline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 50%, rgba(0,0,0,.08) 100%);
  z-index: 1;
  pointer-events: none;
}
.sos-inline > * {
  position: relative;
  z-index: 2;
}
.sos-blink {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  flex-shrink: 0;
  animation: blinkDot 1.3s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 18px rgba(252,211,77,.9);
}
.sos-inline-text {
  font-size: 10px;
  font-weight: 700;
  color: white;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
}
.sos-inline-text a {
  color: white !important;
  text-decoration: none;
}
.sos-inline-text img {
  height: 14px;
  vertical-align: middle;
  margin: 0 2px;
  filter: brightness(0) invert(1);
}

/* Hide old floating alert banner — alerts now show in SOS bar */
#alert-banner {
  display: none !important;
}

/* ── Topbar Nav Buttons ── */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 0 10px;
}
.topbar-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 0 10px;
}
.tb-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 12px;
  border-radius: var(--r2);
  color: rgba(255,255,255,.55);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, background .15s;
  position: relative;
  white-space: nowrap;
}
.tb-nav-btn i {
  font-size: 16px;
  line-height: 1;
}
.tb-nav-btn .tb-nav-icon {
  width: 16px;
  height: 16px;
  color: inherit;
}
.tb-nav-btn:hover {
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  text-decoration: none;
}
.tb-nav-btn:active {
  background: rgba(255,255,255,.12);
}
/* Notifications dropdown inside topbar */
.tb-nav-dropdown { cursor: pointer; }
.tb-nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  padding: 4px 0;
  min-width: 170px;
  z-index: 200;
  list-style: none;
}
.tb-nav-menu li a {
  display: block;
  padding: 7px 14px;
  font-size: 9px;
  font-weight: 500;
  color: var(--t2);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: background .1s;
}
.tb-nav-menu li a:hover {
  background: var(--page);
  color: var(--t1);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 16px;
}

.tb-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.52);
  font-family: var(--f);
  font-size: 9px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  text-decoration: none;
}
.tb-btn:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.82);
}

.tb-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,.5);
  transition: all .15s;
  position: relative;
  text-decoration: none;
}
.tb-icon:hover {
  background: rgba(255,255,255,.1);
  color: #22BAFF;
  border-color: #22BAFF;
}
.tb-icon:hover svg { color: #22BAFF; }

.tb-pip {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--navy);
}

/* User chip in topbar */
.user-chip-new {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 3px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 99px;
  cursor: pointer;
  margin-left: 4px;
  transition: border-color .15s;
  position: relative;
}
.user-chip-new:hover {
  border-color: rgba(255,255,255,.15);
}

.uav {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(34,186,255,.18);
  border: 1.5px solid rgba(34,186,255,.3);
  font-size: 9px;
  font-weight: 700;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f);
}

.uname {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  font-family: var(--f);
}

/* User chip dropdown menu */
.user-chip-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  margin-top: 6px !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  padding: 4px !important;
  min-width: 150px;
  z-index: 1000;
}
.user-chip-menu li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.user-chip-menu li a {
  display: block;
  padding: 7px 12px !important;
  font-size: 9px !important;
  font-weight: 500;
  color: var(--t2) !important;
  border-radius: 5px;
  transition: all .12s;
  text-decoration: none;
  font-family: var(--f);
}
.user-chip-menu li a:hover {
  background: var(--page);
  color: var(--t1) !important;
}

/* ── Hide sidebar & toggle on non-authenticated pages (login, etc.) ── */
body:not(.loggedin) aside.sidebar,
body:not(.loggedin) .sb-toggle {
  display: none !important;
}

/* ═══════════════════════════════════════════════
   SIDEBAR — White Theme + Collapsible
   ═══════════════════════════════════════════════ */
.loggedin .sidebar,
aside.sidebar {
  grid-column: 1;
  grid-row: 2;
  background: var(--white) !important;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 16px;
  position: relative;
  width: 212px !important;
  min-height: 0;
  float: none !important;
  font-family: var(--f) !important;
  transition: width .25s ease;
}

/* Sidebar toggle button — edge chevron, positioned outside sidebar to avoid overflow clip */
.sb-toggle {
  position: fixed;
  left: 200px; /* 212px sidebar - 12px (half of 24px button) */
  top: 50%;
  transform: translateY(-50%);
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--t3);
  cursor: pointer;
  transition: left .25s ease, background .15s, color .15s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  padding: 0;
}
.sb-toggle svg {
  transition: transform .25s ease;
}
.sb-toggle:hover {
  background: var(--page);
  color: var(--t1);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Sidebar nav container */
.sb-nav {
  position: relative;
  z-index: 1;
}

/* Sidebar section */
.sb-section {
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

/* Section labels */
.sb-lbl {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: capitalize;
  color: var(--t4);
  padding: 7px 14px 4px;
  font-family: var(--f);
}

/* Divider */
.sb-div {
  display: none;
}

/* ── Organization name header ── */
.sb-org-name {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.sb-org-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--t4);
}
.sb-org-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: capitalize;
  color: var(--t3);
  font-family: var(--f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Nav items (leaf) ── */
.sidebar .sbi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  margin: 1px 5px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 400;
  color: var(--t3);
  cursor: pointer;
  transition: all .18s;
  user-select: none;
  position: relative;
  text-decoration: none;
  font-family: var(--f);
  white-space: nowrap;
  overflow: hidden;
}
.sidebar .sbi:hover {
  color: var(--t1);
  background: var(--page);
}
.sidebar .sbi:hover .sbi-icon {
  transform: scale(1.1);
}
.sidebar .sbi.on {
  color: var(--blue);
  font-weight: 500;
  background: rgba(34,186,255,.06);
}
.sidebar .sbi.on:not(.sub)::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 24%;
  bottom: 24%;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: var(--blue);
}
.sidebar .sbi.on .sbi-icon {
  color: var(--blue);
}

/* ── Tree connectors for sub-menus ── */
/* Vertical line running down the left side — uses border-left
   instead of ::before to avoid being clipped by overflow:hidden */

/* Sub-items */
.sidebar .sbi.sub {
  padding-left: 30px;
  font-size: 9px;
  color: var(--t3);
  position: relative;
  margin-left: 0;
  border-radius: 0 7px 7px 0;
}
/* Horizontal branch connector */
.sidebar .sbi.sub::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--border);
}
/* Hide sub-item icons — replaced by tree lines */
.sidebar .sbi.sub .sbi-icon {
  display: none;
}
.sidebar .sbi.sub.on {
  color: var(--blue);
  background: rgba(34,186,255,.06);
}
.sidebar .sbi.sub:hover {
  color: var(--t1);
  background: var(--page);
}

/* Deep sub-items (3rd level) */
.sidebar .sbi.sub.deep {
  padding-left: 22px;
  font-size: 9px;
}
.sidebar .sbi.sub.deep::before {
  width: 12px;
}

/* Sub-parent items inside children also get tree connectors */
.sbi-children > .sbi-parent.sub-parent {
  position: relative;
  padding-left: 30px;
  margin-left: 0;
  border-radius: 0 7px 7px 0;
}
.sbi-children > .sbi-parent.sub-parent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--border);
}
/* Nested children inside children (3rd level) */
.sbi-children .sbi-children {
  margin-left: 20px;
  padding-left: 0;
}

/* ── Parent nav items (top-level with arrow) ── */
.sidebar .sbi-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  margin: 1px 5px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--t2);
  cursor: pointer;
  transition: all .18s;
  user-select: none;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar .sbi-parent:hover {
  color: var(--t1);
  background: var(--page);
}
.sidebar .sbi-parent:hover .sbi-icon {
  transform: scale(1.1);
}
.sidebar .sbi-parent.on {
  color: var(--blue);
  background: rgba(34,186,255,.06);
}
.sidebar .sbi-parent.on:not(.sub-parent)::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 24%;
  bottom: 24%;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: var(--blue);
}
.sidebar .sbi-parent.on .sbi-icon {
  color: var(--blue);
}

/* Sub-parent items (nested collapsible headers) */
.sidebar .sbi-parent.sub-parent {
  padding-left: 30px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}
.sidebar .sbi-parent.sub-parent > .sbi-left > .sbi-icon {
  display: none;
}

.sbi-left {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.sbi-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .2s, color .15s;
  color: var(--t4);
}

.sbi-plbl {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  font-family: var(--f);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sbi-arrow {
  flex-shrink: 0;
  color: var(--t4);
  transition: transform .2s;
}
.sidebar .sbi-parent.on > .sbi-arrow {
  transform: rotate(180deg);
  color: var(--t2);
}

/* ── Children (sub-items under parent) ── */
.sbi-children {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
  position: relative;
  margin-left: 20px;
}
/* Vertical tree line — stops at middle of the last child so it doesn't
   dangle below the last horizontal stub */
.sbi-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 13px;
  width: 1px;
  background: var(--border);
  pointer-events: none;
}
.sbi-children.open {
  max-height: 800px;
}

/* Count badges */
.sb-cnt {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
  line-height: 1.5;
  letter-spacing: .02em;
  font-family: var(--f);
}
.sb-cnt-red   { background: rgba(239,68,68,.15); color: var(--red); }
.sb-cnt-blue  { background: rgba(34,186,255,.12); color: var(--blue); }
.sb-cnt-green { background: rgba(16,185,129,.13); color: var(--green); }
.sb-cnt-amber { background: rgba(245,158,11,.13); color: var(--amber); }

/* ═══════════════════════════════════════════════
   SIDEBAR COLLAPSED STATE
   ═══════════════════════════════════════════════ */
.sb-collapsed .sidebar,
.sb-collapsed aside.sidebar {
  width: 46px !important;
  z-index: 150;
}
.sb-collapsed .topbar-brand {
  width: 46px;
  padding: 0 8px;
  justify-content: center;
}
.sb-collapsed .topbar-brand a { display: none; }
.sb-collapsed .brand-icon-collapsed { display: block; }
/* Hide text, arrows, labels, dividers, children in collapsed mode */
.sb-collapsed .sidebar .sbi-plbl,
.sb-collapsed .sidebar .sbi-arrow,
.sb-collapsed .sidebar .sb-lbl,
.sb-collapsed .sidebar .sb-div,
.sb-collapsed .sidebar .sbi-children,
.sb-collapsed .sidebar .sb-cnt {
  display: none !important;
}
/* Center icons in collapsed mode */
.sb-collapsed .sidebar .sbi,
.sb-collapsed .sidebar .sbi-parent {
  justify-content: center;
  padding: 8px 0;
  margin: 1px 4px;
}
.sb-collapsed .sidebar .sbi-left {
  gap: 0;
  justify-content: center;
}
.sb-collapsed .sidebar .sbi-icon {
  width: 18px;
  height: 18px;
}
/* Hide sub items in collapsed mode */
.sb-collapsed .sidebar .sbi.sub,
.sb-collapsed .sidebar .sbi.sub.deep,
.sb-collapsed .sidebar .sbi-parent.sub-parent {
  display: none !important;
}
/* Toggle chevron flips and moves when collapsed */
.sb-collapsed .sb-toggle {
  left: 34px; /* 46px sidebar - 12px */
}
.sb-collapsed .sb-toggle svg {
  transform: rotate(180deg);
}
/* Hide org name text in collapsed mode, center icon */
.sb-collapsed .sidebar .sb-org-text {
  display: none;
}
.sb-collapsed .sidebar .sb-org-name {
  justify-content: center;
  padding: 10px 0 8px;
}
.sb-collapsed .sidebar .sb-org-icon {
  width: 18px;
  height: 18px;
}

/* ═══════════════════════════════════════════════
   COLLAPSED TOOLTIPS (hover)
   ═══════════════════════════════════════════════ */
.sb-collapsed .sidebar .sbi-parent[data-title] {
  overflow: visible;
}
.sb-collapsed .sidebar .sbi-parent[data-title]::after {
  content: attr(data-title);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  font-family: var(--f);
  white-space: nowrap;
  border-radius: var(--r2);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.sb-collapsed .sidebar .sbi-parent[data-title]:hover::after {
  opacity: 1;
}
/* Hide tooltip when flyout is open */
.sb-collapsed .sidebar .sbi-parent[data-title].sb-flyout-open::after {
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════
   COLLAPSED FLYOUT SUBMENUS (click)
   ═══════════════════════════════════════════════ */
/* Allow tooltips and flyouts to escape sidebar overflow */
.sb-collapsed .sidebar,
.sb-collapsed aside.sidebar {
  overflow: visible !important;
}
.sb-collapsed .sidebar .sb-section {
  position: relative;
}
/* Flyout panel */
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children {
  display: block !important;
  position: absolute;
  left: 46px;
  top: 0;
  width: 200px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: 4px 2px 12px rgba(0,0,0,.1);
  z-index: 999;
  padding: 6px 0;
  border-left: 2px solid var(--blue);
  animation: fadeUp .15s ease;
}
/* Restore sub items inside flyout */
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi.sub,
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi.sub.deep,
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi-parent.sub-parent {
  display: flex !important;
}
/* Restore labels and arrows inside flyout */
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi-plbl,
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi-arrow,
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sb-cnt {
  display: initial !important;
}
/* Nested children inside flyout flow normally */
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi-children {
  display: block !important;
  position: static;
  width: auto;
  border: none;
  border-left: none;
  box-shadow: none;
  padding: 0;
  padding-left: 8px;
  margin-left: 0;
  background: transparent;
  max-height: none;
  overflow: visible;
}
/* Remove tree connectors inside flyout */
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi.sub::before,
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi-parent.sub-parent::before {
  display: none !important;
}
/* Remove tree vertical border-left from flyout children */
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children {
  margin-left: 0;
  border-left: 2px solid var(--blue);
}
/* Flyout items styling — reset padding and layout */
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi {
  justify-content: flex-start;
  padding: 7px 12px;
  margin: 1px 5px;
  padding-left: 12px;
}
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi.sub {
  padding-left: 12px;
  border-radius: 7px;
}
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi.sub.deep {
  padding-left: 24px;
}
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi-left {
  gap: 8px;
  justify-content: flex-start;
}
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi-parent {
  justify-content: space-between;
  padding: 7px 12px;
  margin: 1px 5px;
}
.sb-collapsed .sidebar .sb-flyout-open + .sbi-children .sbi-parent.sub-parent {
  padding-left: 12px;
}

/* ═══════════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════════ */
.loggedin.has-sidebar #content,
.loggedin.has-sidebar section#content,
.loggedin.has-sidebar .main {
  grid-column: 2;
  grid-row: 2;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: var(--page);
  min-height: 0;
  min-width: 0;
  /* Explicitly constrain height to grid cell for reliable overflow scroll */
  height: 100%;
}
/* Prevent flex children from expanding wider than the content area */
.loggedin.has-sidebar #content > *,
.loggedin.has-sidebar section#content > * {
  min-width: 0;
  max-width: 100%;
}
/* Remove stray grid children from flow — modals/prompts use position:fixed/absolute,
   switchOrgApp wrapper just contains a hidden modal, make them not create implicit rows */
body.loggedin.has-sidebar > [ng-app="switchOrgApp"],
body.loggedin.has-sidebar > #system-messages {
  position: absolute;
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.loggedin.has-sidebar #footer {
  margin-top: auto;
  flex-shrink: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 8px 20px;
  font-size: 10px;
  color: var(--t3);
  font-family: var(--f);
}

/* ═══════════════════════════════════════════════
   OVERRIDE CONFLICTS FROM emc.css / kuvrr.css
   ═══════════════════════════════════════════════ */

/* Hide old topbar elements */
.loggedin .user-nav:not(.topbar) {
  display: none !important;
}
.loggedin .top-warning {
  display: none !important;
}

/* Hide old sidebar .navbar structure */
.loggedin .navbar:not(.topbar) {
  display: none !important;
}

/* Override old body background-image for sidebar */
.loggedin.has-sidebar {
  background-image: none !important;
}

/* Override old margin-left positioning — grid handles this now */
.loggedin.has-sidebar #content,
.has-sidebar #content {
  margin-left: 0 !important;
  padding: 10px 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  float: none !important;
}
.loggedin.has-sidebar #footer,
.has-sidebar #footer {
  margin-left: 0 !important;
  left: auto !important;
  clear: none !important;
  float: none !important;
}

/* Override old navbar styles that conflict */
.loggedin aside.sidebar .sb-nav {
  border: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Override old system-nav styles — shouldn't appear in new nav */
.sidebar .system-nav {
  display: none !important;
}

/* Override old .brand inside sidebar */
.sidebar .brand {
  display: none !important;
}

/* Kill old dropdown arrow pseudo-elements on new sidebar (except collapsed tooltips) */
body:not(.sb-collapsed) .sidebar .sbi-parent::after,
.sidebar .sbi::after {
  content: none !important;
  display: none !important;
}

/* Scrollbar for sidebar */
.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--t5);
  border-radius: 99px;
}

/* Scrollbar for main content */
#content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#content::-webkit-scrollbar-track {
  background: var(--page);
}
#content::-webkit-scrollbar-thumb {
  background: var(--t4);
  border-radius: 99px;
}
#content::-webkit-scrollbar-thumb:hover {
  background: var(--t3);
}
#content {
  scrollbar-width: thin;
  scrollbar-color: var(--t4) var(--page);
}

/* Override old table styles from emc.css for .table-container */
.table-container table thead tr:first-child td:first-child,
.table-container table thead tr:first-child td:last-child,
.table-container table thead tr:first-child th:first-child,
.table-container table thead tr:first-child th:last-child {
  border-radius: 0 !important;
}
.table-container table thead tr:first-child td,
.table-container table thead tr:first-child th {
  border-top: none !important;
}
.table-container table thead tr:last-child td,
.table-container table thead tr:last-child th {
  border-bottom: none !important;
}
.table-container table td:first-child,
.table-container table th:first-child {
  border-left: none !important;
}
.table-container table td:last-child,
.table-container table th:last-child {
  border-right: none !important;
}
.table-container table tr:nth-child(odd),
.table-container table tr:nth-child(even) {
  background-color: transparent !important;
}
.table-container table tbody tr:last-child td:first-child,
.table-container table tbody tr:last-child td:last-child {
  border-radius: 0 !important;
}
.table-container .table-container-inner {
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes waveRoll {
  0%   { background-position: 100% 0; }
  100% { background-position:   0% 0; }
}

@keyframes edgePulse {
  0%,100% { box-shadow: 0 3px 14px rgba(239,68,68,.55),  0 -3px 14px rgba(239,68,68,.35); }
  40%     { box-shadow: 0 4px 22px rgba(251,146,60,.75),  0 -4px 22px rgba(252,211,77,.55); }
  50%     { box-shadow: 0 5px 28px rgba(252,211,77,.85),  0 -5px 28px rgba(251,146,60,.65); }
  60%     { box-shadow: 0 4px 22px rgba(251,146,60,.75),  0 -4px 22px rgba(252,211,77,.55); }
}

@keyframes blinkDot {
  0%,100% { opacity: 1;  transform: scale(1);   box-shadow: 0 0 8px #fff, 0 0 18px rgba(252,211,77,.9); }
  50%     { opacity: .2; transform: scale(.65); box-shadow: none; }
}

/* ═══════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════ */
.page-hdr {
  padding: 16px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ph-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -0.01em;
  font-family: var(--f);
}
.ph-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ph-stats-toggle {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--t2);
  cursor: pointer;
  padding: 0;
  transition: all .12s ease;
}
.ph-stats-toggle svg {
  width: 12px;
  height: 12px;
}
.ph-stats-toggle:hover {
  color: var(--blue);
  border-color: var(--blue);
}
.ph-stats-toggle.on {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  box-shadow: 0 2px 6px rgba(34,186,255,.25);
}

/* ═══════════════════════════════════════════════
   PILLS / STATUS BADGES
   ═══════════════════════════════════════════════ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  font-family: var(--f);
}
.pill::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.p-red    { background: #FEE2E2 !important; color: #B91C1C !important; }
.p-green  { background: #D1FAE5 !important; color: #065F46 !important; }
.p-blue   { background: #DBEAFE !important; color: #1E40AF !important; }
.p-gray   { background: #F3F4F6 !important; color: var(--t3) !important; border: 1px solid var(--border2); }
.p-amber  { background: #FEF3C7 !important; color: #92400E !important; }
.p-purple { background: #EDE9FE !important; color: #5B21B6 !important; }
.p-teal   { background: #CCFBF1 !important; color: #0F766E !important; }

/* ═══════════════════════════════════════════════
   FILTER BUTTON
   ═══════════════════════════════════════════════ */
.filter-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: var(--r2);
  background: var(--blue);
  color: var(--navy);
  border: none;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .05em;
  text-transform: capitalize;
  transition: background .15s;
}
.filter-btn:hover {
  background: #1da8e8;
}
.filter-btn svg {
  color: var(--navy);
}

/* ═══════════════════════════════════════════════
   TABS WRAP — Overview / Analytics / History
   ═══════════════════════════════════════════════ */
.tabs-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 0 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  margin-bottom: 12px;
}
.tabs { display: flex; }
.tab-item {
  padding: 6px 13px;
  font-family: var(--f);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--t3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s;
}
.tab-item:hover { color: var(--t2); }
.tab-item.on { color: var(--t1); border-bottom-color: var(--navy); }

/* Tabs search */
.tabs-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 6px;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  width: 190px;
}
.tabs-search input {
  background: none;
  border: none;
  outline: none;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t2);
  width: 100%;
}
.tabs-search input::placeholder { color: var(--t4); }

/* ═══════════════════════════════════════════════
   STAT BAR — Two sections side by side
   ═══════════════════════════════════════════════ */
.stat-bar {
  display: flex;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh);
  margin-top: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  animation: fadeUp .3s ease both;
  max-height: 400px;
  transition: max-height .3s ease,
              margin-top .25s ease, margin-bottom .25s ease,
              border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
/* Closed state driven by the page-header stats icon. max-height collapses
   the drawer smoothly; margins + border + shadow are zeroed so the page
   shifts up cleanly without a leftover gap or 1px line. */
.stat-bar.stat-bar-hidden {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-color: transparent;
  box-shadow: none;
  opacity: 0;
  animation: none;
}
.stat-section {
  flex: 1;
  padding: 10px 16px;
  min-width: 0;
}
.stat-section-tracker {
  border-left: 1px solid var(--border);
}
.stat-section-hdr {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
.stat-section-title {
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: capitalize;
}
.stat-section-sub {
  font-family: var(--f);
  font-size: 9px;
  color: var(--t4);
}
.stat-drawer {
  overflow: hidden;
}
.stat-items {
  display: flex;
  gap: 16px;
  overflow-x: auto;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.donut-wrap {
  position: relative;
  flex-shrink: 0;
}
.donut-svg {
  display: block;
  transform: rotate(-90deg);
}
.donut-bg {
  fill: none;
  stroke-width: 3.5;
}
.donut-fg {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
}
.donut-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.stat-info {
  flex: 1;
  min-width: 0;
}
.stat-lbl {
  font-family: var(--f);
  font-size: 10px;
  font-weight: 500;
  color: var(--t2);
  line-height: 1.35;
  white-space: nowrap;
}
.stat-sub {
  font-family: var(--f);
  font-size: 9px;
  color: var(--t4);
  line-height: 1.3;
}
.stat-delta {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  margin-top: 2px;
}
.d-up   { color: var(--green); }
.d-down { color: var(--red); }
.d-flat { color: var(--t4); }

/* ═══════════════════════════════════════════════
   CARD HEADER
   ═══════════════════════════════════════════════ */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 9px;
  border-bottom: 1px solid var(--border2);
}
.ch-title {
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
}
.ch-sub {
  font-family: var(--f);
  font-size: 9px;
  color: var(--t3);
  margin-top: 1px;
}
.ch-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ═══════════════════════════════════════════════
   GENERAL BUTTONS
   ═══════════════════════════════════════════════ */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--r2);
  font-family: var(--f);
  font-size: 9px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: white;
  color: var(--t2);
  transition: all .12s;
  white-space: nowrap;
}
.btn-outline:hover {
  border-color: var(--t4);
  color: var(--t1);
}
.btn-sm {
  padding: 3px 8px;
  font-size: 10px;
}

/* Live pill */
.live-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: #D1FAE5;
  color: #065F46;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 600;
}
.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  animation: blinkDot 1.5s infinite;
}

/* Map mode buttons */
.map-mode-btn {
  padding: 4px 10px;
  border-radius: var(--r2);
  background: none;
  border: 1px solid var(--border);
  font-family: var(--f);
  font-size: 10px;
  font-weight: 500;
  color: var(--t3);
  cursor: pointer;
  transition: all .12s;
}
.map-mode-btn:hover {
  border-color: var(--t4);
  color: var(--t1);
}
.map-mode-btn.on {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

/* ═══════════════════════════════════════════════
   MAP CARD (base)
   ═══════════════════════════════════════════════ */
.map-card {
  background: var(--white);
  border: 1px solid var(--border) !important;
  border-radius: var(--r) var(--r) 0 0 ;

  box-shadow: var(--sh);
  overflow: hidden;
  animation: fadeUp .32s ease .22s both;
}

.map-container {
 margin:0;
}

/* ═══════════════════════════════════════════════
   MAP OVERLAY CONTROLS (Map/Satellite + Zoom + Fullscreen)
   ═══════════════════════════════════════════════ */
.map-wrap {
  position: relative;
}
.map-overlay-left,
.map-overlay-right {
  position: absolute;
  top: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-overlay-left { left: 10px; }
.map-overlay-right {
  right: 10px;
  flex-direction: column;
  align-items: flex-end;
}
.map-wrap .map-mode-group,
.kv-ip-map-body .map-mode-group {
  display: inline-flex;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  border: 1px solid rgba(0,0,0,.12);
}
.map-wrap .map-mode-group .map-mode-btn,
.kv-ip-map-body .map-mode-group .map-mode-btn {
  padding: 6px 14px;
  background: #fff !important;
  border: none;
  border-right: 1px solid rgba(0,0,0,.12);
  border-radius: 0 !important;
  font-family: var(--f);
  font-size: 11px;
  font-weight: 700;
  color: #0F1923 !important;
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: none !important;
  transition: all .12s;
}
.map-wrap .map-mode-group .map-mode-btn:last-child,
.kv-ip-map-body .map-mode-group .map-mode-btn:last-child {
  border-right: none;
}
.map-wrap .map-mode-group .map-mode-btn:hover,
.kv-ip-map-body .map-mode-group .map-mode-btn:hover {
  background: #F3F5F8 !important;
  color: #0F1923 !important;
}
.map-wrap .map-mode-group .map-mode-btn.on,
.kv-ip-map-body .map-mode-group .map-mode-btn.on {
  background: #22BAFF !important;
  color: #fff !important;
  border-color: #22BAFF;
  box-shadow: none !important;
}
.map-wrap .map-ctrl-btn,
.kv-ip-map-body .map-ctrl-btn {
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--t1);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: all .12s ease;
}
.map-wrap .map-ctrl-btn:hover,
.kv-ip-map-body .map-ctrl-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
/* Hide overlay controls while Google Street View is active inside the map body */
.kv-ip-map-body.street-view-active .map-overlay-left,
.kv-ip-map-body.street-view-active .map-overlay-right {
  display: none;
}

.map-wrap .map-ctrl-btn i,
.kv-ip-map-body .map-ctrl-btn i {
  font-size: 11px;
}

/* ═══════════════════════════════════════════════
   COMBINED PANEL — Dark Operations View
   ═══════════════════════════════════════════════ */
#combined-panel {
  border: none;
}
#combined-panel > .card-head {
  background: #0C1520;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 7px 14px;
}
#combined-panel > .card-head .ch-title {
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  letter-spacing: .12em;
  text-transform: capitalize;
}

/* LIVE pill — emerald glow on dark */
#combined-panel .live-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 99px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.4);
  color: #34D399;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: capitalize;
  box-shadow: 0 0 10px rgba(16,185,129,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
#combined-panel .live-dot {
  width: 6px;
  height: 6px;
  background: #34D399;
  box-shadow: 0 0 6px rgba(52,211,153,.9);
}

/* Auto-refresh (poll) pill on the dark combined panel — indicator + interval control */
.kv-refresh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(34,186,255,.10);
  border: 1px solid rgba(34,186,255,.35);
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  /* Pill sits on the light inner-tabs bar, so text must be dark to be legible. */
  color: #0E5E86;
  white-space: nowrap;
}
.kv-refresh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 6px rgba(34,186,255,.9);
  animation: blinkDot 1.5s infinite;
}
.kv-refresh-label {
  font-weight: 700;
  letter-spacing: .04em;
  color: #213142;
}
.kv-refresh-select {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 700;
  color: #111827;
  background: #fff;
  border: 1px solid rgba(34,186,255,.35);
  border-radius: 5px;
  padding: 1px 4px;
  cursor: pointer;
  outline: none;
}
.kv-refresh-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(34,186,255,.18);
}
.kv-refresh-select option {
  color: #111827;
  background: #fff;
}
.kv-refresh-count {
  color: #0E5E86;
  font-variant-numeric: tabular-nums;
}
.kv-refresh-updated {
  color: #6B7280;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Enable-Sound toggle: browsers block alarm audio until the operator interacts
   with the page once. This gives an explicit, obvious one-click grant + shows
   the current state so it's clear whether alerts will be audible. */
.kv-sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  padding: 3px 10px;
  border-radius: 99px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.kv-sound-toggle .kv-sound-ico { font-size: 10px; }
/* OFF: attention-drawing amber so the operator knows to click once. */
.kv-sound-toggle.kv-sound-off {
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  color: #92400E;
  animation: kvSoundPulse 1.6s ease-in-out infinite;
}
.kv-sound-toggle.kv-sound-off:hover { background: #FDE68A; }
/* ON: calm green, no animation. */
.kv-sound-toggle.kv-sound-on {
  background: #D1FAE5;
  border: 1px solid rgba(16,185,129,.55);
  color: #065F46;
  animation: none;
}
.kv-sound-toggle.kv-sound-on:hover { background: #A7F3D0; }
@keyframes kvSoundPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.0); }
  50%      { box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
}

/* MAP / SATELLITE pills on dark */
#combined-panel .map-mode-btn {
  font-family: var(--f);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 13px;
  border-radius: var(--r2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: all .15s;
}
#combined-panel .map-mode-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.85);
}
#combined-panel .map-mode-btn.on {
  background: #22BAFF;
  border-color: #22BAFF;
  color: #071018;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(34,186,255,.5), inset 0 1px 0 rgba(255,255,255,.25);
}

/* FULLSCREEN pill on dark */
#combined-panel .btn-outline {
  font-family: var(--f);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 4px 11px;
  border-radius: var(--r2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: all .15s;
  margin-bottom:0;
}
#combined-panel .btn-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.85);
}

/* ═══════════════════════════════════════════════
   INNER TABS (under card headers)
   ═══════════════════════════════════════════════ */
.inner-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border2);
  background: var(--white);
}
.inner-tabs-left {
  display: flex;
}
/* Right side of inner-tabs: action buttons + legend */
.inner-tabs-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.inner-tabs-right .obs-utils {
  display: flex;
  align-items: center;
  gap: 6px;
}
.inner-tabs-right .obs-util-btn {
  padding: 3px 10px;
  font-size: 10px;
}
.inner-tabs-right .obs-util-btn i {
  font-size: 10px;
}
.inner-tabs-right .obs-btn-filter {
  padding: 3px 10px;
  font-size: 10px;
}
.inner-tabs-right .obs-btn-filter i {
  font-size: 10px;
}
.inner-tabs .event-type-legend {
  margin-left: 0;
}
.itab {
  padding: 7px 13px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 500;
  color: var(--t3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s;
  user-select: none;
}
.itab:hover { color: var(--t2); }
.itab.on {
  color: var(--t1);
  border-bottom-color: var(--navy);
  font-weight: 600;
}
.itab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
  font-family: var(--f);
}
.itab-count-red {
  background: rgba(239,68,68,.18);
  color: #ce4646;
  border: 1px solid #ce4646;
}
.itab-count-blue {
  background: rgba(34,186,255,.15);
  color: var(--blue);
  border: 1px solid rgba(34,186,255,.4);
}

/* Inner tabs on dark combined panel */
#combined-panel > .inner-tabs {
  border-bottom: 1px solid rgba(255,255,255,.07);
}
#combined-panel > .inner-tabs .itab {
  color: rgba(94,98,98);
  border-bottom-color: transparent;
  font-weight: 500;
}
#combined-panel > .inner-tabs .itab:hover {
  color: rgba(33,33,33);
}
#combined-panel > .inner-tabs .itab.on {
  color: rgba(33,33,33);
  border-bottom-color: var(--blue);
  font-weight: 700;
}
#combined-panel > .inner-tabs .event-type-legend {
  color: rgba(255,255,255,.45);
}
#combined-panel > .inner-tabs .event-type-legend span {
  color: #333333;
}

/* ═══════════════════════════════════════════════
   COMMON TABLE STYLES
   ═══════════════════════════════════════════════ */

/* Toolbar search input */
.tt-search {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  background: var(--page);
  width: 170px;
}
.tt-search input {
  background: none;
  border: none;
  outline: none;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t2);
  width: 100%;
}
.tt-search input::placeholder { color: var(--t4); }

/* Table wrapper */
.tbl-wrap { overflow-x: auto; }

/* Table core */
.tbl {
  width: 100%;
  border-collapse: collapse;
}

/* Table head */
.tbl thead tr { background: var(--navy); }
.tbl th {
  padding: 9px 11px;
  text-align: left;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .055em;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.06);
}
.tbl th:last-child { border-right: none; }
.tbl th:hover { background: #2a3f54; }
.tbl th a { color: rgba(255,255,255,.72); text-decoration: none; }
.tbl th a:hover { color: #fff; text-decoration: none; }

/* Sortable column chevron */
.sort-chev {
  font-size: 8px;
  opacity: .35;
  display: inline-block;
  margin-left: 3px;
  transition: opacity .15s;
}
.tbl th:hover .sort-chev { opacity: .75; }

/* Table body — alternating rows */
.tbl tbody tr:nth-child(odd) td  { background: #FFFFFF; }
.tbl tbody tr:nth-child(even) td { background: #EBF8FF; }
.tbl tbody tr:hover td           { background: #CCF0FF !important; }

/* Inactive rows */
.tbl tbody tr.deleted td,
.tbl tbody .org-inactive td      { background: #F9FAFB !important; opacity: .7; }
.tbl tbody tr.deleted:hover td,
.tbl tbody .org-inactive:hover td { background: #F3F4F6 !important; opacity: 1; }

/* Table cells */
.tbl td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--border2);
  font-family: var(--f);
  font-size: 9px;
  color: var(--t2);
  white-space: nowrap;
  border-right: 1px solid var(--border2);
  transition: background .1s;
}
.tbl td:last-child { border-right: none; }
.tbl tr:last-child td { border-bottom: none; }
.tbl td a { color: var(--blue-mid); font-weight: 500; text-decoration: none; }
.tbl td a:hover { color: var(--blue); text-decoration: underline; }

/* Clickable cell link */
.tbl-link {
  color: var(--blue-mid);
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}
.tbl-link:hover { color: var(--blue); text-decoration: underline; }

/* ═══════════════════════════════════════════════
   TABLE PAGE LAYOUT (shared/table.html redesign)
   ═══════════════════════════════════════════════ */

/* Override old table-container to use new design */
.table-container {
  text-align: left !important;
}
.table-container .page-title {
  font-family: var(--f);
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  padding: 16px 0 12px;
  margin-bottom:5px;
}
.table-container .table-container-inner {
  display: block !important;
  background: var(--white, #fff);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh);
  overflow: hidden;
  animation: fadeUp .3s ease both;
}

/* Toolbar row: filter + new button — hide when empty */
.table-container .table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border2);
}
.table-container .table-toolbar:empty,
.table-container .table-toolbar-empty {
  display: none;
}
.table-container .table-toolbar-left {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* New button in card style */
.table-container .create-new-container {
  float: none !important;
  margin: 0 !important;
}
.table-container .create-new-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: var(--r2);
  background: var(--blue);
  color: var(--navy);
  border: none;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.table-container .create-new-link:hover {
  background: #1ca8e6;
  text-decoration: none;
  color: var(--navy);
}

/* Filter popup z-index fix */
.filter-form-container {
  z-index: 1000 !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.18) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
}

/* Filter button in card style */
.table-container .filter-button-container {
  float: none !important;
}
.table-container .filter-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: var(--r2);
  background: white;
  color: var(--t2);
  border: 1px solid var(--border);
  font-family: var(--f);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all .12s;
}
.table-container .filter-button:hover {
  border-color: var(--t4);
  color: var(--t1);
}

/* Result count */
.table-container .count-container {
  text-align: left !important;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t3);
  padding: 10px 16px 8px;
}

/* Table inside card — converted to .tbl styling */
.table-container table {
  width: 100%;
  border-collapse: collapse;
}
.table-container table tr { height: unset !important; }
.table-container table thead tr { background: var(--navy) !important; }
.table-container table thead td,
.table-container table thead th {
  padding: 9px 11px !important;
  text-align: left;
  font-family: var(--f);
  font-size: 9px !important;
  font-weight: 600;
  letter-spacing: .055em;
  color: rgba(255,255,255,.72) !important;
  background: var(--navy) !important;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  text-transform: capitalize;
}
.table-container table thead td:last-child,
.table-container table thead th:last-child { border-right: none !important; }
.table-container table thead td:hover,
.table-container table thead th:hover { background: #2a3f54 !important; }
.table-container table thead td a,
.table-container table thead th a {
  color: rgba(255,255,255,.72) !important;
  text-decoration: none !important;
}
.table-container table thead td a:hover,
.table-container table thead th a:hover { color: #fff !important; }

/* Body rows — alternating */
.table-container table tbody tr:nth-child(odd) td  { background: #FFFFFF !important; }
.table-container table tbody tr:nth-child(even) td { background: #EBF8FF !important; }
.table-container table tbody tr:hover td           { background: #CCF0FF !important; }

/* Inactive / deleted rows */
.table-container table tbody tr.deleted td { background: #F9FAFB !important; opacity: .7; }
.table-container table tbody tr.deleted:hover td { background: #F3F4F6 !important; opacity: 1; }

/* Body cells */
.table-container table tbody td {
  padding: 9px 11px !important;
  border-bottom: 1px solid var(--border2) !important;
  border-top: none !important;
  border-left: none !important;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t2);
  white-space: nowrap;
  border-right: 1px solid var(--border2) !important;
  transition: background .1s;
}
.table-container table tbody td:last-child { border-right: none !important; }
.table-container table tbody tr:last-child td { border-bottom: none !important; }
.table-container table tbody td a {
  color: var(--blue-mid) !important;
  font-weight: 500;
  text-decoration: none !important;
}
.table-container table tbody td a:hover { color: var(--blue) !important; text-decoration: underline !important; }

/* Pagination — restyle to match new pg-btn, right-aligned */
.table-container .pagination-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 14px;
  border-top: 1px solid var(--border2);
  font-family: var(--f);
  font-size: 9px;
  color: var(--t3);
}
.table-container .pagination-container:empty,
.table-container .pagination-container:not(:has(.pagination)) {
  padding: 0;
  border-top: none;
}
.table-container .pagination-container .pagination {
  display: flex;
  gap: 2px;
  align-items: center;
}
.table-container .pagination-container .pagination a,
.table-container .pagination-container .pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--r2);
  background: none;
  border: 1px solid transparent;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t3);
  cursor: pointer;
  text-decoration: none;
  transition: all .1s;
}
.table-container .pagination-container .pagination a:hover {
  background: var(--page);
  border-color: var(--border2);
  color: var(--t1);
  text-decoration: none;
}
.table-container .pagination-container .pagination span.current {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.table-container .pagination-container .pagination span.disabled {
  color: var(--t4);
  cursor: default;
}

/* ═══════════════════════════════════════════════
   TABLE FOOTER
   ═══════════════════════════════════════════════ */
.tbl-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--border2);
  font-family: var(--f);
  font-size: 9px;
  color: var(--t3);
}
.pagination { display: flex; gap: 2px; }
.pg-btn {
  width: 24px;
  height: 24px;
  border-radius: var(--r2);
  background: none;
  border: 1px solid transparent;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .1s;
}
.pg-btn:hover {
  background: var(--page);
  border-color: var(--border2);
  color: var(--t1);
}
.pg-btn.on {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

/* ═══════════════════════════════════════════════
   OBSERVER PAGE
   ═══════════════════════════════════════════════ */

/* Override old incident-list-container */
.observer-view .incident-list-container {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Override old incident-list-pane */
.observer-view .incident-list-pane {
  width: 100% !important;
  max-width: none !important;
}
.observer-view .incident-list-pane table {
  width: 100% !important;
}

/* Page header */
.observer-view .page-hdr,
.closed-incident-view .page-hdr {
  padding: 0;
}

/* Live clock */
.observer-view #live-clock,
.closed-incident-view #live-clock {
  font-size: 9px;
  font-weight: 500;
  color: var(--t3);
  font-family: var(--f);
  text-align: right;
}

/* Event type legend in toolbar */
.observer-view .event-type-legend {
  display: flex !important;
  align-items: center;
  gap: 4px;
  float: none !important;
  height: auto !important;
  font-family: var(--f);
  font-size: 10px;
  color: var(--t3);
  margin-left: 12px;
}
.observer-view .event-type-legend img {
  display: none;
}
.observer-view .event-type-legend span {
  padding: 0 4px 0 1px !important;
  font-size: 10px;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-red    { background: var(--red); }
.legend-purple { background: #A855F7; }
.legend-yellow { background: #EAB308; }
.legend-gold   { background: #F97316; }
.legend-blue   { background: var(--blue); }

/* ── Collapsible columns (User / Monitor detail) ── */
.collapsible-col.user-detail,
.collapsible-col.monitor-detail {
  display: none;
}

/* Toggle icon (▶) for expanding grouped columns */
.toggle-icon {
  color: #F59E0B;
  font-weight: bold;
  font-size: 9px;
  cursor: pointer;
  margin-left: 5px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all .2s;
  user-select: none;
  display: inline-block;
}
.toggle-icon:hover {
  background: rgba(245,158,11,.15);
  color: #D97706;
}
.toggle-icon.rotated {
  transform: rotate(90deg);
}

/* ── Map inside combined panel ── */
#combined-panel .map-container {
  width: 100% !important;
  height: 310px;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Drag handle below map — user drags up/down to resize map vertically.
   Double-click resets to default. */
.map-resize-handle {
  height: 8px;
  background: #F3F5F8;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease;
  user-select: none;
}
.map-resize-handle:hover {
  background: #E3F4FF;
}
.map-resize-handle .map-resize-grip {
  width: 36px;
  height: 3px;
  background: #9CA3AF;
  border-radius: 99px;
  transition: background .12s ease;
}
.map-resize-handle:hover .map-resize-grip {
  background: var(--blue);
}
/* While dragging: lock cursor + disable text selection across the page */
body.map-resizing {
  cursor: row-resize !important;
  user-select: none !important;
}
body.map-resizing iframe {
  pointer-events: none;
}
/* Hide handle in fullscreen — there's no table to resize against */
.map-wrap:fullscreen + .map-resize-handle,
.map-wrap.map-is-fullscreen + .map-resize-handle {
  display: none;
}
/* Normal mode: hide Google's own fullscreen button (the page uses a custom one).
   Keep Map/Satellite and the Street View Pegman visible. */
#map-canvas .gm-fullscreen-control {
  display: none !important;
}
/* Street View active: hide our custom Map/Satellite + zoom/home/fullscreen
   overlays so only the Pegman's exit arrow remains visible. */
.map-wrap.street-view-active .map-overlay-left,
.map-wrap.street-view-active .map-overlay-right {
  display: none !important;
}
/* Fullscreen mode: fullscreen the .map-wrap (not just the canvas) so our
   custom overlays (Map/Satellite + zoom/home/fullscreen) stay visible.
   Stretch the canvas inside the fullscreened wrap. */
.map-wrap:fullscreen,
.map-wrap.map-is-fullscreen {
  width: 100% !important;
  height: 100% !important;
  background: #fff;
}
.map-wrap:fullscreen #map-canvas,
.map-wrap.map-is-fullscreen #map-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ── Table Card ── */
.obs-table-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: var(--sh);
  overflow: hidden;
  animation: fadeUp .32s ease .2s both;
}

/* Toolbar */
.obs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border2);
}
.obs-utils {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Action buttons (shared base) ── */
.obs-util-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 5px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .18s ease;
  position: relative;
  overflow: hidden;
}
.obs-util-btn i {
  font-size: 12px;
  transition: transform .18s ease;
}
.obs-util-btn:hover i {
  transform: scale(1.15);
}
.obs-util-btn span {
  pointer-events: none;
}

/* ── Share button ── */
.obs-btn-share {
  color: var(--blue) !important;
  background: rgba(34, 186, 255, 0.08) !important;
  border-color: rgba(34, 186, 255, 0.2) !important;
}
.obs-btn-share:hover {
  background: rgba(34, 186, 255, 0.16) !important;
  border-color: rgba(34, 186, 255, 0.35) !important;
  box-shadow: 0 2px 8px rgba(34, 186, 255, 0.15);
}

/* ── Unlock button ── */
.obs-btn-unlock {
  color: #16A34A !important;
  background: rgba(22, 163, 74, 0.08) !important;
  border-color: rgba(22, 163, 74, 0.2) !important;
}
.obs-btn-unlock:hover {
  background: rgba(22, 163, 74, 0.16) !important;
  border-color: rgba(22, 163, 74, 0.35) !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}

/* ── Close button ── */
.obs-btn-close {
  color: #DC2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.2) !important;
}
.obs-btn-close:hover {
  background: rgba(220, 38, 38, 0.16) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

/* ── Filter button ── */
.obs-btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 5px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .18s ease;
  color: var(--navy) !important;
  background: rgba(33, 49, 66, 0.07) !important;
  border-color: rgba(33, 49, 66, 0.15) !important;
}
.obs-btn-filter i {
  font-size: 12px;
  transition: transform .18s ease;
}
.obs-btn-filter:hover {
  background: rgba(33, 49, 66, 0.14) !important;
  border-color: rgba(33, 49, 66, 0.3) !important;
  box-shadow: 0 2px 8px rgba(33, 49, 66, 0.1);
}
.obs-btn-filter:hover i {
  transform: scale(1.15);
}

/* Reset old kuvrr.css background-image & font-size:0 overrides */
#share-link.obs-util-btn,
#park-link.obs-util-btn,
#incidentClose-link.obs-util-btn {
  font-size: 9px !important;
  background-image: none !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
#share-link.obs-util-btn::before,
#park-link.obs-util-btn::before,
#incidentClose-link.obs-util-btn::before {
  content: none !important;
  display: none !important;
}

.obs-toolbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Override old filter styles inside table card */
.obs-table-card .incident-table-filters {
  float: none !important;
  padding: 0 !important;
}
.obs-table-card .incident-table-filters input[type="button"] {
  display: none;
}

/* Override table-container inside table card */
.obs-table-card .table-container {
  border: none !important;
  border-radius: 0 !important;
}

/* ── Incident Table Redesign ── */

/* Table container: horizontal scroll with bottom scrollbar (native) */
.obs-table-card .table-container {
  overflow-x: auto !important;
  overflow-y: auto;
}

/* Top scrollbar mirror */
.obs-top-scrollbar {
  overflow-x: auto;
  overflow-y: hidden;
}
.obs-top-scrollbar-inner {
  height: 1px;
}

.observer-view #incident-table,
.closed-incident-view #incident-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  min-width: 1080px;
}
/* Column widths — Observer: Checkbox(40) | Event ID(70) | Received On(210) | Event Type(100) | ... | Event Status(90) */
.observer-view #incident-table td:nth-child(1)  { width: 40px; text-align: center; }
.observer-view #incident-table td:nth-child(2)  { width: 70px; }
.observer-view #incident-table td:nth-child(3)  { width: 210px; }
.observer-view #incident-table td:nth-child(4)  { width: 100px; }
.observer-view #incident-table td:nth-child(14) { width: 90px; }
/* Tracker Events tab swaps Event Type for Shipment Name in column 4.
   Shipment names (e.g. "KUVRR-IND-Apr 28-2026-01") are much longer than
   event-type labels, so the 100px default overflows into Event Source.
   Widen the column on this tab and clip with an ellipsis as a safety net
   for unusually long names; tbody cells inherit `white-space:nowrap` from
   the shared rule above. */
.observer-view.observer-tracker-kind #incident-table td:nth-child(4) {
  width: 200px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.observer-view.observer-tracker-kind #incident-table tbody td:nth-child(4) > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Column widths — Closed: Event ID(70) | Received On(210) | Event Type(100) | ... | Event Status(90) */
.closed-incident-view #incident-table td:nth-child(1)  { width: 70px; }
.closed-incident-view #incident-table td:nth-child(2)  { width: 210px; }
.closed-incident-view #incident-table td:nth-child(3)  { width: 100px; }
.closed-incident-view #incident-table td:nth-child(13) { width: 90px; }


.observer-view #incident-table thead tr,
.closed-incident-view #incident-table thead tr {
  background: var(--navy) !important;
}
.observer-view #incident-table thead td,
.closed-incident-view #incident-table thead td {
  padding: 9px 11px !important;
  text-align: left;
  font-family: var(--f);
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .055em;
  color: rgba(255,255,255,.95) !important;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: none !important;
  border-radius: 0;
  background: var(--navy) !important;
}
.observer-view #incident-table thead td:last-child,
.closed-incident-view #incident-table thead td:last-child {
  border-right: none;
}

/* ── Sortable Column Headers ── */
.observer-view #incident-table thead td.sortable-th,
.closed-incident-view #incident-table thead td.sortable-th {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.observer-view #incident-table thead td.sortable-th:hover,
.closed-incident-view #incident-table thead td.sortable-th:hover {
  background: rgba(255,255,255,.08) !important;
}
.observer-view #incident-table thead td.sortable-th .sort-icon,
.closed-incident-view #incident-table thead td.sortable-th .sort-icon {
  font-size: 9px;
  margin-left: 3px;
  color: rgba(255,255,255,.3);
  display: inline-block;
  transition: color .15s ease, transform .15s ease;
}
.observer-view #incident-table thead td.sortable-th.sort-active .sort-icon,
.closed-incident-view #incident-table thead td.sortable-th.sort-active .sort-icon {
  color: #22BAFF;
}
.observer-view #incident-table thead td.sortable-th.sort-asc .sort-icon,
.closed-incident-view #incident-table thead td.sortable-th.sort-asc .sort-icon {
  transform: rotate(180deg);
}
.observer-view #incident-table thead td.sortable-th.sort-desc .sort-icon,
.closed-incident-view #incident-table thead td.sortable-th.sort-desc .sort-icon {
  transform: rotate(0deg);
}

/* Alternating rows */
.observer-view #incident-table tbody tr:nth-child(odd) td,
.closed-incident-view #incident-table tbody tr:nth-child(odd) td {
  background: #FFFFFF;
}
.observer-view #incident-table tbody tr:nth-child(even) td,
.closed-incident-view #incident-table tbody tr:nth-child(even) td {
  background: #EBF8FF;
}
.observer-view #incident-table tbody tr:hover td,
.closed-incident-view #incident-table tbody tr:hover td {
  background: #CCF0FF !important;
}
.observer-view #incident-table tbody td,
.closed-incident-view #incident-table tbody td {
  padding: 9px 11px !important;
  border-bottom: 1px solid var(--border2);
  font-family: var(--f);
  font-size: 9px !important;
  color: var(--t2) !important;
  white-space: nowrap;
  border-right: 1px solid var(--border2);
  transition: background .1s;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4;
}
.observer-view #incident-table tbody td:last-child,
.closed-incident-view #incident-table tbody td:last-child {
  border-right: none;
}

/* Checkbox styling */
.observer-view #incident-table input[type="checkbox"],
.closed-incident-view #incident-table input[type="checkbox"] {
  accent-color: var(--blue);
  cursor: pointer;
}

/* ── New incident row pulse animations ── */
/* Uses inset box-shadow to overlay color on top of any td background */

/* Kill old tr-level animations from kuvrr.css / emc.css */
.observer-view #incident-table tr.new,
.observer-view #incident-table tr.new_tip,
.observer-view #incident-table tr.new_tip_chat,
.observer-view #incident-table tr.new_thermal,
.observer-view #incident-table tr.new_asset {
  animation: none !important;
  -webkit-animation: none !important;
  background: none !important;
}

/* New-incident indicator (Safety + Tracker tabs).
   Originally pulsed the whole row in the kind-specific colour, which
   made the table strobe heavily when several events arrived in quick
   succession. Now: leave the row styled normally and surface "new" via
   a small pulsing dot in front of the Event ID cell. The dot colour
   is per-kind (set via the --kv-new-dot-rgb custom property below) and
   the keyframe expands a fading ring outward -- same idiom used for the
   "Live" pill elsewhere in the app. */
.observer-view #incident-table tbody tr.new td,
.observer-view #incident-table tbody tr.new_tip td,
.observer-view #incident-table tbody tr.new_tip_chat td,
.observer-view #incident-table tbody tr.new_thermal td,
.observer-view #incident-table tbody tr.new_asset td {
  font-weight: 600 !important;
  animation: none !important;
  box-shadow: none !important;
}
/* Event ID is column 2 (Checkbox | Event ID | Received On | ...).
   Render the dot AFTER the ID text using inline-block so it flows
   naturally with the text -- the cell width stays the same and the
   dot sits a short gap to the right of the ID, no matter the digit
   count. */
.observer-view #incident-table tbody tr.new td:nth-child(2),
.observer-view #incident-table tbody tr.new_tip td:nth-child(2),
.observer-view #incident-table tbody tr.new_tip_chat td:nth-child(2),
.observer-view #incident-table tbody tr.new_thermal td:nth-child(2),
.observer-view #incident-table tbody tr.new_asset td:nth-child(2) {
  position: relative;
}
.observer-view #incident-table tbody tr.new td:nth-child(2)::after,
.observer-view #incident-table tbody tr.new_tip td:nth-child(2)::after,
.observer-view #incident-table tbody tr.new_tip_chat td:nth-child(2)::after,
.observer-view #incident-table tbody tr.new_thermal td:nth-child(2)::after,
.observer-view #incident-table tbody tr.new_asset td:nth-child(2)::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--kv-new-dot-rgb, 191, 96, 13));
  animation: kvNewIncidentDot 1.2s ease-out infinite;
}
/* Per-kind colour. Each class sets the same RGB triple as the original
   row-pulse start colour so the dot reads as the same "alert" hue. */
.observer-view #incident-table tbody tr.new td:nth-child(2)::after {
  --kv-new-dot-rgb: 255, 59, 64;        /* #ff3b40 SOS / Emergency */
}
.observer-view #incident-table tbody tr.new_tip td:nth-child(2)::after {
  --kv-new-dot-rgb: 234, 179, 8;        /* #EAB308 Tips */
}
.observer-view #incident-table tbody tr.new_tip_chat td:nth-child(2)::after {
  --kv-new-dot-rgb: 64, 167, 73;        /* #40A749 Tip chat */
}
.observer-view #incident-table tbody tr.new_thermal td:nth-child(2)::after {
  --kv-new-dot-rgb: 147, 112, 219;      /* #9370DB Thermal */
}
.observer-view #incident-table tbody tr.new_asset td:nth-child(2)::after {
  --kv-new-dot-rgb: 191, 96, 13;        /* #bf600d Asset Tracking */
}
@keyframes kvNewIncidentDot {
  0%   { box-shadow: 0 0 0 0 rgba(var(--kv-new-dot-rgb, 191, 96, 13), .65); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--kv-new-dot-rgb, 191, 96, 13), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--kv-new-dot-rgb, 191, 96, 13), 0); }
}

/* Legacy row-wide pulseSOS/pulseTip/pulseChat/pulseThermal/pulseAsset
   keyframes were removed when the new-incident indicator switched from
   a row-wide pulse to a per-row dot in the Received On column. The
   `tr.new* td` rules above no longer reference them, so the keyframes
   would just be dead bytes. The dot animation is `kvNewIncidentDot`. */

/* Status messages eye icon */
.observer-view #incident-table .status-messages .icon,
.closed-incident-view #incident-table .status-messages .icon {
  font-size: 14px;
  color: var(--blue);
}

/* Condensed profile overrides */
.observer-view .condensed-profile,
.closed-incident-view .condensed-profile {
  cursor: pointer;
}

/* Empty incidents table */
.observer-view .empty-incidents-table,
.closed-incident-view .empty-incidents-table {
  padding: 40px 20px;
  text-align: center;
  font-family: var(--f);
}
.observer-view .empty-incidents-table p,
.closed-incident-view .empty-incidents-table p {
  color: var(--t3);
  font-size: 13px;
}
.observer-view .empty-incidents-table .btn,
.closed-incident-view .empty-incidents-table .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: var(--r2);
  background: var(--navy);
  color: white !important;
  border: none;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.observer-view .empty-incidents-table .btn:hover,
.closed-incident-view .empty-incidents-table .btn:hover {
  background: var(--navy-d);
}
.observer-view .empty-incidents-table .btn:after,
.closed-incident-view .empty-incidents-table .btn:after {
  display: none !important;
}

/* ── Old layout overrides ── */
/* Hide old-style list top (replaced by page-hdr + inner-tabs) */
.observer-view .incident-list-top,
.closed-incident-view .incident-list-top {
  display: none !important;
}

/* Override old incident-table-utilities styling */
.observer-view .incident-table-utilities {
  display: none !important;
}

/* Override old incident-table-filters outside obs-table-card */
.observer-view > .incident-list-pane > .incident-list-container > .incident-table-filters {
  display: none !important;
}

/* Override old map-container sizes */
.observer-view .map-container,
.closed-incident-view .map-container {
  border-radius: 0 !important;
}

/* ── Incident-open layout ── */
.incident-open #combined-panel .map-container {
  height: 300px !important;
}
.incident-open .stat-bar {
  display: none !important;
}
.incident-open .event-type-legend {
  display: none !important;
}

/* ═══════════════════════════════════════════════
   CLOSED INCIDENTS PAGE
   ═══════════════════════════════════════════════ */

/* Override old closed-incident-list-container */
.closed-incident-view .closed-incident-list-container {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Override old closed-incident-list-pane */
.closed-incident-view .closed-incident-list-pane {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin-left: 0 !important;
}
.closed-incident-view .closed-incident-list-pane table {
  width: 100% !important;
}

/* Hide old standalone filter button */
.closed-incident-view > .closed-incident-list-pane > .closed-incident-list-container > .incident-table-filters {
  display: none !important;
}

/* Pagination inside table footer */
.closed-incident-view .tbl-footer .pagination-container {
  margin: 0;
  padding: 0;
}

/* Column widths — 13 columns (no checkbox, no eye icon) */
.closed-incident-view #incident-table td:nth-child(1)  { width: 56px !important; }  /* Event ID */
.closed-incident-view #incident-table td:nth-child(2)  { width: 100px !important; } /* Name */
.closed-incident-view #incident-table td:nth-child(3)  { width: 110px !important; } /* Org Name */
.closed-incident-view #incident-table td:nth-child(4)  { width: 72px !important; }  /* Event Status */
.closed-incident-view #incident-table td:nth-child(5)  { width: 90px !important; }  /* Received On */
.closed-incident-view #incident-table td:nth-child(6)  { width: 80px !important; }  /* Location */
.closed-incident-view #incident-table td:nth-child(7)  { width: 85px !important; }  /* Observer */
.closed-incident-view #incident-table td:nth-child(8)  { width: 76px !important; }  /* Last Action */
.closed-incident-view #incident-table td:nth-child(9)  { width: 90px !important; }  /* Last Action Date/Time */
.closed-incident-view #incident-table td:nth-child(10) { width: 76px !important; }  /* Event Type */
.closed-incident-view #incident-table td:nth-child(11) { width: 90px !important; }  /* Event Source */
.closed-incident-view #incident-table td:nth-child(12) { width: 76px !important; }  /* User Last Action */
.closed-incident-view #incident-table td:nth-child(13) { width: 90px !important; }  /* User Last Action Date/Time */

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media only screen and (max-width: 1440px) {
  /* Auto-collapse sidebar to icon-only (46px) — don't hide it */
  body.loggedin.has-sidebar {
    grid-template-columns: 46px 1fr;
  }
  .loggedin .sidebar,
  aside.sidebar {
    width: 46px !important;
    min-width: 46px !important;
    z-index: 150;
  }
  /* Hide text, arrows, sub-items, dividers, pills, org-name */
  aside.sidebar .sbi-plbl,
  aside.sidebar .sbi-arrow,
  aside.sidebar .sbi-children,
  aside.sidebar .sb-div,
  aside.sidebar .sb-cnt,
  aside.sidebar .sb-org-name {
    opacity: 0;
    width: 0; height: 0;
    overflow: hidden;
    pointer-events: none;
  }
  aside.sidebar .sbi-children { max-height: 0 !important; }
  aside.sidebar .sbi.sub { display: none; }
  /* Center icons in parent items */
  aside.sidebar .sbi-parent,
  aside.sidebar .sbi:not(.sub) {
    justify-content: center;
    padding: 12px 0;
  }
  aside.sidebar .sbi-parent .sbi-left,
  aside.sidebar .sbi:not(.sub) .sbi-left {
    gap: 0;
    justify-content: center;
  }
  /* Hide toggle — always collapsed at this width */
  .sb-toggle {
    display: none !important;
  }
  /* Topbar brand collapses with sidebar */
  .topbar-brand {
    width: 46px;
    border-right: none;
    padding: 0 8px;
    justify-content: center;
  }
  .topbar-brand a { display: none; }
  /* Stat bar stacks vertically */
  .stat-bar {
    flex-direction: column;
  }
  .stat-section-tracker {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  /* ── Flyout submenus for media-query collapsed sidebar ── */
  /* Allow flyouts to escape sidebar overflow */
  .sidebar,
  aside.sidebar {
    overflow: visible !important;
  }
  aside.sidebar .sb-section {
    position: relative;
  }
  /* Tooltip on hover */
  aside.sidebar .sbi-parent[data-title] {
    position: relative;
  }
  aside.sidebar .sbi-parent[data-title]::after {
    content: attr(data-title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    background: var(--white);
    color: var(--t1);
    font-size: 9px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 6px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
    z-index: 1000;
  }
  aside.sidebar .sbi-parent[data-title]:hover::after {
    opacity: 1;
  }
  aside.sidebar .sbi-parent[data-title].sb-flyout-open::after {
    opacity: 0 !important;
    display: none;
  }
  /* Flyout panel */
  aside.sidebar .sb-flyout-open + .sbi-children {
    display: block !important;
    position: absolute;
    left: 46px;
    top: 0;
    width: 200px;
    max-height: 70vh !important;
    height: auto !important;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0 var(--r) var(--r) 0;
    box-shadow: 4px 2px 12px rgba(0,0,0,.1);
    z-index: 999;
    padding: 6px 0;
    border-left: 2px solid var(--blue);
    animation: fadeUp .15s ease;
  }
  /* Restore sub items inside flyout */
  aside.sidebar .sb-flyout-open + .sbi-children .sbi.sub,
  aside.sidebar .sb-flyout-open + .sbi-children .sbi.sub.deep,
  aside.sidebar .sb-flyout-open + .sbi-children .sbi-parent.sub-parent {
    display: flex !important;
  }
  /* Restore labels and arrows inside flyout */
  aside.sidebar .sb-flyout-open + .sbi-children .sbi-plbl,
  aside.sidebar .sb-flyout-open + .sbi-children .sbi-arrow,
  aside.sidebar .sb-flyout-open + .sbi-children .sb-cnt {
    display: initial !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  /* Nested children inside flyout */
  aside.sidebar .sb-flyout-open + .sbi-children .sbi-children {
    display: block !important;
    position: static;
    width: auto;
    max-height: none !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    border: none;
    border-left: none;
    box-shadow: none;
    padding: 0;
    padding-left: 8px;
    margin-left: 0;
    background: transparent;
  }
  /* Remove tree connectors inside flyout */
  aside.sidebar .sb-flyout-open + .sbi-children .sbi.sub::before,
  aside.sidebar .sb-flyout-open + .sbi-children .sbi-parent.sub-parent::before {
    display: none !important;
  }
  /* Flyout items styling */
  aside.sidebar .sb-flyout-open + .sbi-children .sbi {
    justify-content: flex-start;
    padding: 7px 12px;
    margin: 1px 5px;
    padding-left: 12px;
  }
  aside.sidebar .sb-flyout-open + .sbi-children .sbi.sub {
    padding-left: 12px;
    border-radius: 7px;
  }
  aside.sidebar .sb-flyout-open + .sbi-children .sbi.sub.deep {
    padding-left: 24px;
  }
  aside.sidebar .sb-flyout-open + .sbi-children .sbi-left {
    gap: 8px;
    justify-content: flex-start;
  }
  aside.sidebar .sb-flyout-open + .sbi-children .sbi-parent {
    justify-content: space-between;
    padding: 7px 12px;
    margin: 1px 5px;
  }
  aside.sidebar .sb-flyout-open + .sbi-children .sbi-parent.sub-parent {
    padding-left: 12px;
  }
}
/* Very small screens — hide sidebar completely */
@media only screen and (max-width: 600px) {
  body.loggedin.has-sidebar {
    grid-template-columns: 1fr;
  }
  .loggedin .sidebar,
  aside.sidebar {
    display: none !important;
  }
  .sb-toggle {
    display: none !important;
  }
  .loggedin.has-sidebar #content {
    grid-column: 1;
  }
  .topbar-brand {
    width: auto;
    padding: 0 10px;
  }
  .topbar-brand a { display: block; }
}
@media only screen and (max-width: 1200px) {
  .topbar-nav { gap: 0; }
  .topbar-icons { gap: 4px; }
  .tb-nav-btn { padding: 5px 8px; font-size: 8px; }
  .tb-nav-btn i { font-size: 14px; }
  .tb-nav-btn span { display: none; }
  .tb-icon { width: 26px; height: 26px; }
  .tb-icon svg { width: 11px; height: 11px; }
}
@media only screen and (max-width: 768px) {
  .stat-items {
    flex-wrap: wrap;
    gap: 10px;
  }
  .tabs-search {
    display: none;
  }
}

/* ═══════════════════════════════════════════════
   FILTER POPUP / MODAL REDESIGN
   ═══════════════════════════════════════════════ */

/* Overlay */
#modal-container {
  background-color: rgba(17,24,39,.35) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Form container */
.popup-forms {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: none  !important;
  border-radius: 10px !important;
  background: white !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.08) !important;
  padding: 0 !important;
  width: 440px;
  max-width: 92vw;
  overflow: hidden !important;
  font-family: var(--f);
  animation: fadeUp .2s ease both;
}

/* When .popup-forms is inside a Bootstrap modal, reset fixed positioning and show it */
.modal .popup-forms,
.modal-content .popup-forms {
  display: block !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: auto !important;
}
.modal .popup-forms::before,
.modal-content .popup-forms::before {
  display: none !important;
}

/* ═══════════════════════════════════════════
   SHARE EVENT MODAL — kv-share-* classes
   ═══════════════════════════════════════════ */
.kv-share-dialog {
  max-width: 520px;
  margin: 80px auto;
}
.kv-share-content {
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.2);
  font-family: var(--f);
}
/* Blue header bar */
.kv-share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--blue);
  padding: 14px 18px;
}
.kv-share-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kv-share-header-icon {
  font-size: 16px;
  color: #fff;
}
.kv-share-header-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}
.kv-share-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
  padding: 0 2px;
}
.kv-share-close:hover { opacity: 1; }

/* Body */
.kv-share-body {
  padding: 18px 20px 10px;
  background: #fff;
}
/* Event info line */
.kv-share-event-info {
  font-size: 12px;
  color: var(--t3);
  padding: 8px 12px;
  background: var(--page);
  border-radius: 5px;
  margin-bottom: 16px;
}
.kv-share-event-link {
  color: var(--blue) !important;
  font-weight: 600;
  text-decoration: none !important;
}
.kv-share-event-link:hover { text-decoration: underline !important; }

/* Section label (SHARE METHOD, RECIPIENTS) */
.kv-share-section {
  margin-bottom: 16px;
}
.kv-share-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: .06em;
  color: var(--t2);
  margin-bottom: 8px;
}

/* Radio buttons */
.kv-share-radios {
  display: flex;
  align-items: center;
  gap: 24px;
}
.kv-share-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--t1);
  cursor: pointer;
  margin: 0;
}
.kv-share-radio input[type="radio"] {
  accent-color: var(--blue);
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* Checkbox option */
.kv-share-option {
  margin-bottom: 14px;
}
.kv-share-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  margin: 0;
}
.kv-share-checkbox-label input[type="checkbox"] {
  accent-color: var(--blue);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* Text input / textarea */
.kv-share-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  font-family: var(--f);
  font-size: 12px;
  color: var(--t1);
  background: #fff;
  resize: vertical;
  transition: border-color .15s;
}
.kv-share-input:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(34,186,255,.12);
}
.kv-share-input::placeholder {
  color: var(--t4);
}
/* Red border + soft red glow on invalid invite fields. Cleared on input. */
.kv-share-input.kv-invalid,
input.kv-invalid,
textarea.kv-invalid {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.14) !important;
}
.kv-share-input.kv-invalid:focus,
input.kv-invalid:focus,
textarea.kv-invalid:focus {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.20) !important;
}
.kv-share-hint {
  display: block;
  font-size: 10px;
  color: var(--t4);
  margin-top: 4px;
}
.kv-share-file {
  font-size: 9px;
  color: var(--t2);
}

/* Footer */
.kv-share-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  background: #fff;
  border-top: 1px solid var(--border2);
}
.kv-share-btn {
  padding: 8px 20px;
  border-radius: 5px;
  font-family: var(--f);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity .15s;
}
.kv-share-btn:hover { opacity: .88; }
.kv-share-btn-primary {
  background: var(--blue);
  color: #fff;
}
.kv-share-btn-cancel {
  background: #e5e7eb;
  color: var(--t2);
}

/* ═══════════════════════════════════════════
   CONFERENCE CALL LIST — grouped rows
   ═══════════════════════════════════════════ */
.kv-cc-group-row { background: #F8FAFC !important; }
.kv-cc-group-row:hover { background: #EFF6FF !important; }
.kv-cc-sub-row { background: #FAFBFD !important; }
.kv-cc-sub-row td { border-bottom: 1px solid #F0F2F5 !important; font-size: 9px; color: var(--t2); }
.kv-cc-sub-row:last-of-type td { border-bottom: 2px solid var(--border) !important; }

/* ═══════════════════════════════════════════
   CONFERENCE CALL MODAL — kv-call-* classes
   ═══════════════════════════════════════════ */
#conferenceCallModal { transition: width 0.2s ease; }
#conferenceCallModal .select2-container { width: 100% !important; }
#conferenceCallModal .select2-container--open .select2-dropdown { z-index: 10000; }
#conferenceCallModal .select2-search__field { min-width: 100px !important; }
#conferenceCallModal .select2-results__options { max-height: 250px !important; }
@keyframes confCallSpin { to { transform: rotate(360deg); } }
@keyframes confCallPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.kv-call-instruction {
  display: flex;
  align-items: flex-start;
  background: #EFF6FF;
  border: 1px solid rgba(34,186,255,.2);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 9px;
  font-weight: 500;
  color: var(--t2);
  line-height: 1.5;
  font-family: var(--f);
}

.kv-call-window {
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,.2);
  overflow: visible;
  background: #fff;
  font-family: var(--f);
}
/* Blue header (reuses share-modal pattern) */
.kv-call-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--blue);
  padding: 14px 18px;
  border-radius: 10px 10px 0 0;
  cursor: move;
}
.kv-call-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kv-call-header-icon {
  font-size: 16px;
  color: #fff;
}
.kv-call-header-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}
.kv-call-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
  padding: 0 2px;
}
.kv-call-close:hover { opacity: 1; }

/* Send Call Invite, Make a Call, Protocol modals: navy header for stronger contrast */
#mediaInviteModal .kv-call-header,
#conferenceCallModal .kv-call-header,
#protocolPopup .kv-call-header { background: var(--navy); }

/* Body */
.kv-call-body {
  padding: 18px 20px 10px;
  overflow-y: auto;
  max-height: calc(100vh - 160px);
}
.kv-call-event-info {
  font-size: 12px;
  color: var(--t3);
  padding: 8px 12px;
  background: var(--page);
  border-radius: 5px;
  margin-bottom: 16px;
}
.kv-call-event-link {
  color: var(--blue) !important;
  font-weight: 600;
  text-decoration: none !important;
}
.kv-call-event-link:hover { text-decoration: underline !important; }

.kv-call-error {
  /* Stick the error banner to the top of the scrollable popup body so the
     operator never misses a validation message, even if they were focused
     on a field further down the form. */
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.08);
}
/* Same sticky treatment for the success banner that sits next to it. */
#invite-success {
  position: sticky;
  top: 0;
  z-index: 5;
}
.kv-call-field {
  margin-bottom: 16px;
}
.kv-call-field-label {
  display: block;
  font-weight: 700;
  font-size: 9px;
  color: var(--t2);
  text-transform: capitalize;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.kv-call-hint {
  margin: 6px 0 0;
  font-size: 9px;
  color: var(--t4);
}

/* ============================================================
   Send Call Invite — compact, single-row label+input layout.
   Scoped to #mediaInviteModal.kv-mi-compact so it ONLY applies
   to the standalone /media_invite/list/ popup. The incident-
   detail popup (same #mediaInviteModal id, no kv-mi-compact
   class) keeps its original kv-call-window styling unchanged.
   ============================================================ */
#mediaInviteModal.kv-mi-compact {
    width: 600px !important;
    min-width: 420px;
    min-height: 360px;
}
#mediaInviteModal.kv-mi-compact .kv-call-window {
    font-family: var(--f);
    height: 100%;
    display: flex;
    flex-direction: column;
}
#mediaInviteModal.kv-mi-compact .kv-call-header { padding: 10px 14px; flex: 0 0 auto; }
#mediaInviteModal.kv-mi-compact .kv-call-header-title { font-size: 12px; font-weight: 700; }
#mediaInviteModal.kv-mi-compact .kv-call-body {
    padding: 12px 16px 8px;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: none;
}

/* Each form field is a single horizontal row: [label] [input] */
#mediaInviteModal.kv-mi-compact .kv-call-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    min-height: 28px;
    flex-wrap: wrap;
}
#mediaInviteModal.kv-mi-compact .kv-call-field-label,
#mediaInviteModal.kv-mi-compact .kv-call-field > label,
#mediaInviteModal.kv-mi-compact .kv-call-field > .kv-share-section-label {
    flex: 0 0 110px;
    font-size: 9px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.3;
}
#mediaInviteModal.kv-mi-compact .kv-call-field > .kv-share-input,
#mediaInviteModal.kv-mi-compact .kv-call-field > select.kv-share-input,
#mediaInviteModal.kv-mi-compact .kv-call-field > input.kv-share-input,
#mediaInviteModal.kv-mi-compact .kv-call-field > textarea.kv-share-input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 6px 9px;
    font-size: 11px;
    border-width: 1px;
    border-radius: 5px;
}
#mediaInviteModal.kv-mi-compact .kv-call-field > select.kv-share-input {
    text-overflow: ellipsis;
    white-space: nowrap;
}
#mediaInviteModal.kv-mi-compact .kv-call-field > textarea.kv-share-input {
    min-height: 60px;
    resize: vertical;
    line-height: 1.35;
    align-self: stretch;
}

/* Hint is shown below the input — span the input column only */
#mediaInviteModal.kv-mi-compact .kv-call-field .kv-call-hint {
    flex: 1 1 100%;
    margin: 2px 0 0 120px;
    font-size: 9px;
    color: var(--t4);
}

/* "Send Invite Via" — checkbox row inline with label */
#mediaInviteModal.kv-mi-compact .kv-share-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    min-height: 28px;
}
#mediaInviteModal.kv-mi-compact .kv-share-section .kv-share-section-label {
    flex: 0 0 110px;
    margin: 0;
    font-size: 9px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#mediaInviteModal.kv-mi-compact .kv-share-section .kv-share-radios {
    flex: 1 1 auto;
    gap: 16px;
}
#mediaInviteModal.kv-mi-compact .kv-share-radio {
    font-size: 11px;
    font-weight: 500;
    gap: 5px;
}

/* Two-Way Video Call — keep checkbox+label aligned with the input column.
   The hint sits beneath the checkbox label, not under the field label. */
#mediaInviteModal.kv-mi-compact #mi-send-two-way-wrap.kv-call-field {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 6px 0;
}
#mediaInviteModal.kv-mi-compact #mi-send-two-way-wrap.kv-call-field > .kv-share-radio {
    flex: 1 1 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--t2);
}
#mediaInviteModal.kv-mi-compact #mi-send-two-way-wrap.kv-call-field > .kv-call-hint {
    margin: 2px 0 0;
    flex-basis: 100%;
}

/* Footer */
#mediaInviteModal.kv-mi-compact .kv-call-footer { padding: 10px 14px; flex: 0 0 auto; }
#mediaInviteModal.kv-mi-compact .kv-share-btn { font-size: 10px; padding: 7px 16px; }
#mediaInviteModal.kv-mi-compact .kv-call-error { padding: 6px 10px; font-size: 11px; margin-bottom: 8px; }
#mediaInviteModal.kv-mi-compact .kv-call-connecting { padding: 6px 0; font-size: 11px; }

/* Resizable corner handle (jQuery UI .resizable adds .ui-resizable-se).
   Only the standalone (.kv-mi-compact) popup is wired as resizable. */
#mediaInviteModal.kv-mi-compact.ui-resizable .ui-resizable-se {
    width: 14px;
    height: 14px;
    right: 4px;
    bottom: 4px;
    background: transparent;
    cursor: se-resize;
    z-index: 10;
}
#mediaInviteModal.kv-mi-compact.ui-resizable .ui-resizable-se::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    background-image:
        linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,0.55) 4px 5px, transparent 5px 7px, rgba(255,255,255,0.55) 7px 8px, transparent 8px);
}
#mediaInviteModal.kv-mi-compact.ui-resizable .ui-resizable-e { width: 6px; right: 0; cursor: ew-resize; }
#mediaInviteModal.kv-mi-compact.ui-resizable .ui-resizable-s { height: 6px; bottom: 0; cursor: ns-resize; }

.kv-call-connecting {
  text-align: center;
  padding: 20px 0;
}
.kv-call-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: confCallSpin 0.8s linear infinite;
}
.kv-call-connecting p {
  margin: 12px 0 0;
  color: var(--t4);
  font-size: 12px;
  font-weight: 500;
}
/* Footer */
.kv-call-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border2);
}

/* In-call controls (moved from inline <style>) */
.conf-ctrl-btn { width:52px; height:52px; border-radius:50%; border:none; background:rgba(255,255,255,0.08); cursor:pointer; transition:all 0.2s; outline:none; display:inline-flex; align-items:center; justify-content:center; }
.conf-ctrl-btn:hover { background: rgba(255,255,255,0.15); }
.conf-ctrl-btn.active { background: #fff; }
.conf-ctrl-btn.active i { color: #213142 !important; }
.conf-ctrl-record.active { background: #ff3b30 !important; }
.conf-ctrl-record.active i { color: #fff !important; }
.conf-ctrl-label { color:rgba(255,255,255,0.45); font-size:10px; margin-top:4px; font-weight:500; }
.conf-keypad-key { width:100%; height:40px; border-radius:10px; border:none; background:rgba(255,255,255,0.08); color:#fff; font-size:17px; font-weight:500; cursor:pointer; transition:all 0.15s; outline:none; }
.conf-keypad-key:hover { background: rgba(255,255,255,0.15); }
.conf-keypad-key:active { background: rgba(48,209,88,0.3); transform: scale(0.95); }

/* In-call view: cap height to the viewport and let the whole panel scroll, so the
   controls / keypad / End Call button stay reachable when calling several numbers
   (long participant list) or when the dial keypad is open. The dial view already
   scrolls via .kv-call-body; the in-call view previously had no height bound. */
#conf-incall-view {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 10px;
}

/* ═══════════════════════════════════════════
   COMMUNICATION MODAL — kv-comm-* classes
   ═══════════════════════════════════════════ */
.kv-comm-dialog {
  max-width: 860px !important;
  width: 860px !important;
  margin: 40px auto !important;
}
.kv-comm-body {
  padding: 0 20px 10px;
  background: #fff;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Top bar: checkboxes left, linked alert right */
.kv-comm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 14px;
}
.kv-comm-linked {
  font-size: 9px;
  color: var(--t3);
}

/* Recipients 2×2 grid */
.kv-comm-recipients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin-bottom: 14px;
}
.kv-comm-rcpt-field {
  min-width: 0;
}
.kv-comm-rcpt-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: .06em;
  color: var(--t2);
  margin-bottom: 4px;
}
/* Select2 inside comm modal */
.kv-comm-dialog .select2-container { width: 100% !important; }
.kv-comm-dialog .select2-container--default .select2-selection--multiple {
  min-height: 34px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  font-family: var(--f);
  font-size: 12px;
  padding: 2px 4px;
}
.kv-comm-dialog .select2-container--default .select2-selection--multiple:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(34,186,255,.12);
}
.kv-comm-dialog .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #E0F4FF;
  border: 1px solid #B3E0FF;
  border-radius: 12px;
  color: var(--navy);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px 3px 20px;
  max-width: 220px;
  position: relative;
  line-height: 1.4;
  margin: 2px 3px;
  /* size each pill to its text (capped at max-width) instead of letting the
     flex __rendered row stretch a lone/short pill to fill the line */
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  align-items: center;
  white-space: nowrap;
}
.kv-comm-dialog .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__display {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  flex: 1;
  min-width: 0;
}
.kv-comm-dialog .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-edit-icon {
  flex-shrink: 0;
  margin-left: 4px;
  line-height: 0;
}
.kv-comm-dialog .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background: transparent;
  border: none;
  border-right: none;
  border-radius: 12px 0 0 12px;
  color: var(--t3);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.kv-comm-dialog .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #e53e3e;
  background: rgba(229,62,62,.08);
}
.kv-comm-dialog .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  font-family: var(--f);
  font-size: 12px;
  margin-top: 4px;
}

/* Inline add-contact form */
.kv-comm-add-contact {
  background: var(--page);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 14px;
}
.kv-comm-add-contact .ic-contact-form-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.kv-comm-add-contact .ic-contact-form-row:last-child { margin-bottom: 0; }
.kv-comm-add-contact input[type="text"],
.kv-comm-add-contact input[type="email"],
.kv-comm-add-contact select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--f);
  font-size: 11.5px;
}

/* Subject row */
.kv-comm-subject {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 12px;
}
.kv-comm-subject-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  flex-shrink: 0;
}
.kv-comm-subject-prefix {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
  flex-shrink: 0;
}
.kv-comm-subject-input {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--f);
  font-size: 12px;
  color: var(--t1);
  padding: 4px 0;
  outline: none;
  background: transparent;
}
.kv-comm-subject-input:focus {
  border-bottom-color: var(--blue);
}
/* Subject prefix input (readonly, auto-width, hidden when empty) */
input#fixed_comm_subject[readonly] {
  border: 1px solid var(--border) !important;
  background: var(--page) !important;
  font-weight: 700 !important;
  font-family: var(--f) !important;
  font-size: 12px !important;
  color: var(--t1) !important;
  padding: 6px 10px !important;
  width: auto !important;
  min-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 5px !important;
  height: auto !important;
}
input#fixed_comm_subject.kv-hidden { display: none; }

/* Rich text editor area */
.kv-comm-editor {
  margin-bottom: 12px;
}
.kv-comm-editor-wrap {
  border: 1.5px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.kv-comm-editor-wrap .ql-toolbar {
  border: none !important;
  border-bottom: 1px solid var(--border2) !important;
  background: var(--page);
  padding: 6px 8px !important;
}
.kv-comm-editor-wrap .ql-container {
  border: none !important;
  font-family: var(--f) !important;
  font-size: 12px !important;
  min-height: 140px;
}
.kv-comm-editor-wrap .ql-editor {
  min-height: 140px;
  padding: 10px 12px !important;
}
.kv-comm-editor-wrap .ql-editor.ql-blank::before {
  color: var(--t4) !important;
  font-style: italic;
}

/* SMS field */
.kv-comm-sms {
  margin-bottom: 12px;
}

/* Attachment row */
.kv-comm-attach {
  margin-bottom: 8px;
}
.kv-comm-attach-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kv-comm-attach-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 1.5px solid var(--blue);
  border-radius: 16px;
  background: #fff;
  color: var(--blue);
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.kv-comm-attach-btn:hover {
  background: #E8F7FF;
}
.kv-comm-attach-hint {
  font-size: 9px;
  color: var(--t4);
}

/* Pseudo-element header */
.popup-forms::before {
  content: 'Filter Events';
  display: block;
  padding: 14px 22px;
  font-family: var(--f);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .02em;
  border-bottom: 1px solid var(--border);
  background: var(--page);
}

/* Form body spacing */
.popup-forms .form-group {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  margin: 14px 0 !important;
  float: none !important;
}
.popup-forms .form-group:first-of-type {
  margin-top: 18px !important;
}

/* Labels */
.popup-forms label.control-label {
  width: 110px !important;
  flex-shrink: 0;
  text-align: right;
  font-family: var(--f) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--t2) !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.3;
  float: none !important;
}

/* Input wrapper — remove Bootstrap grid */
.popup-forms .col-sm-8 {
  width: auto !important;
  flex: 1;
  padding: 0 !important;
  float: none !important;
}

/* .col-sm-4 label wrapper */
.popup-forms .col-sm-4 {
  width: auto !important;
  padding: 0 !important;
  float: none !important;
}

/* Inputs & selects */
.popup-forms .form-control {
  font-family: var(--f) !important;
  font-size: 9px !important;
  color: var(--t1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 5px !important;
  padding: 8px 10px !important;
  height: auto !important;
  background: white !important;
  box-shadow: none !important;
  transition: border-color .15s;
  width: 100% !important;
  box-sizing: border-box;
}
.popup-forms .form-control:focus {
  border-color: var(--blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(34,186,255,.12) !important;
}
.popup-forms select.form-control {
  appearance: auto;
  cursor: pointer;
}

/* Checkbox */
.popup-forms input[type="checkbox"] {
  accent-color: var(--blue);
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin-top: 2px;
}

/* Buttons row */
.popup-forms .popup-form-buttons {
  float: none !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 22px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  background: var(--page);
}

/* All buttons base */
.popup-forms .popup-form-buttons .btn {
  font-family: var(--f) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: capitalize;
  border-radius: 5px !important;
  padding: 8px 18px !important;
  height: auto !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  float: none !important;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Filter (submit) button */
.popup-forms .popup-form-buttons .submit {
  background: var(--blue) !important;
  color: var(--navy) !important;
  border: none !important;
  order: 3;
}
.popup-forms .popup-form-buttons .submit:hover {
  background: #1da8e8 !important;
}

/* Cancel button */
.popup-forms .popup-form-buttons #filter_cancel {
  background: transparent !important;
  color: var(--t3) !important;
  border: 1px solid var(--border) !important;
  order: 1;
}
.popup-forms .popup-form-buttons #filter_cancel:hover {
  background: var(--border2) !important;
  color: var(--t1) !important;
}

/* Reset button */
.popup-forms .popup-form-buttons #filter_reset {
  background: transparent !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239,68,68,.3) !important;
  order: 2;
}
.popup-forms .popup-form-buttons #filter_reset:hover {
  background: rgba(239,68,68,.06) !important;
  border-color: rgba(239,68,68,.5) !important;
}

/* ═══════════════════════════════════════════════
   TYPOGRAPHY BASELINE (Roboto)
   ═══════════════════════════════════════════════ */
.loggedin.has-sidebar,
.loggedin.has-sidebar * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.logo {
    background: url("../img/kuvrr/web_logo.png");
    background-repeat: no-repeat;
    height: 38px;
    font-size: 0;
    object-fit: cover;
    background-size: contain;
    background-position: left;
  }

.logo:before {
  content: '';
  display: inline-block;
  width: 133.5px;
  height: 37px;
  background: url("../img/kuvrr/smartkuvrr.svg");
  background-position: center;
  background-repeat: no-repeat;
  margin-left: -23px; }
.table-container table tr {
 height:unset;
}

/* ═══════════════════════════════════════════════
   COMMUNICATION LIST PAGE
   ═══════════════════════════════════════════════ */

/* Page title */
.page-title {
  font-family: var(--f);
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  padding: 16px 0 8px;
  margin-bottom: 2px;
}

/* ── Page header: migrated to global .kvgl-page-header (kuvrr-global.css) ── */

/* ── Tabs (pill style) ── */
.comm-tabs-card {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.comm-tabs-card a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--f);
  color: var(--t3);
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.2s;
  margin: 0 2px;
}
.comm-tabs-card a:hover {
  color: var(--t2);
  background: #f1f5f9;
  text-decoration: none;
}
.comm-tabs-card a.active {
  color: var(--blue);
  background: #c8e7f4a3;
}
.comm-tabs-card a.active:hover {
  background: #1aa3e6;
  color: #fff;
}
.comm-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-left: 3px;
  background: #ef4444;
  color: #fff;
}

/* ── List card wrapper ── */
.comm-list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.comm-list-card .card-header {
  padding: 10px 16px;
  margin-bottom: 0;
  background-color: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-family: var(--f);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comm-list-card .card-body {
  flex: 1 1 auto;
  padding: 14px;
}

/* ── Filter card ── */
.filter-card-header-clickable {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.filter-card-header-clickable strong {
  color: var(--t2);
  font-size: 9px;
}
.filter-collapse-icon {
  transition: transform 0.2s ease;
  color: var(--t3);
  font-size: 12px;
}
.filter-collapse-icon.collapsed {
  transform: rotate(-90deg);
}
.comm-filter-form {
  display: block !important;
  width: 100%;
}
.comm-filter-form label {
  width: 100% !important;
  margin: 0 0 5px 0 !important;
}
.comm-filter-form input {
  margin: 0 !important;
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 18px;
  align-items: end;
  width: 100%;
}
.filter-row-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 14px 18px;
  align-items: end;
  margin-top: 14px;
  width: 100%;
}
.filter-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.filter-field label {
  font-weight: 700;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t3);
  text-transform: capitalize;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
  display: block;
  line-height: 1;
}
.filter-field input[type="text"],
.filter-field input[type="date"],
.filter-field select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t2);
  background-color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  height: 36px;
  box-sizing: border-box;
}
.filter-field input::placeholder {
  color: var(--t4);
}
.filter-field input:focus,
.filter-field select:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,186,255,0.12);
}
.filter-field .selectize-dd {
  width: 100%;
}
.filter-field .selectize-dd .form-control,
.filter-field .selectize-dd .ui-select-container {
  height: auto;
  min-height: 36px;
  box-sizing: border-box;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.filter-field .selectize-dd .selectize-input {
  height: auto;
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t2);
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.filter-field .selectize-dd .selectize-input:focus,
.filter-field .selectize-dd .selectize-input.focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,186,255,0.12);
}
.filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  justify-content: flex-end;
  grid-column: 3 / 5;
}
.filter-actions .kv-btn {
  padding: 7px 20px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--f);
  height: 36px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border: none;
}
.filter-actions .kv-btn-primary {
  background: var(--blue);
  color: #fff;
}
.filter-actions .kv-btn-primary:hover {
  background: #1aa3e6;
}
.filter-actions .kv-btn-decline {
  background: #fff;
  color: var(--t3);
  border: 1px solid var(--border);
}
.filter-actions .kv-btn-decline:hover {
  background: #f8fafc;
  color: var(--t2);
}

/* ── Results bar ── */
.results-bar {
  padding: 8px 14px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t3);
  border-bottom: 1px solid var(--border);
}
.results-bar strong {
  color: var(--t1);
  font-weight: 700;
}

/* ── Communication table (new design) ── */
.comm-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}
.comm-table thead tr {
  background: var(--navy) !important;
}
.comm-table thead th {
  padding: 9px 11px;
  text-align: left;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .055em;
  color: rgba(255,255,255,.72);
  background: var(--navy);
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: none;
  text-transform: capitalize;
}
.comm-table thead th:last-child { border-right: none; }
.comm-table thead th:hover { background: #2a3f54; }
.comm-table thead th.sortable { cursor: pointer; user-select: none; }
.comm-table thead th.sortable:hover { color: #fff; }
.comm-table thead th .fa { margin-left: 3px; font-size: 9px; color: var(--blue); opacity: 1; }

/* Body rows — alternating */
.comm-table tbody tr,
.comm-table tbody tr:nth-child(odd),
.comm-table tbody tr:nth-child(even) {
  background-color: transparent;
}
.comm-table tbody tr:nth-child(odd) td  { background: #FFFFFF; }
.comm-table tbody tr:nth-child(even) td { background: #EBF8FF; }
.comm-table tbody tr:hover td           { background: #CCF0FF !important; }

/* Unread rows */
.comm-table tbody tr.unread td,
.comm-table tbody tr.unread:nth-child(odd) td,
.comm-table tbody tr.unread:nth-child(even) td {
  background-color: #FFF8E1;
}
.comm-table tbody tr.unread:hover td {
  background-color: #FFF3C4 !important;
}

/* Body cells */
.comm-table tbody td {
  padding: 9px 11px;
  font-size: 9px;
  font-family: var(--f);
  vertical-align: middle;
  color: var(--t2);
  border-bottom: 1px solid var(--border2);
  border-right: 1px solid var(--border2);
  transition: background .1s;
}
.comm-table tbody td:last-child { border-right: none; }
.comm-table tbody tr:last-child td { border-bottom: none; }

/* Date cell — two line */
.comm-date-cell .comm-date-main {
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  display: block;
}
.comm-date-cell .comm-date-time {
  font-size: 9px;
  color: var(--t3);
  display: block;
  margin-top: 2px;
}

/* Subject cell */
.comm-table .subject-cell a {
  color: var(--blue-mid);
  text-decoration: none;
  font-weight: 500;
}
.comm-table .subject-cell a:hover {
  text-decoration: underline;
  color: var(--blue);
}

/* Unread dot */
.unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #ef4444;
  margin-right: 5px;
  vertical-align: middle;
}

/* Shipment badge */
.shipment-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--f);
  background-color: #DBEAFE;
  color: #1E40AF;
  white-space: nowrap;
}

/* Sent by cell — two line */
.sent-by-cell .sent-by-name {
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  display: block;
}
.sent-by-cell .sent-by-type {
  font-size: 9px;
  color: var(--t3);
  display: block;
  margin-top: 2px;
}

/* Action buttons in table */
.comm-table-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}
.comm-table-actions a,
.comm-table-actions span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid var(--border);
  color: var(--t3);
  background: #fff;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.comm-table-actions a:hover {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: var(--blue);
  text-decoration: none;
}
.comm-table-actions .archive-action:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #ef4444;
}
.comm-table-actions i {
  font-size: 12px;
}

.comm-table .attachment-icon {
  width: 16px;
  vertical-align: middle;
  margin-left: 5px;
  opacity: 0.6;
}

/* Sent/Received badges (Archived tab) */
.badge-sent, .badge-received {
  display: inline-block;
  padding: 2px 7px 1px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--f);
  background-color: var(--blue);
  color: #fff;
  vertical-align: middle;
  margin-left: 4px;
}
.badge-received {
  background-color: #059669;
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--t3);
}
.empty-state i {
  font-size: 36px;
  margin-bottom: 10px;
  display: block;
}
.empty-state p {
  font-size: 9px;
  font-family: var(--f);
  margin: 0;
}

/* ── Pagination bar (comm) ── */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border2);
  font-family: var(--f);
}

/* ── Pagination buttons (PREVIOUS / page numbers / NEXT) ── */
.pagination-bar .pagination-container { flex: 1; }
.pagination-bar .pagination {
  display: flex;
  gap: 4px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination-bar .pagination a,
.pagination-bar .pagination span.current,
.pagination-bar .pagination span.disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 500;
  color: var(--t2);
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
/* Page number links & prev/next hover */
.pagination-bar .pagination a:hover {
  background: var(--page);
  border-color: var(--blue);
  color: var(--blue);
  text-decoration: none;
}
/* Active / current page */
.pagination-bar .pagination span.current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700;
  cursor: default;
}
/* Disabled prev/next */
.pagination-bar .pagination span.disabled {
  color: var(--t4);
  border-color: var(--border);
  background: var(--page);
  cursor: default;
  opacity: .5;
}
/* Prev/Next text styling */
.pagination-bar .pagination a.prev,
.pagination-bar .pagination a.next,
.pagination-bar .pagination span.prev,
.pagination-bar .pagination span.next {
  font-size: 9px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: .04em;
  padding: 0 12px;
  gap: 4px;
}
/* Wrapper spans around page numbers (from ng-repeat) */
.pagination-bar .pagination > span:not(.disabled):not(.current):not(.prev):not(.next) {
  display: inline-flex;
}

/* ── Per-page dropdown ── */
.pagination-bar .per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 500;
  color: var(--t3);
  margin-top:0px;
}
.pagination-bar .per-page label {
  white-space: nowrap;
}
.pagination-bar .per-page select {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-weight: 500;
  font-family: var(--f);
  color: var(--t1);
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color .15s ease;
  -webkit-appearance: auto;
  appearance: auto;
}
.pagination-bar .per-page select:hover {
  border-color: var(--navy);
}
.pagination-bar .per-page select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(34,186,255,.15);
}

/* ── Tooltip ── */
.tooltip-icon {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  cursor: pointer;
}
.tooltip-icon .fa-info-circle {
  color: var(--t4);
  font-size: 9px;
  transition: color 0.2s;
}
.tooltip-icon:hover .fa-info-circle {
  color: var(--blue);
}
.tooltip-icon .tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: normal;
  font-family: var(--f);
  padding: 6px 10px;
  border-radius: 5px;
  white-space: normal;
  min-width: 160px;
  max-width: 280px;
  z-index: 1000;
  transition: opacity 0.2s, visibility 0.2s;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
.tooltip-icon .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--navy) transparent transparent transparent;
}
.tooltip-icon:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ── Archive confirmation modal ── */
.archive-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.50);
  z-index: 9998;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: archFadeIn .2s ease;
}
.d-block { display: block !important; }
.archive-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 9999;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: 400px;
  max-width: 90vw;
  overflow: hidden;
  animation: archSlideIn .25s ease;
  text-align: center;
  font-family: var(--f);
}
@keyframes archFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes archSlideIn { from { opacity:0; transform:translate(-50%,-46%); } to { opacity:1; transform:translate(-50%,-50%); } }

.archive-modal-icon {
  margin: 28px auto 14px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff3e0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.archive-modal-icon i {
  font-size: 24px;
  color: #f57c00;
}
.archive-modal h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
}
.archive-modal p {
  margin: 0 28px 20px;
  font-size: 9px;
  color: var(--t3);
  line-height: 1.5;
}
.archive-modal-actions {
  display: flex;
  border-top: 1px solid var(--border);
}
.archive-modal-actions button {
  flex: 1;
  padding: 12px 0;
  border: none;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--f);
  cursor: pointer;
  transition: background 0.2s;
}
.archive-modal-actions .arch-cancel {
  background: #fff;
  color: var(--t3);
  border-radius: 0 0 0 12px;
}
.archive-modal-actions .arch-cancel:hover {
  background: #f5f5f5;
}
.archive-modal-actions .arch-confirm {
  background: #fff;
  color: #e74c3c;
  border-left: 1px solid var(--border);
  border-radius: 0 0 12px 0;
}
.archive-modal-actions .arch-confirm:hover {
  background: #fdf2f2;
}

/* ── New-message highlight animation ── */
@keyframes commNewRow {
  0%   { box-shadow: inset 0 0 0 9999px #dbeafe; }
  100% { box-shadow: inset 0 0 0 9999px transparent; }
}
.comm-table tbody tr.comm-new-row td,
.comm-table tbody tr.comm-new-row:nth-child(odd) td,
.comm-table tbody tr.comm-new-row:nth-child(even) td {
  animation: commNewRow 2.5s ease;
}

/* ── New-messages banner ── */
.new-messages-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--f);
  color: #1d4ed8;
  cursor: pointer;
  transition: background 0.2s;
}
.new-messages-banner:hover {
  background: #dbeafe;
}

/* ── #content padding for comm pages ── */
.observer-view #content {
  padding: 0 20px 20px;
}

/* ── Comm table scroll wrapper — only the div that holds the table ── */
.comm-list-card > div:has(.comm-table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Responsive: comm page on smaller screens ── */
@media (max-width: 1200px) {
  .filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .filter-row-bottom {
    grid-template-columns: 1fr 1fr;
  }
  .filter-actions {
    grid-column: auto;
  }
}
@media (max-width: 768px) {
  .filter-grid,
  .filter-row-bottom {
    grid-template-columns: 1fr;
  }
  .comm-tabs-card {
    flex-wrap: wrap;
  }
  .pagination-bar {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .pagination-bar .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
  .pagination-bar .pagination a,
  .pagination-bar .pagination span.current,
  .pagination-bar .pagination span.disabled {
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    font-size: 10px;
  }
}

/* ═══════════════════════════════════════════════════════
   REUSABLE LIST-PAGE COMPONENTS
   Used by: User list, Org list, Reports, etc.
   ═══════════════════════════════════════════════════════ */

/* ── Page header (.kvgl-page-header + .kvgl-ph-*) — moved to kuvrr-global.css ── */

/* ── Buttons (reusable) ── */
.kv-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--f);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}
.kv-btn:hover { text-decoration: none; }
.kv-btn-primary {
  background: var(--blue);
  color: #fff;
  padding: 7px 20px;
}
.kv-btn-primary:hover {
  background: #4AC8FF;
  color: #fff;
  box-shadow: 0 4px 12px rgba(34,186,255,.3);
  transform: translateY(-1px);
}
.kv-btn:disabled,
.kv-btn[disabled] {
  cursor: not-allowed;
  opacity: 1;
  transform: none;
  box-shadow: none;
}
.kv-btn-primary:disabled,
.kv-btn-primary[disabled] {
  background: #C4C9D4;
  color: #fff;
}
.kv-btn-primary:disabled:hover,
.kv-btn-primary[disabled]:hover {
  background: #C4C9D4;
  box-shadow: none;
  transform: none;
}
.kv-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.2);
}
.kv-btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08);
}
.kv-btn-outline {
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--blue);
}
.kv-btn-outline:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(34,186,255,.3);
}
.kv-btn-danger {
  background: var(--red);
  color: #fff;
  padding: 7px 20px;
}
.kv-btn-danger:hover {
  background: #F87171;
  color: #fff;
  box-shadow: 0 4px 12px rgba(239,68,68,.3);
  transform: translateY(-1px);
}

/* ── Inline meta pair inside .kvgl-ph-actions (e.g. "Status: Active", "Last Updated: ...") ── */
.kv-ph-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--t1);
  white-space: nowrap;
  padding-right: 8px;
  border-right: 1px solid var(--border2);
}
.kv-ph-meta:last-of-type {
  padding-right: 12px;
}
.kv-ph-meta .kv-ph-meta-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Export buttons (PDF / Excel) ── */
.kv-btn-export-pdf {
  background: #fff;
  color: #e74c3c;
  border: 1px solid rgba(231,76,60,0.3);
  transition: all .2s;
}
.kv-btn-export-pdf:hover {
  background: #e74c3c;
  color: #fff;
  border-color: #e74c3c;
}
.kv-btn-export-xls {
  background: #fff;
  color: #27ae60;
  border: 1px solid rgba(39,174,96,0.3);
  transition: all .2s;
}
.kv-btn-export-xls:hover {
  background: #27ae60;
  color: #fff;
  border-color: #27ae60;
}

/* ── Card wrapper (reusable list card) ── */
.kv-list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.kv-list-card .card-header {
  padding: 10px 16px;
  margin-bottom: 0;
  background-color: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-family: var(--f);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.kv-list-card .card-header:hover {
  background-color: #f1f5f9;
}
.kv-list-card .card-header strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t2);
}
.kv-list-card .card-body {
  padding: 16px;
}

/* ── Filter grid (reusable) ── */
.kv-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.kv-filter-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.kv-filter-field label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--t3);
  text-transform: capitalize;
  letter-spacing: .08em;
  margin-bottom: 5px;
  font-family: var(--f);
}
.kv-filter-field input,
.kv-filter-field select {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t1);
  box-sizing: border-box;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.kv-filter-field input:focus,
.kv-filter-field select:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,186,255,0.12);
}
.kv-filter-field input::placeholder {
  color: var(--t4);
  font-size: 10px;
}
/* Checkbox sizing inside filter fields — without this, grid cells stretch the
   browser-default checkbox to ~32px. Target only the checkbox (not text/date
   inputs) and restore the standard 14x14 size with the global blue accent. */
.kv-filter-field input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.kv-filter-field label[for] {
  cursor: pointer;
}
.kv-filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border2);
}
.kv-filter-actions .kv-btn {
  height: 34px;
}
.kv-date-range {
  display: flex;
  gap: 0;                      /* input + calendar button must look like ONE control */
  align-items: stretch;
}
.kv-date-range input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;          /* shared seam between input and button */
}
.kv-date-range input:focus {
  /* unified focus ring — re-add a 1px right edge since border-right was removed */
  box-shadow: 1px 0 0 0 var(--blue), 0 0 0 3px rgba(34,186,255,.1);
}
/* Calendar trigger — flush against the input's right edge.
   Matches any direct child that isn't the input or the ".sep" divider,
   so <button class="kv-btn">, <span>, <a>, and any other trigger markup
   all render as the same attached control. */
.kv-date-range > *:not(input):not(.sep) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 0 10px;
  min-width: 34px;
  height: auto;                /* stretches to input height via align-items:stretch */
  background: #fff;
  color: var(--t3);
  border: 1px solid var(--border);
  font-family: var(--f);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s ease;
  text-decoration: none;
  flex-shrink: 0;
}
.kv-date-range > *:not(input):not(.sep):hover {
  background: var(--page);
  color: var(--blue);
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.kv-date-range > *:not(input):not(.sep) .fa { font-size: 11px; }
.kv-date-range .sep {
  color: var(--t4);
  font-size: 10px;
  flex-shrink: 0;
  padding: 0 6px;
}

/* date range field -user page */


.kv-date-range-user {
  display: flex;
  gap: 0;                      /* input + calendar button must look like ONE control */
  align-items: stretch;
}
.kv-date-range-user input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 1;
  border-bottom-right-radius: 1;
  border-right: 1;          /* shared seam between input and button */
}
.kv-date-range-user input:focus {
  /* unified focus ring — re-add a 1px right edge since border-right was removed */
  box-shadow: 1px 0 0 0 var(--blue), 0 0 0 3px rgba(34,186,255,.1);
}
/* Calendar trigger — flush against the input's right edge.
   Matches any direct child that isn't the input or the ".sep" divider,
   so <button class="kv-btn">, <span>, <a>, and any other trigger markup
   all render as the same attached control. */
.kv-date-range-user > *:not(input):not(.sep) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 0 10px;
  min-width: 34px;
  height: auto;                /* stretches to input height via align-items:stretch */
  background: #fff;
  color: var(--t3);
  border: 1px solid var(--border);
  font-family: var(--f);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s ease;
  text-decoration: none;
  flex-shrink: 0;
}
.kv-date-range-user > *:not(input):not(.sep):hover {
  background: var(--page);
  color: var(--blue);
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.kv-date-range-user > *:not(input):not(.sep) .fa { font-size: 11px; }
.kv-date-range-user .sep {
  color: var(--t4);
  font-size: 10px;
  flex-shrink: 0;
  padding: 0 6px;
}

/* ── Results bar (reusable) ── */
.kv-results-bar {
  padding: 8px 14px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t3);
  border-bottom: 1px solid var(--border);
}
.kv-results-bar strong {
  color: var(--t1);
  font-weight: 700;
}

/* ── Data table (reusable — navy header, alternating rows) ── */
.kv-data-table {
  width: 100%;
  border-collapse: collapse;
}
.kv-data-table thead tr {
  background: var(--navy) !important;
}
.kv-data-table thead th,
.kv-data-table thead td {
  padding: 9px 11px;
  text-align: left;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .055em;
  color: rgba(255,255,255,.95);
  background: var(--navy);
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: none;
  text-transform: capitalize;
}
.kv-data-table thead th:last-child,
.kv-data-table thead td:last-child { border-right: none; }
.kv-data-table thead th.sortable,
.kv-data-table thead td.sortable { cursor: pointer; user-select: none; }
.kv-data-table thead th:hover,
.kv-data-table thead td:hover { background: #2a3f54; }
.kv-data-table thead th a,
.kv-data-table thead td a {
  color: rgba(255,255,255,.95);
  text-decoration: none;
}
.kv-data-table thead th a:hover,
.kv-data-table thead td a:hover {
  color: #fff;
}
.kv-data-table thead th .fa,
.kv-data-table thead td .fa {
  margin-left: 3px;
  font-size: 9px;
  color: var(--blue);
  opacity: 1;
}

/* Body rows — alternating */
.kv-data-table tbody tr,
.kv-data-table tbody tr:nth-child(odd),
.kv-data-table tbody tr:nth-child(even) {
  background-color: transparent;
}
.kv-data-table tbody tr:nth-child(odd) td  { background: #FFFFFF; }
.kv-data-table tbody tr:nth-child(even) td { background: #EBF8FF; }
.kv-data-table tbody tr:hover td           { background: #CCF0FF !important; }

/* Body cells */
.kv-data-table tbody td {
  padding: 9px 11px;
  font-size: 9px;
  font-family: var(--f);
  vertical-align: middle;
  color: var(--t2);
  border-bottom: 1px solid var(--border2);
  border-right: 1px solid var(--border2);
  transition: background .1s;
}
.kv-data-table tbody td:last-child { border-right: none; }
.kv-data-table tbody tr:last-child td { border-bottom: none; }

/* Inactive row dim */
.kv-data-table tbody tr.row-muted td {
  opacity: 0.55;
}

/* ── User info cell (name + detail lines) ── */
.kv-user-cell .kv-uc-name {
  font-weight: 600;
  color: var(--t1);
  font-size: 9px;
}
.kv-user-cell .kv-uc-line {
  font-size: 10px;
  color: var(--t3);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kv-user-cell .kv-uc-line i {
  width: 12px;
  text-align: center;
  font-size: 9px;
  color: var(--t4);
}

/* ── Action icon links (eye / pencil) ── */
.kv-action-icons {
  display: flex;
  gap: 6px;
  align-items: center;
}
.kv-action-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  color: var(--blue);
  background: rgba(34,186,255,0.08);
  font-size: 12px;
  text-decoration: none;
  transition: all .15s;
}
.kv-action-icons a:hover {
  background: var(--blue);
  color: #fff;
}
.kv-action-icons a.kv-action-delete {
  color: #e74c3c;
  background: rgba(231,76,60,0.08);
}
.kv-action-icons a.kv-action-delete:hover {
  background: #e74c3c;
  color: #fff;
}

/* ── Device type badge ── */
.kv-device-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t2);
}
.kv-device-badge i {
  font-size: 13px;
  color: var(--blue);
}

/* ── Status chips (reusable across pages) ── */
.kv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--f);
  letter-spacing: .02em;
  white-space: nowrap;
}
.kv-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kv-chip-active {
  background: #e6f9f0;
  color: #15803d;
}
.kv-chip-active::before { background: #22c55e; }
.kv-chip-inactive {
  background: #fef2f2;
  color: #dc2626;
}
.kv-chip-inactive::before { background: #ef4444; }
.kv-chip-pending {
  background: #fefce8;
  color: #a16207;
}
.kv-chip-pending::before { background: #eab308; }

/* ── Verified badge (reusable) ── */
.kv-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--f);
}
.kv-verified i { font-size: 12px; }
.kv-verified-yes {
  color: #15803d;
}
.kv-verified-no {
  color: #dc2626;
}

/* ── Empty state (reusable) ── */
.kv-empty-state {
  text-align: center;
  padding: 40px 20px;
}
.kv-empty-state i {
  font-size: 32px;
  color: var(--t4);
  margin-bottom: 10px;
  display: block;
}
.kv-empty-state p {
  font-size: 9px;
  color: var(--t3);
  margin: 0;
}

/* ── Pagination wrapper (Django {% paginate %} tag) ── */
.kv-pagination {
  padding: 10px 14px;
  border-top: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  font-family: var(--f);
}
.kv-pagination a,
.kv-pagination > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 9px;
  font-weight: 500;
  font-family: var(--f);
  color: var(--t2);
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.kv-pagination a:hover {
  background: var(--page);
  border-color: var(--blue);
  color: var(--blue);
  text-decoration: none;
}
.kv-pagination > span.current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700;
  cursor: default;
}
.kv-pagination > span.disabled {
  color: var(--t4);
  border-color: var(--border);
  background: var(--page);
  cursor: default;
  opacity: .5;
}
.kv-pagination .ellipsis {
  color: var(--t4);
  font-size: 10px;
  min-width: 20px;
  border: none;
  background: none;
}

/* ── Table wrapper (scrollable) ── */
.kv-table-wrap {
  overflow-x: auto;
}

/* ── Override Bootstrap pagination inside .kv-pagination ── */
.kv-pagination .pagination {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 0;
  box-shadow: none;
}
.kv-pagination .pagination ul {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 0;
  box-shadow: none;
}
.kv-pagination .pagination li,
.kv-pagination .pagination ul > li {
  display: inline-block;
}
.kv-pagination .pagination a,
.kv-pagination .pagination span,
.kv-pagination .pagination ul > li > a,
.kv-pagination .pagination ul > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 9px;
  font-weight: 500;
  font-family: var(--f);
  text-decoration: none;
  color: var(--t2);
  cursor: pointer;
  transition: all .15s ease;
  float: none;
  line-height: 28px;
}
.kv-pagination .pagination a:hover,
.kv-pagination .pagination ul > li > a:hover {
  background: var(--page);
  border-color: var(--blue);
  color: var(--blue);
  text-decoration: none;
}
.kv-pagination .pagination .current,
.kv-pagination .pagination ul > .active > a,
.kv-pagination .pagination ul > .active > span {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
  font-weight: 700;
  cursor: default;
}
.kv-pagination .pagination ul > .disabled > a,
.kv-pagination .pagination ul > .disabled > span {
  color: var(--t4) !important;
  border-color: var(--border) !important;
  background: var(--page) !important;
  cursor: default;
  opacity: .5;
}
.kv-pagination .pagination ul > li:first-child > a,
.kv-pagination .pagination ul > li:first-child > span,
.kv-pagination .pagination ul > li:last-child > a,
.kv-pagination .pagination ul > li:last-child > span {
  border-radius: 5px;
  font-size: 9px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: .04em;
  padding: 0 12px;
}

/* ── Helper / Info bar (reusable) ── */
.kv-info-bar {
  background: rgba(34,186,255,0.08);
  border: 1px solid rgba(34,186,255,0.22);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t2);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.kv-info-bar > i {
  font-size: 14px;
  color: var(--blue);
  margin-top: 1px;
  flex-shrink: 0;
}
.kv-info-bar-content {
  flex: 1;
}
.kv-info-bar-content strong {
  color: var(--t1);
  font-size: 9px;
}
.kv-info-bar-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 5px;
}
.kv-info-bar-items .kv-ib-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--t3);
}
.kv-info-bar-items .kv-ib-item i {
  font-size: 10px;
  color: var(--blue);
  width: 12px;
  text-align: center;
}
.kv-info-bar-items .kv-ib-item code {
  background: rgba(34,186,255,0.12);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  color: var(--t1);
}
.kv-info-bar .kv-ib-close {
  cursor: pointer;
  font-size: 14px;
  color: var(--t3);
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.kv-info-bar .kv-ib-close:hover {
  color: var(--t1);
}

/* ── Small pill badges (reusable) ── */
.kv-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--f);
  white-space: nowrap;
}
.kv-pill-blue {
  background: rgba(34,186,255,0.12);
  color: var(--blue);
}
.kv-pill-grey {
  background: #f1f5f9;
  color: var(--t3);
}
.kv-pill-navy {
  background: rgba(33,49,66,0.1);
  color: var(--navy);
}
.kv-pill-green {
  background: rgba(34,197,94,0.12);
  color: #15803d;
}

/* ── Description / truncated cell ── */
.kv-desc-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  color: var(--t3);
}

/* ── Column header with tooltip (reusable) ── */
.kv-th-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.kv-th-label i.fa-info-circle {
  color: rgba(255,255,255,.35);
  font-size: 10px;
}
.kv-th-label:hover i.fa-info-circle {
  color: rgba(255,255,255,.7);
}
.kv-th-tip {
  visibility: hidden;
  opacity: 0;
  min-width: 180px;
  max-width: 280px;
  background: var(--navy);
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 8px 12px;
  position: absolute;
  z-index: 1000;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: opacity .15s, visibility .15s;
  white-space: normal;
}
.kv-th-tip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--navy) transparent;
}
.kv-th-label:hover .kv-th-tip {
  visibility: visible;
  opacity: 1;
}

/* ── Org badge ── */
.kv-org-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--t2);
}
.kv-org-badge i {
  color: var(--blue);
  font-size: 9px;
}

/* ── Date cell (icon + text) ── */
.kv-date-cell {
  font-size: 9px;
  color: var(--t3);
}
.kv-date-cell i {
  color: var(--t4);
  margin-right: 3px;
  font-size: 10px;
}

/* ── Pagination bar (Angular style with per-page) ── */
.kv-pagination-bar {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f);
}
.kv-pagination-bar .per-page {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--t3);
}
.kv-pagination-bar .per-page label {
  font-weight: 500;
  margin: 0;
}
.kv-pagination-bar .per-page select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t1);
}
.kv-pagination-bar .per-page select:focus {
  border-color: var(--blue);
  outline: none;
}

/* kv-modal-* canonical definitions → moved to kuvrr-global.css section 5 */

/* ── Shipment Map Modal (responsive, fits viewport) ── */
.kv-shipment-map-modal .modal-dialog.kv-shipment-map-dialog {
  width: 90vw;
  max-width: 1200px;
  margin: 3vh auto;
}
.kv-shipment-map-content {
  border: none !important;
  border-radius: var(--r);
  overflow: hidden;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
}
.kv-shipment-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.kv-shipment-map-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
  font-family: var(--f);
  display: inline-flex;
  align-items: center;
}
.kv-shipment-map-close {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--t3);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all .12s ease;
}
.kv-shipment-map-close:hover {
  background: var(--page);
  color: var(--red);
  border-color: var(--red);
}
.kv-shipment-map-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--page);
}
.kv-shipment-map-canvas {
  width: 100%;
  height: 100%;
  min-height: 60vh;
}
.kv-shipment-map-foot {
  padding: 10px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: #f8fafc;
  flex-shrink: 0;
}

/* ── Loading spinner (reusable) ── */
.kv-loading {
  text-align: center;
  padding: 40px;
  color: var(--t4);
}
.kv-loading i {
  font-size: 22px;
  animation: kvSpin 1s linear infinite;
}
.kv-loading p {
  margin-top: 10px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t3);
}
@keyframes kvSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Toggle switch (reusable) ── */
.kv-toggle {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  vertical-align: middle;
}
.kv-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.kv-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1;
  border-radius: 18px;
  transition: 0.25s;
}
.kv-toggle .slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.25s;
}
.kv-toggle input:checked + .slider {
  background-color: var(--blue);
}
.kv-toggle input:checked + .slider:before {
  transform: translateX(16px);
}

/* ── Checkbox-cell (center aligned for toggles/checkboxes) ── */
.kv-checkbox-cell {
  text-align: center;
}

/* ── Compact cell — reduced padding for narrow icon/checkbox columns ── */
.kv-data-table thead td.kv-td-compact,
.kv-data-table thead th.kv-td-compact,
.kv-data-table tbody td.kv-td-compact {
  padding: 6px 4px;
  text-align: center;
}

/* ── Inline search input (for compact header search) ── */
.kv-inline-search {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t1);
  background: var(--white);
  width: 220px;
  transition: border-color .2s, box-shadow .2s;
}
.kv-inline-search:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(34,186,255,.12);
}

/* ── Form rows (label + input for edit/create pages) ── */
.kv-form-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.03);
}
.kv-form-row:last-of-type { border-bottom: none; }
.kv-form-label {
  width: 130px;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  padding-top: 8px;
  text-align: right;
  text-transform: capitalize;
  letter-spacing: 0.04em;
}
.kv-form-input {
  flex: 1;
}
.kv-form-input input,
.kv-form-input select,
.kv-form-input textarea {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t1);
  box-sizing: border-box;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.kv-form-input textarea {
  height: auto;
  padding: 8px 10px;
  resize: vertical;
}
.kv-form-input input:focus,
.kv-form-input select:focus,
.kv-form-input textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,186,255,.12);
}
.kv-form-error {
  margin-top: 4px;
  font-size: 10px;
  color: #dc2626;
  font-weight: 500;
}
.kv-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--border2);
}

/* ═══════════════════════════════════════════════
   EDIT / CREATE PAGE CARDS
   ═══════════════════════════════════════════════ */

/* ── Edit Card ── */
.kv-edit-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  animation: fadeUp .35s ease;
}
.kv-edit-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  color: var(--navy);
  text-transform: capitalize;
  letter-spacing: 0.06em;
}
.kv-edit-card-head i {
  font-size: 13px;
}
.kv-edit-card-body {
  padding: 16px 20px;
}

/* ── Edit Grid (2-column) ── */
.kv-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

/* ── Edit Field (label + input) ── */
.kv-edit-field {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.03);
  min-width: 0;
  overflow: visible;
}
.kv-edit-field:last-child { border-bottom: none; }
.kv-edit-field > label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  font-family: var(--f);
}
.kv-edit-input input[type="text"],
.kv-edit-input input[type="email"],
.kv-edit-input input[type="password"],
.kv-edit-input input[type="number"],
.kv-edit-input select,
.kv-edit-input textarea {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t1);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.kv-edit-input textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 10px;
  resize: vertical;
}
.kv-edit-input select[multiple] {
  height: auto;
  min-height: 110px;
  padding: 6px 8px;
}
.kv-edit-input input:focus,
.kv-edit-input select:focus,
.kv-edit-input textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,186,255,.12);
}

/* ── Edit Grid Row variant: label left | input right in same line ── */
.kv-edit-grid-row .kv-edit-field {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kv-edit-grid-row .kv-edit-field > label {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-bottom: 0;
}
.kv-edit-grid-row .kv-edit-field > .kv-edit-input {
  flex: 1;
  min-width: 0;
}

/* ── Field width utilities (based on content length) ── */
.kv-w-xs  input, .kv-w-xs  select  { max-width: 120px; }  /* codes, short numbers */
.kv-w-sm  input, .kv-w-sm  select  { max-width: 180px; }  /* status, short dropdowns */
.kv-w-md  input, .kv-w-md  select  { max-width: 260px; }  /* city, state, dropdowns */
.kv-w-lg  input, .kv-w-lg  select  { max-width: 360px; }  /* names, addresses, emails */
.kv-w-xl  input, .kv-w-xl  select,
.kv-w-xl  textarea                  { max-width: 480px; }  /* long text, URLs */

/* ── Checkbox row (toggle + label inline) ── */
.kv-edit-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.kv-edit-checkbox-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--t1);
  font-family: var(--f);
}

/* ── Field-level tooltips ── */
/* .kv-tip-wrap {
  position: relative;
  display: inline-block;
  margin-left: 4px;
  cursor: pointer;
  vertical-align: middle;
}
.kv-tip-wrap > i {
  font-size: 9px;
  color: var(--t4);
  transition: color .15s;
}
.kv-tip-wrap:hover > i {
  color: var(--blue);
}
.kv-tip-box {
  visibility: hidden;
  opacity: 0;
  min-width: 260px;
  max-width: 380px;
  background: var(--navy);
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 8px 12px;
  position: absolute;
  z-index: 1000;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: opacity .2s, visibility .2s;
  white-space: normal;
}
.kv-tip-box::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--navy) transparent transparent transparent;
}
.kv-tip-wrap:hover .kv-tip-box {
  visibility: visible;
  opacity: 1;
} */



/* ── Field-level tooltips ── */
.kv-tip-wrap {
  position: relative;
  display: inline-block;
  margin-left: 6px; /* Slightly increased for cleaner breathing room after label text */
  cursor: pointer;
  vertical-align: middle;
}
.kv-tip-wrap > i {
  font-size: 11px; /* Improved contrast for the info icon */
  color: var(--t4);
  transition: color .15s;
}
.kv-tip-wrap:hover > i {
  color: var(--blue);
}
.kv-tip-box {
  visibility: hidden;
  opacity: 0;
  min-width: 260px;
  max-width: 380px;
  background: var(--navy);
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 8px 12px;
  
  /* UPDATED POSITIONING: Forces layout to the right side of the icon */
  position: absolute;
  z-index: 1050; /* Higher priority to float completely above form fields and select highlights */
  top: 50%;
  left: calc(100% + 10px); /* Safely offsets the card to the right side of the info icon */
  transform: translateY(-50%); /* Perfectly aligns the middle of the box with the icon */
  
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  transition: opacity .2s, visibility .2s;
  white-space: normal;
}

/* UPDATED ARROW DIRECTION: Points cleanly back to the left side at the info icon */
.kv-tip-box::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%; /* Repositioned to the left edge of the tooltip box */
  margin-top: -5px; /* Centers the triangle element vertically */
  border-width: 5px;
  border-style: solid;
  border-color: transparent var(--navy) transparent transparent; /* Left-pointing triangle */
}

.kv-tip-wrap:hover .kv-tip-box {
  visibility: visible;
  opacity: 1;
}

/* ── Field errors ── */
.kv-field-error,
.kv-field-error ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
  font-weight: 500;
  color: #dc2626;
  font-family: var(--f);
}

/* ── Form alert banner ── */
.kv-form-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 5px;
  font-size: 9px;
  margin-bottom: 14px;
  font-family: var(--f);
}
.kv-form-alert-error {
  background: #fef2f2;
  border: 1px solid rgba(239,68,68,.2);
  color: #b91c1c;
}
.kv-form-alert i {
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Form field validation — highlight after submit ──
   Works automatically with AngularJS built-in form validation.
   Requirements per field: name="fieldName" + required (or ng-required)
   AngularJS adds .ng-submitted to <form> on submit,
   and .ng-invalid to fields that fail validation.
   ─────────────────────────────────────────────────── */
form.ng-submitted input.ng-invalid,
form.ng-submitted select.ng-invalid,
form.ng-submitted textarea.ng-invalid,
form.ng-submitted .ui-select-container.ng-invalid .selectize-input {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.08);
}
form.ng-submitted .kv-edit-field:has(.ng-invalid) > label {
  color: #EF4444 !important;
}

/* ── Edit page actions bar ── */
.kv-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0 20px;
}

/* ── Weather Alert Severity Badges ── */
.kv-wa-severity {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--f);
  letter-spacing: 0.03em;
  text-transform: capitalize;
}
.kv-wa-extreme { background: rgba(239,68,68,0.14); color: #dc2626; }
.kv-wa-severe  { background: rgba(245,158,11,0.14); color: #d97706; }
.kv-wa-moderate { background: rgba(34,186,255,0.14); color: #0284c7; }
.kv-wa-minor   { background: rgba(34,197,94,0.14); color: #15803d; }
.kv-wa-unknown { background: rgba(107,114,128,0.14); color: #6b7280; }

/* ── Message Type badges (Alert / Update / Cancel) ── */
.kv-wa-msg-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--f);
  letter-spacing: 0.03em;
  text-transform: capitalize;
}
.kv-wa-type-alert  { background: rgba(34,186,255,0.12); color: #0284c7; }
.kv-wa-type-update { background: rgba(245,158,11,0.12); color: #d97706; }
.kv-wa-type-cancel { background: rgba(107,114,128,0.12); color: #6b7280; }

/* ── Processing Status (Sent / Suppressed / Cancelled) ── */
.kv-wa-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--f);
  white-space: nowrap;
}
.kv-wa-status-sent       { background: rgba(16,185,129,0.12); color: #059669; }
.kv-wa-status-suppressed { background: rgba(245,158,11,0.10); color: #b45309; }
.kv-wa-status-cancelled  { background: rgba(107,114,128,0.10); color: #6b7280; }

.kv-wa-status-note {
  display: inline-flex;
  margin-left: 4px;
  color: var(--t4);
  font-size: 11px;
  cursor: help;
}
.kv-wa-status-note:hover { color: var(--blue); }

/* ── Notification Channel Cards (detail page) ── */
.kv-wa-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.kv-wa-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-right: 1px solid var(--border2);
  transition: all .12s ease;
}
.kv-wa-channel:last-child { border-right: none; }
.kv-wa-ch-icon { font-size: 16px; }
.kv-wa-ch-label { font-size: 9px; font-weight: 700; text-transform: capitalize; letter-spacing: 0.04em; }
.kv-wa-ch-status { font-size: 9px; font-weight: 600; display: flex; align-items: center; gap: 3px; }

.kv-wa-ch-on .kv-wa-ch-icon { color: #059669; }
.kv-wa-ch-on .kv-wa-ch-label { color: var(--t1); }
.kv-wa-ch-on .kv-wa-ch-status { color: #059669; }
.kv-wa-ch-on { background: rgba(16,185,129,0.04); }

.kv-wa-ch-off .kv-wa-ch-icon { color: var(--t4); }
.kv-wa-ch-off .kv-wa-ch-label { color: var(--t4); }
.kv-wa-ch-off .kv-wa-ch-status { color: var(--t4); }
.kv-wa-ch-off { background: rgba(156,163,175,0.04); }

/* ── Channel icons (list page inline) ── */
.kv-wa-ch-icons {
  display: inline-flex;
  gap: 5px;
  font-size: 11px;
}
.kv-wa-ch-icon-on  { color: #059669; }
.kv-wa-ch-icon-off { color: #D1D5DB; }

/* ── Config channel picker (create/edit page) ── */
.kv-field-disabled { opacity: 0.4; pointer-events: none; }

/* ── Weather Alert Log Legend (hover popup) ── */
.kv-wa-legend-wrap {
  position: relative;
  display: inline-flex;
}
.kv-wa-legend-icon {
  font-size: 13px;
  color: var(--t4);
  cursor: help;
  transition: color .12s ease;
}
.kv-wa-legend-wrap:hover .kv-wa-legend-icon { color: var(--blue); }
.kv-wa-legend-popup {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  z-index: 100;
  white-space: nowrap;
}
.kv-wa-legend-wrap:hover .kv-wa-legend-popup { display: flex; flex-direction: column; gap: 8px; }
.kv-wa-legend-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kv-wa-legend-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--t1);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  min-width: 60px;
}
.kv-wa-legend-ch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
}

.kv-wa-config-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.kv-wa-config-ch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  transition: all .12s ease;
}
.kv-wa-config-ch-item:hover { border-color: var(--blue); }
.kv-wa-config-ch-item input[type="checkbox"] { accent-color: var(--blue); }
.kv-wa-config-ch-item i { font-size: 14px; color: var(--t3); }

/* ═══════════════════════════════════════════════
   WEATHER ALERT DASHBOARD
   ═══════════════════════════════════════════════ */

.kv-dash-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.kv-dash-stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.kv-dash-stat-icon { font-size: 18px; margin-bottom: 6px; }
.kv-dash-stat-value { font-size: 22px; font-weight: 700; font-family: var(--f); line-height: 1; }
.kv-dash-stat-label { font-size: 9px; font-weight: 600; color: var(--t3); margin-top: 4px; text-transform: capitalize; letter-spacing: 0.04em; }

.kv-dash-stat-blue .kv-dash-stat-icon { color: #22BAFF; }
.kv-dash-stat-blue .kv-dash-stat-value { color: #0284c7; }
.kv-dash-stat-green .kv-dash-stat-icon { color: #10B981; }
.kv-dash-stat-green .kv-dash-stat-value { color: #059669; }
.kv-dash-stat-amber .kv-dash-stat-icon { color: #F59E0B; }
.kv-dash-stat-amber .kv-dash-stat-value { color: #d97706; }
.kv-dash-stat-gray .kv-dash-stat-icon { color: #9CA3AF; }
.kv-dash-stat-gray .kv-dash-stat-value { color: #6b7280; }
.kv-dash-stat-navy .kv-dash-stat-icon { color: #213142; }
.kv-dash-stat-navy .kv-dash-stat-value { color: #213142; }

.kv-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* Bar charts */
.kv-dash-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.kv-dash-bar-label {
  min-width: 90px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
}
.kv-dash-bar-track {
  flex: 1;
  height: 14px;
  background: var(--page);
  border-radius: 3px;
  overflow: hidden;
}
.kv-dash-bar-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 3px;
  min-width: 2px;
  transition: width .3s ease;
}
.kv-dash-bar-count {
  min-width: 30px;
  font-size: 9px;
  font-weight: 700;
  color: var(--t1);
  text-align: right;
}

/* Timeline */
.kv-dash-timeline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
}
.kv-dash-tl-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 18px;
}
.kv-dash-tl-fill {
  width: 100%;
  background: var(--blue);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height .3s ease;
}
.kv-dash-tl-count {
  font-size: 8px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 2px;
}
.kv-dash-tl-day {
  font-size: 7px;
  color: var(--t4);
  margin-top: 2px;
  transform: rotate(-45deg);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   WEATHER ALERT DETAIL PAGE
   ═══════════════════════════════════════════════ */

/* ── Alert Strip (top bar with key metadata) ── */
.kv-wa-strip {
  display: flex;
  gap:10px;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  height: 42px;
  animation: fadeUp .35s ease;
}
.kv-wa-strip-left {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
}
.kv-wa-strip-right {
  display: flex;
  align-items: center;
}
.kv-wa-strip-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 100%;
  border-right: 1px solid var(--border2);
  font-size: 9px;
}
.kv-wa-strip-item:first-child { padding-left: 0; }
.kv-wa-strip-item:last-child { border-right: none; }
.kv-wa-strip-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--t4);
  letter-spacing: 0.05em;
  text-transform: capitalize;
}
.kv-wa-strip-val {
  font-weight: 600;
  color: var(--t1);
  font-size: 9px;
}

/* ── Headline Banner ── */
.kv-wa-headline {
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: fadeUp .4s ease;
}
.kv-wa-headline i {
  color: var(--amber);
  font-size: 14px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* ── Main Grid (2-column) ── */
.kv-wa-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 14px;
  padding: 14px 20px 20px;
  animation: fadeUp .45s ease;
}

/* ── Column ── */
.kv-wa-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Detail Card ── */
.kv-wa-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}
.kv-wa-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 9px;
  font-weight: 700;
  color: var(--navy);
  text-transform: capitalize;
  letter-spacing: 0.06em;
}
.kv-wa-card-head i {
  font-size: 12px;
  color: var(--blue);
}
.kv-wa-card-body {
  padding: 4px 0;
}

/* ── Field rows (label + value) ── */
.kv-wa-field {
  display: flex;
  align-items: flex-start;
  padding: 7px 16px;
  gap: 12px;
  border-bottom: 1px solid rgba(0,0,0,.03);
}
.kv-wa-field:last-child { border-bottom: none; }
.kv-wa-field-lbl {
  width: 130px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  padding-top: 1px;
}
.kv-wa-field-val {
  flex: 1;
  font-size: 9px;
  color: var(--t1);
  font-weight: 500;
  word-break: break-word;
}

/* ── Field rows side-by-side (2 fields in a row) ── */
.kv-wa-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.kv-wa-field-row .kv-wa-field {
  border-bottom: 1px solid rgba(0,0,0,.03);
}
.kv-wa-field-row .kv-wa-field:first-child {
  border-right: 1px solid rgba(0,0,0,.03);
}

/* ── Content sections (for long text blocks) ── */
.kv-wa-content-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border2);
}
.kv-wa-content-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--t4);
  text-transform: capitalize;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.kv-wa-content-text {
  font-size: 9px;
  color: var(--t1);
  font-weight: 500;
  line-height: 1.5;
}
.kv-wa-content-block {
  font-size: 9px;
  color: var(--t2);
  line-height: 1.6;
  white-space: pre-wrap;
  background: var(--page);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 10px 14px;
  max-height: 280px;
  overflow-y: auto;
}
.kv-wa-content-block.kv-wa-html-render {
  white-space: normal;
}
.kv-wa-html-render img { max-width: 100%; height: auto; }
.kv-wa-html-render table { width: 100%; border-collapse: collapse; font-size: 9px; }
.kv-wa-html-render td, .kv-wa-html-render th { padding: 4px 8px; border: 1px solid var(--border2); }
.kv-wa-html-render a { color: var(--blue); }

/* ═══════════════════════════════════════════════
   DETAIL PAGE — Read-only field display
   ═══════════════════════════════════════════════ */

/* Avatar circle for detail header */
.kv-detail-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.kv-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Read-only field (label + value) */
.kv-detail-field {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border2);
}
.kv-detail-field:last-child { border-bottom: none; }

.kv-detail-lbl {
  width: 160px;
  flex-shrink: 0;
  text-align: right;
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  font-family: var(--f);
  text-transform: none;
  letter-spacing: 0;
  text-transform: capitalize;
}
.kv-detail-val {
  flex: 1;
  font-size: 9px;
  font-weight: 500;
  color: var(--t1);
  font-family: var(--f);
  word-break: break-word;
}

/* 2-column grid container for detail fields on detail/info cards.
   Inside the grid, labels sit left (not right-aligned) since each row
   occupies a narrower column. */
.kv-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  padding: 14px;
}
.kv-detail-grid .kv-detail-field {
  border-bottom: none;
  padding: 4px 0;
  gap: 8px;
}
.kv-detail-grid .kv-detail-lbl {
  width: auto;
  min-width: 0;
  text-align: left;
  flex: 0 0 auto;
  white-space: nowrap;
}
.kv-detail-grid .kv-detail-val {
  flex: 1 1 auto;
}
@media (max-width: 720px) {
  .kv-detail-grid { grid-template-columns: 1fr; }
}
/* Single-column variant — one label+value per row (use for rows with long
   values like addresses, or a short card where each field deserves its own line).
   Label hugs its content; value follows immediately with the standard 8px gap. */
.kv-detail-grid.kv-detail-grid-1col {
  grid-template-columns: 1fr;
}

/* Sub-cards grid (contacts, devices) */
.kv-detail-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 14px;
}
.kv-detail-sub-card {
  background: var(--page);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 10px 14px;
}
.kv-detail-sub-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.kv-detail-sub-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 9px;
  color: var(--t1);
}
.kv-detail-sub-lbl {
  width: 80px;
  flex-shrink: 0;
  font-weight: 600;
  color: var(--t3);
  font-size: 10px;
  text-align: right;
}

/* ═══════════════════════════════════════════════
   RADIO GROUP — Pill-style radio buttons
   ═══════════════════════════════════════════════ */
.kv-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kv-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t2);
  cursor: pointer;
  transition: all .15s;
  background: #fff;
}
.kv-radio-label:hover {
  border-color: var(--blue);
  background: rgba(34,186,255,.04);
}
.kv-radio-label input[type="radio"] {
  margin: 0;
  accent-color: var(--blue);
}
.kv-radio-label input[type="radio"]:checked + span {
  color: var(--navy);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════
   SELECT SEARCH BAR — Search bar inside cards
   ═══════════════════════════════════════════════ */
.kv-select-search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: var(--page);
  border-bottom: 1px solid var(--border2);
}
.kv-select-search-bar input {
  flex: 1;
  max-width: 360px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t1);
  background: #fff;
}
.kv-select-search-bar input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(34,186,255,.12);
}

/* ═══════════════════════════════════════════════
   MONOSPACE VALUE — for IDs, tokens, ARNs
   ═══════════════════════════════════════════════ */
.kv-val-mono {
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  background: var(--page);
  padding: 3px 6px;
  border-radius: 4px;
  word-break: break-all;
}

/* ═══════════════════════════════════════════════
   INFO BOX — Contextual helper / tip box
   ═══════════════════════════════════════════════ */
.kv-info-box {
  background: #f0f7ff;
  border: 1px solid #d0e3f7;
  border-radius: 5px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-family: var(--f);
  font-size: 9px;
  color: #31708f;
  line-height: 1.6;
}
.kv-info-box strong { color: #245269; }
.kv-info-box code {
  background: #d4eaf7;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  color: #245269;
}
.kv-info-box-title {
  font-size: 9px;
  font-weight: 700;
  color: #245269;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kv-info-box-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 16px;
}

/* ═══════════════════════════════════════════════
   VERSION DISPLAY — Major.Minor.Point tags
   ═══════════════════════════════════════════════ */
.kv-ver-main {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 4px;
}
.kv-ver-parts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kv-ver-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--t1);
  font-weight: 600;
}
.kv-ver-tag-lbl {
  background: var(--border2);
  color: var(--t3);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 9px;
  text-transform: capitalize;
}

/* kv-modal-* canonical definitions → moved to kuvrr-global.css section 5 */

/* ═══════════════════════════════════════════════
   MAP TOOL BUTTONS (geofence edit)
   ═══════════════════════════════════════════════ */
.kv-map-tools {
  display: flex;
  gap: 0;
  margin-top: 10px;
}
.kv-map-tools form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.kv-map-tool-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.kv-map-tool-btn span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 500;
  color: var(--t2);
  background: #fff;
  transition: all .15s ease;
}
.kv-map-tools input[type="radio"]:checked + .kv-map-tool-btn span {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  font-weight: 600;
}
.kv-map-tool-btn span:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.kv-map-tools input[type="radio"]:checked + .kv-map-tool-btn span:hover {
  color: #fff;
}

/* Geofence map full-width override */
.kv-edit-card .map-container,
.kv-edit-card #map-canvas {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 0 8px 8px;
}


/* =============================================
   NOTIFICATION FORM COMPONENTS
   ============================================= */

/* Template source selection */
.kv-notif-source-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kv-notif-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--f);
}
.kv-notif-radio-label input[type="radio"] {
  accent-color: var(--blue);
  margin: 0;
}
.kv-notif-template-dd {
  flex: 1;
  max-width: 400px;
}
.kv-notif-template-dd select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t1);
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.kv-notif-template-dd select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,186,255,.12);
}
.kv-notif-template-dd.kv-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Notification channels */
.kv-notif-channels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.kv-notif-channel {
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.kv-notif-ch-head {
  padding: 8px 12px;
  background: var(--page);
  border-bottom: 1px solid var(--border);
}
.kv-notif-ch-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--f);
}
.kv-notif-ch-toggle input[type="checkbox"] {
  accent-color: var(--blue);
  width: 14px;
  height: 14px;
  margin: 0;
}
.kv-notif-ch-toggle span {
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
}
.kv-notif-ch-toggle span i {
  margin-right: 4px;
  color: var(--blue);
  font-size: 9px;
}
.kv-notif-ch-body {
  padding: 10px 12px;
}
.kv-notif-ch-body .inp,
.kv-notif-ch-body textarea.inp {
  width: 100%;
  box-sizing: border-box;
}
.kv-notif-ch-body textarea.inp {
  resize: vertical;
  min-height: 48px;
}
.kv-notif-ch-body .ql-container {
  border-radius: 0 0 6px 6px;
}
.kv-notif-ch-body .ql-toolbar {
  border-radius: 5px 5px 0 0;
}

/* Input addon (date/time pickers) */
.kv-input-addon {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.kv-input-addon .inp {
  border: none;
  border-radius: 0;
  flex: 1;
}
.kv-input-addon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  cursor: pointer;
  background: var(--page);
  border-left: 1px solid var(--border);
}
.kv-input-addon-btn img {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}
.kv-input-addon-btn:hover img {
  opacity: 1;
}

/* Day chips for custom repeat */
.kv-notif-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.kv-notif-day-chip {
  cursor: pointer;
  font-family: var(--f);
}
.kv-notif-day-chip input[type="checkbox"] {
  display: none;
}
.kv-notif-day-chip span {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.15s;
}
.kv-notif-day-chip input:checked + span {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.kv-notif-day-chip:hover span {
  border-color: var(--blue);
  color: var(--blue);
}
.kv-notif-day-chip input:checked + span:hover {
  color: #fff;
}

/* Notification form override — remove old bootstrap row spacing */
.kv-notif-form .row {
  margin-left: 0;
  margin-right: 0;
}

/* Selectize dropdown inside edit cards */
.kv-edit-card .selectize-dd {
  width: 100%;
  min-width: 0;
}
.kv-edit-card .selectize-dd .ui-select-container,
.kv-edit-card .selectize-dd .form-control {
  font-family: var(--f);
  font-size: 9px;
  width: 100%;
  height: auto;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: none;
  padding: 0;
  box-sizing: border-box;
}
.kv-edit-card .selectize-dd .selectize-input {
  height: auto;
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-family: var(--f);
  background: #fff;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.kv-edit-card .selectize-dd .selectize-input:focus,
.kv-edit-card .selectize-dd .selectize-input.focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,186,255,0.12);
}
.kv-edit-card .selectize-dd .ui-select-match-item {
  font-size: 10px;
}
.kv-edit-input.selectize-dd {
  width: 100%;
  min-width: 0;
}

/* ── Job Schedule Week Table ── */
.kv-schedule-table td { vertical-align: middle; }
.kv-schedule-table .time-slots { display: flex; align-items: center; margin-bottom: 4px; }
.kv-schedule-table .time-slots-inner { display: flex; align-items: center; gap: 5px; }
.kv-schedule-table .time-slots-inner .inp { height: 30px; font-size: 10px; padding: 0 6px; }
.kv-schedule-table tr.disabled td { opacity: 0.45; }
.kv-schedule-table .start-end-time { display: flex; width: 70%; justify-content: space-between; }

/* ── Notification History Detail — Modal Channel Rows ── */
.kv-notif-modal-channel {
  display: grid;
  grid-template-columns: 120px 1fr 180px;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.kv-notif-modal-channel:last-child {
  border-bottom: none;
}
.kv-notif-modal-ch-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--navy);
  padding-top: 4px;
}
.kv-notif-modal-ch-label i {
  margin-right: 4px;
  color: var(--blue);
}
.kv-notif-modal-ch-content {
  flex: 1;
}
.kv-notif-modal-ch-status {
  text-align: right;
}

/* ── Check-In/Out List — Cell Layout ── */
.kv-cio-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 9px;
}
.kv-cio-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.kv-cio-label {
  font-weight: 600;
  color: var(--t2);
  min-width: 65px;
  font-size: 10px;
}

/* ── Check-In/Out Create — Content Sections ── */
.kv-cio-content-section {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.kv-cio-section-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  display: block;
}
.kv-cio-section-label i {
  margin-right: 4px;
  color: var(--blue);
}
.kv-cio-section-body {
  display: flex;
  flex-direction: column;
}
.kv-cio-section-body .inp,
.kv-cio-section-body textarea.inp {
  width: 100%;
  box-sizing: border-box;
}

/* ── Check-In/Out Detail — Content Rows ── */
.kv-cio-detail-row {
  padding: 10px 12px;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-bottom: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.kv-cio-detail-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--navy);
  min-width: 60px;
  padding-top: 2px;
}
.kv-cio-detail-label i {
  margin-right: 4px;
  color: var(--blue);
}
.kv-cio-detail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kv-cio-detail-item {
  font-size: 9px;
  color: var(--t2);
  line-height: 1.5;
}
.kv-cio-detail-key {
  font-weight: 600;
  color: var(--t1);
}

/* ── Polling — Tab Bar ── */
.kv-poll-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border2);
  margin-bottom: 12px;
}
.kv-poll-tab {
  padding: 8px 20px;
  font-size: 9px;
  font-weight: 500;
  color: var(--t3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  cursor: pointer;
}
.kv-poll-tab:hover {
  color: var(--navy);
}
.kv-poll-tab.active {
  color: var(--navy);
  font-weight: 700;
  border-bottom-color: var(--blue);
}

/* ── Polling — Contacts Panel ── */
.kv-poll-contacts-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.kv-poll-contacts-head {
  background: var(--navy);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 8px 12px;
}
.kv-poll-contacts-body {
  height: 260px;
  overflow-y: auto;
  padding: 0;
}
.kv-poll-contacts-empty {
  padding: 16px 12px;
  font-size: 9px;
  color: var(--t3);
  font-style: italic;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.kv-poll-contact-item {
  padding: 6px 12px;
  font-size: 9px;
  border-bottom: 1px solid var(--border);
}
.kv-poll-contact-item:last-child {
  border-bottom: none;
}
.kv-poll-contact-item:nth-child(even) {
  background: #F8FAFC;
}
.kv-poll-contact-optout {
  background: #FFF5F5 !important;
}

/* ═══════════════════════════════════════════════
   POLL LIST — Filter & Table Overrides
   ═══════════════════════════════════════════════ */
/* Remove old incident-list-pane wrapper when not present */
.kv-poll-filter-wrap,
.kv-poll-table-wrap {
  width: 100%;
  box-sizing: border-box;
}

/* Style the directive-rendered filter form */
.kv-poll-filter-wrap .card {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
}
.kv-poll-filter-wrap .card-body {
  padding: 14px 16px;
}
.kv-poll-filter-wrap form.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.kv-poll-filter-wrap form.form-inline label {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  color: var(--t2);
}
.kv-poll-filter-wrap form.form-inline input[type="text"] {
  font-family: var(--f);
  font-size: 9px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  color: var(--t1);
  background: var(--white);
  box-sizing: border-box;
}
.kv-poll-filter-wrap form.form-inline input[type="text"]:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(34,186,255,.15);
}
.kv-poll-filter-wrap form.form-inline input[type="submit"] {
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: .04em;
  padding: 7px 16px;
  border: none;
  border-radius: var(--r2);
  background: var(--blue);
  color: var(--navy);
  cursor: pointer;
}
.kv-poll-filter-wrap form.form-inline input[type="submit"]:hover {
  opacity: .9;
}
.kv-poll-filter-wrap form.form-inline input[type="button"] {
  font-family: var(--f);
  font-size: 10px;
  font-weight: 600;
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  background: var(--white);
  color: var(--t2);
  cursor: pointer;
}
.kv-poll-filter-wrap form.form-inline input[type="button"]:hover {
  background: var(--page);
}
.kv-poll-filter-wrap .row {
  margin: 0;
}
.kv-poll-filter-wrap .col-xs-12 {
  padding: 0;
}
.kv-poll-filter-wrap .mb_10 {
  margin-bottom: 0 !important;
}

/* Style the directive-rendered poll table */
.kv-poll-table-wrap .table-container {
  overflow-x: auto;
}
.kv-poll-table-wrap #incident-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.kv-poll-table-wrap #incident-table thead tr {
  background: var(--navy) !important;
}
.kv-poll-table-wrap #incident-table thead td {
  padding: 9px 12px !important;
  text-align: left;
  font-family: var(--f);
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: capitalize;
  letter-spacing: .06em;
  color: #fff !important;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.08);
}
.kv-poll-table-wrap #incident-table thead td:last-child {
  border-right: none;
}
.kv-poll-table-wrap #incident-table tbody tr:nth-child(odd) td {
  background: #FFFFFF;
}
.kv-poll-table-wrap #incident-table tbody tr:nth-child(even) td {
  background: #EBF8FF;
}
.kv-poll-table-wrap #incident-table tbody tr:hover td {
  background: #CCF0FF !important;
}
.kv-poll-table-wrap #incident-table tbody td {
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--border2);
  font-family: var(--f);
  font-size: 9px !important;
  color: var(--t2) !important;
  white-space: nowrap;
}
.kv-poll-table-wrap #incident-table tbody tr.condensed-profile {
  cursor: pointer;
}

/* Sortable header arrow styling within poll table */
.kv-poll-table-wrap sortable {
  cursor: pointer;
}

/* Pagination inside poll table card */
.kv-poll-table-wrap .pagination-bar {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
}

/* ═══════════════════════════════════════════════
   CONTACT DETAIL PAGE
   ═══════════════════════════════════════════════ */
.kv-contact-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kv-contact-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--f);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kv-contact-header-info {
  flex: 1;
}
.kv-contact-name {
  font-family: var(--f);
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.kv-contact-meta {
  font-family: var(--f);
  font-size: 9px;
  color: var(--t3);
  margin-top: 3px;
}
.kv-contact-meta i {
  color: var(--t4);
  margin-right: 5px;
  font-size: 10px;
}

/* Delete icon in modal */
.kv-contact-delete-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--red-bg);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* Danger button */
.kv-btn-danger {
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
}
.kv-btn-danger:hover {
  opacity: .9;
}
.kv-btn-danger:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════
   CONTACT FORM PAGE
   ═══════════════════════════════════════════════ */
.kv-contact-form .kv-edit-label {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  color: var(--t2);
}
.kv-required {
  color: var(--red);
  margin-left: 2px;
}
.kv-field-error {
  color: var(--red);
  font-size: 10px;
  margin-top: 3px;
}
.kv-field-help {
  color: var(--t4);
  font-size: 10px;
  margin-top: 3px;
}
.kv-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t1);
  cursor: pointer;
}
.kv-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue-mid);
  cursor: pointer;
}
.kv-contact-form .inp {
  width: 100%;
  box-sizing: border-box;
}
.kv-edit-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 0;
}

/* .kv-modal-close → moved to kuvrr-global.css section 5 */
/* ═══════════════════════════════════════════════
   CHAT LIST PAGE (/chat/)
   ═══════════════════════════════════════════════ */
.chat-list-page { font-family: var(--f); }

/* Toolbar */
.kv-chat-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.kv-chat-search-wrap { position:relative; flex:1; max-width:360px; }
.kv-chat-search-wrap input { border:1px solid var(--border); border-radius:var(--r2); padding:8px 12px 8px 34px; font-family:var(--f); font-size:9px; outline:none; width:100%; box-sizing:border-box; transition:border 0.2s; }
.kv-chat-search-wrap input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(34,186,255,0.1); }
.kv-chat-search-wrap i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--t4); font-size:12px; }

/* Tabs */
.kv-chat-tabs { display:flex; gap:0; margin-bottom:16px; border-bottom:2px solid var(--border2); }
.kv-chat-tab { padding:8px 16px; font-family:var(--f); font-size:10px; font-weight:600; color:var(--t3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.2s; }
.kv-chat-tab:hover { color:var(--blue); }
.kv-chat-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.kv-chat-tab-count { background:var(--border2); color:var(--t3); font-size:9px; font-weight:700; padding:1px 6px; border-radius:8px; margin-left:4px; }
.kv-chat-tab.active .kv-chat-tab-count { background:#e8f7ff; color:var(--blue); }

/* Room list */
.kv-chat-room-list { background:#fff; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.kv-chat-room-item { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.15s; }
.kv-chat-room-item:last-child { border-bottom:none; }
.kv-chat-room-item:hover { background:#EBF8FF; }

.kv-chat-room-avatar { width:40px; height:40px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f); font-size:16px; font-weight:700; flex-shrink:0; text-transform:capitalize; }
.kv-chat-room-avatar.group { background:var(--navy); }

.kv-chat-room-body { flex:1; margin-left:12px; min-width:0; }
.kv-chat-room-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.kv-chat-room-name { font-family:var(--f); font-size:9px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.kv-chat-room-time { font-family:var(--f); font-size:9px; color:var(--t4); white-space:nowrap; margin-left:8px; }
.kv-chat-room-bottom { display:flex; align-items:center; justify-content:space-between; }
.kv-chat-room-preview { font-family:var(--f); font-size:9px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; }
.kv-chat-room-preview .sender { font-weight:600; color:var(--t2); }
.kv-chat-unread-badge { background:#dc2626; color:#fff; font-family:var(--f); font-size:9px; font-weight:700; padding:2px 7px; border-radius:10px; margin-left:8px; flex-shrink:0; }
.kv-chat-missed-badge { background:#dc2626; color:#fff; font-family:var(--f); font-size:9px; font-weight:700; padding:2px 7px; border-radius:10px; margin-left:8px; flex-shrink:0; }
.kv-chat-missed-badge i { font-size:8px; margin-right:3px; }
.kv-chat-missed-badge .kv-chat-missed-time { margin-left:4px; font-weight:600; opacity:.9; }

/* Sidebar/nav "Chat" link badge: combined unread messages + missed calls.
   Hidden until the poller (chat_nav_badge.js) finds a non-zero total. */
.nav-chat-badge { display:none; }
.nav-chat-badge.show {
  display:inline-block; margin-left:7px; background:var(--red,#EF4444); color:#fff;
  font-family:var(--f); font-size:9px; font-weight:700; line-height:1;
  padding:2px 7px; border-radius:99px; vertical-align:middle; min-width:16px; text-align:center;
}

/* ═══════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION (<=600px)
   Shown exactly where the desktop sidebar is hidden, so mobile users keep
   navigation + the live chat badge. The "Menu" tab slides the full sidebar
   in as a drawer (body.sb-mobile-open) so nothing from the main nav is lost.
   ═══════════════════════════════════════════════ */
.kv-bottomnav { display:none; }
.kv-bn-backdrop { display:none; }

@media only screen and (max-width: 600px) {
  .kv-bottomnav {
    display:flex; position:fixed; left:0; right:0; bottom:0;
    height:56px; background:var(--navy);
    border-top:1px solid rgba(255,255,255,.08);
    z-index:1200; box-shadow:0 -2px 10px rgba(0,0,0,.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .kv-bn-item {
    flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; background:none; border:0; cursor:pointer; text-decoration:none;
    color:rgba(255,255,255,.62); font-family:var(--f); font-size:9px; font-weight:600;
    padding:6px 2px; -webkit-tap-highlight-color:transparent;
  }
  .kv-bn-item i { font-size:17px; line-height:1; }
  .kv-bn-item.active { color:var(--blue,#22BAFF); }
  .kv-bn-item:active { background:rgba(255,255,255,.06); }

  .kv-bn-icon-wrap { position:relative; display:inline-block; }
  .kv-bn-badge { display:none; }
  .kv-bn-badge.show {
    display:block; position:absolute; top:-6px; left:11px;
    background:var(--red,#EF4444); color:#fff; font-family:var(--f);
    font-size:8px; font-weight:700; line-height:1; min-width:14px; text-align:center;
    padding:2px 4px; border-radius:99px; border:1.5px solid var(--navy);
  }

  /* Keep page content (and footer) clear of the fixed bar */
  .loggedin.has-sidebar #content { padding-bottom:62px; }

  /* Sidebar drawer + backdrop (revealed by the Menu tab) */
  .kv-bn-backdrop {
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:1250; opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
  }
  body.sb-mobile-open .kv-bn-backdrop { opacity:1; visibility:visible; }

  body.loggedin.has-sidebar aside.sidebar {
    display:block !important; position:fixed !important;
    top:46px; bottom:0; left:0; width:240px; max-width:84vw;
    z-index:1300; transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    overflow-y:auto; background:var(--page);
    box-shadow:2px 0 14px rgba(0,0,0,.2);
  }
  body.sb-mobile-open.loggedin.has-sidebar aside.sidebar { transform:translateX(0); }
}
.kv-chat-room-type-icon { font-size:9px; color:var(--t4); margin-left:4px; }

/* Empty & loading */
.kv-chat-empty { text-align:center; padding:50px 20px; color:var(--t4); }
.kv-chat-empty i { font-size:36px; display:block; margin-bottom:12px; color:var(--border2); }
.kv-chat-empty-title { font-family:var(--f); font-size:13px; font-weight:600; color:var(--t2); margin-bottom:4px; }
.kv-chat-empty-text { font-family:var(--f); font-size:9px; }
.kv-chat-loading { text-align:center; padding:40px 20px; }
.kv-chat-loading i { font-size:24px; color:var(--blue); }
.kv-chat-loading div { font-family:var(--f); font-size:9px; color:var(--t3); margin-top:8px; }

/* ── Chat shimmer skeleton loaders (same technique as the incident page) ──
   Shown while vm.loading is true, then Angular hides the block on load. */
.kv-chat-skel {
    background: linear-gradient(90deg,#E5E9EE 0%,#F1F4F7 40%,#FAFBFC 50%,#F1F4F7 60%,#E5E9EE 100%);
    background-size: 200% 100%;
    animation: kvChatSkelShimmer 1.4s linear infinite;
    border-radius: 4px;
}
@keyframes kvChatSkelShimmer {
    0%   { background-position:  150% 0; }
    100% { background-position: -150% 0; }
}

/* Chat list: placeholder conversation rows (avatar + two lines + time) */
.kv-chat-skel-list { background:#fff; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.kv-chat-skel-row { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); }
.kv-chat-skel-row:last-child { border-bottom:none; }
.kv-chat-skel-avatar { width:40px; height:40px; border-radius:50%; flex:0 0 auto; margin-right:12px; }
.kv-chat-skel-lines { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.kv-chat-skel-line { height:9px; }
.kv-chat-skel-line.name { width:38%; height:11px; }
.kv-chat-skel-line.preview { width:70%; }
.kv-chat-skel-time { width:34px; height:9px; margin-left:12px; flex:0 0 auto; align-self:flex-start; }

/* Chat room: placeholder message bubbles, alternating incoming/outgoing */
.kv-chat-skel-msgs { display:flex; flex-direction:column; gap:14px; padding:8px 0; }
.kv-chat-skel-bubble { height:38px; border-radius:12px; max-width:60%; }
.kv-chat-skel-bubble.in  { align-self:flex-start; width:52%; }
.kv-chat-skel-bubble.out { align-self:flex-end;   width:44%; }
.kv-chat-skel-bubble.short { width:30%; }

/* Contact Picker Overlay */
.kv-cp-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.45); z-index:9999; display:flex; align-items:center; justify-content:center; }
.kv-cp-modal { background:#fff; border-radius:var(--r); width:420px; max-width:92vw; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.15); overflow:hidden; font-family:var(--f); }
.kv-cp-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.kv-cp-header h3 { margin:0; font-size:14px; font-weight:700; color:var(--t1); }
/* Override the global .kv-modal-close (white) for our white header */
.kv-cp-header .kv-modal-close { color:var(--t3); font-size:22px; }
.kv-cp-header .kv-modal-close:hover { color:var(--t1); }
.kv-cp-search { padding:12px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.kv-cp-search input { width:100%; border:1px solid var(--border); border-radius:var(--r2); padding:8px 12px; font-family:var(--f); font-size:12px; line-height:1.4; outline:none; box-sizing:border-box; }
.kv-cp-search input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(34,186,255,0.1); }
.kv-cp-list { flex:1; overflow-y:auto; padding:8px 0; }
.kv-cp-item { display:flex; align-items:center; padding:10px 20px; cursor:pointer; transition:background 0.15s; }
.kv-cp-item:hover { background:#EBF8FF; }
.kv-cp-avatar { width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; text-transform:capitalize; }
.kv-cp-avatar.external { background:#f59e0b; }
.kv-cp-avatar.emergency { background:#ef4444; }
.kv-cp-info { margin-left:12px; flex:1; min-width:0; }
.kv-cp-name { font-size:9px; font-weight:600; color:var(--t1); }
.kv-cp-role { font-size:10px; color:var(--t4); margin-top:1px; }
.kv-cp-empty { text-align:center; padding:30px 20px; color:var(--t4); font-size:9px; }
.kv-cp-loading { text-align:center; padding:30px 20px; color:var(--blue); font-size:9px; }
.kv-cp-loading-more { text-align:center; padding:12px 20px; color:var(--blue); font-size:9px; }

/* Contact Picker — tabs */
.kv-cp-tabs { display:flex; gap:0; border-bottom:1px solid var(--border2); padding:0 12px; overflow-x:auto; flex-shrink:0; background:#fff; }
.kv-cp-tab { padding:10px 12px; font-size:11px; line-height:1.4; font-weight:600; color:var(--t3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all 0.2s; display:flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0; }
.kv-cp-tab:hover { color:var(--blue); }
.kv-cp-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.kv-cp-tab-count { display:inline-block; padding:1px 7px; border-radius:99px; background:var(--page); color:var(--t3); font-size:10px; line-height:1.4; font-weight:700; }
.kv-cp-tab.active .kv-cp-tab-count { background:rgba(34,186,255,0.15); color:var(--blue); }

/* ═══════════════════════════════════════════════
   CHAT GROUP CREATE PAGE
   ═══════════════════════════════════════════════ */
.kv-cg-page { font-family: var(--f); }

.kv-cg-tabs { display:flex; gap:0; border-bottom:2px solid var(--border2); padding:0 16px; }
.kv-cg-tab { padding:8px 14px; font-size:10px; font-weight:600; color:var(--t3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.2s; display:flex; align-items:center; gap:4px; }
.kv-cg-tab:hover { color:var(--blue); }
.kv-cg-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.kv-cg-tab-count { background:var(--border2); color:var(--t3); font-size:9px; font-weight:700; padding:1px 5px; border-radius:8px; }
.kv-cg-tab.active .kv-cg-tab-count { background:#e8f7ff; color:var(--blue); }

.kv-cg-selected-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.kv-cg-tag { display:inline-flex; align-items:center; gap:4px; background:#e8f7ff; color:var(--blue); font-size:10px; font-weight:600; padding:4px 10px; border-radius:16px; }
.kv-cg-tag i { cursor:pointer; font-size:9px; opacity:0.7; }
.kv-cg-tag i:hover { opacity:1; }
.kv-cg-tag.tag-admin { background:#fef3c7; color:#92400e; }
.kv-cg-tag.tag-external { background:#dcfce7; color:#166534; }
.kv-cg-tag.tag-emergency { background:#fee2e2; color:#991b1b; }

.kv-cg-count { font-size:10px; color:var(--t3); margin-bottom:10px; }

.kv-cg-member-search { position:relative; margin-bottom:10px; }
.kv-cg-member-search i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--t4); font-size:12px; }
.kv-cg-member-search input { width:100%; border:1px solid var(--border); border-radius:var(--r2); padding:8px 12px 8px 32px; font-family:var(--f); font-size:9px; outline:none; box-sizing:border-box; }
.kv-cg-member-search input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(34,186,255,0.1); }

.kv-cg-loading { text-align:center; padding:30px; color:var(--blue); }

.kv-cg-member-list { max-height:360px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--r2); }
.kv-cg-member-item { display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; transition:background 0.12s; border-bottom:1px solid var(--border); }
.kv-cg-member-item:last-child { border-bottom:none; }
.kv-cg-member-item:hover { background:#EBF8FF; }
.kv-cg-member-item.selected { background:#e8f7ff; }
.kv-cg-member-item input[type="checkbox"] { accent-color:var(--blue); width:15px; height:15px; flex-shrink:0; }

.kv-cg-member-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#d5f0ff,#b3e4ff); color:#1aa3e0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; text-transform:capitalize; flex-shrink:0; }
.kv-cg-member-avatar.av-admin { background:#fef3c7; color:#92400e; }
.kv-cg-member-avatar.av-external { background:#dcfce7; color:#166534; }
.kv-cg-member-avatar.av-emergency { background:#fee2e2; color:#991b1b; }

.kv-cg-member-info { flex:1; min-width:0; }
.kv-cg-member-name { font-size:9px; font-weight:600; color:var(--t1); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.kv-cg-member-detail { font-size:10px; color:var(--t4); margin-top:1px; }

.kv-cg-role-badge { font-size:8px; font-weight:700; padding:1px 6px; border-radius:4px; text-transform:capitalize; letter-spacing:0.3px; }
.kv-cg-role-badge.badge-app-user { background:#dbeafe; color:#1e40af; }
.kv-cg-role-badge.badge-admin { background:#fef3c7; color:#92400e; }
.kv-cg-role-badge.badge-external { background:#dcfce7; color:#166534; }
.kv-cg-role-badge.badge-emergency { background:#fee2e2; color:#991b1b; }

.kv-cg-empty-search { text-align:center; padding:24px; color:var(--t4); font-size:9px; }
.kv-cg-empty-search i { margin-right:6px; }

/* ═══════════════════════════════════════════════
   CHAT ROOM PAGE — Three-Column Layout
   ═══════════════════════════════════════════════ */
.chat-app-container {
  font-family: var(--f);
  display: flex;
  height: calc(100vh - 120px);
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
}

/* LEFT SIDEBAR — Chat List */
.chat-left-sidebar {
  width: 320px;
  background: #f8fafc;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.cls-header { padding: 18px 18px 0; flex-shrink: 0; }
.cls-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cls-title { font-family: var(--f); font-size: 16px; font-weight: 700; color: var(--t1); margin: 0; }
.cls-actions { display: flex; gap: 4px; }
.cls-action-btn {
  width: 34px; height: 34px;
  border: none; border-radius: 10px;
  background: transparent; color: var(--t3);
  cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; text-decoration: none;
}
.cls-action-btn:hover { background: #e2e8f0; color: var(--blue); }

.cls-search { position: relative; margin-bottom: 14px; }
.cls-search input {
  width: 100%; border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px 10px 38px;
  font-family: var(--f); font-size: 9px; outline: none;
  background: #fff; color: var(--t1); box-sizing: border-box;
  transition: border 0.2s, box-shadow 0.2s;
}
.cls-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34,186,255,0.1); }
.cls-search input::placeholder { color: var(--t4); }
.cls-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--t4); font-size: 13px; }

/* Active / Archived view toggle */
.cls-view-tabs { display: flex; gap: 6px; margin-top: 10px; }
.cls-view-tab {
  flex: 1; padding: 6px 10px; border: 1px solid var(--border);
  background: #fff; color: var(--t3); font-family: var(--f);
  font-size: 11px; font-weight: 600; border-radius: 8px; cursor: pointer;
  transition: all 0.15s;
}
.cls-view-tab:hover { border-color: var(--blue); color: var(--blue); }
.cls-view-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.cls-room-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.cls-room-list::-webkit-scrollbar { width: 4px; }
.cls-room-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.cls-room-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 12px; cursor: pointer;
  transition: all 0.15s; margin-bottom: 2px; position: relative;
}
.cls-room-item:hover { background: #e8f7ff; }
.cls-room-restore {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--blue);
  cursor: pointer; transition: all 0.15s; font-size: 12px;
}
.cls-room-restore:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.cls-room-item.active {
  background: linear-gradient(135deg, var(--blue), #1aa3e0);
  box-shadow: 0 4px 14px rgba(26,163,224,0.25);
}
.cls-room-item.active * { color: #fff !important; }
.cls-room-item.active .cls-room-unread { background: #fff; color: var(--blue) !important; }
.cls-room-item.active .cls-room-avatar { background: rgba(255,255,255,0.25); color: #fff; }

.cls-room-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, #d5f0ff, #b3e4ff);
  color: #1aa3e0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f); font-size: 16px; font-weight: 700;
  text-transform: capitalize; flex-shrink: 0; position: relative;
}
.cls-room-avatar.group-av { background: linear-gradient(135deg, #e8f7ff, #d5f0ff); color: #1a9fd4; }
.cls-room-online-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #22c55e; border: 2px solid #f8fafc;
}

.cls-room-body { flex: 1; min-width: 0; }
.cls-room-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.cls-room-name { font-family: var(--f); font-size: 12px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.cls-room-time { font-family: var(--f); font-size: 10px; color: var(--t4); white-space: nowrap; flex-shrink: 0; }
.cls-room-bottom { display: flex; align-items: center; justify-content: space-between; }
.cls-room-preview { font-family: var(--f); font-size: 9px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.cls-room-preview .sender { font-weight: 600; color: var(--t2); }
.cls-room-unread {
  background: var(--blue); color: #fff;
  font-family: var(--f); font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; flex-shrink: 0;
  min-width: 20px; text-align: center;
}
.cls-room-missed {
  background: #dc2626; color: #fff;
  font-family: var(--f); font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; flex-shrink: 0;
  text-align: center; margin-right: 4px;
}
.cls-room-missed i { font-size: 9px; margin-right: 2px; }
.cls-empty { text-align: center; padding: 40px 16px; color: var(--t4); }
.cls-empty i { font-size: 32px; display: block; margin-bottom: 8px; color: var(--border2); }

/* CENTER — Main Chat Area */
.cr-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; background: #fff; }

.cr-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 68px; background: #fff;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cr-header-left { display: flex; align-items: center; gap: 14px; }
.cr-header-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #1a9fd4);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--f); font-size: 17px; font-weight: 700;
  text-transform: capitalize; flex-shrink: 0;
}
.cr-header-avatar.group { background: linear-gradient(135deg, #1aa3e0, var(--blue)); }
.cr-header-info-wrap { min-width: 0; }
.cr-header-name {
  margin: 0; font-family: var(--f); font-size: 14px; font-weight: 700; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; line-height: 1.3;
}
.cr-header-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.cr-header-meta-item { font-family: var(--f); font-size: 9px; color: var(--t4); display: flex; align-items: center; gap: 4px; }
.cr-header-meta-item i { font-size: 10px; }
.cr-header-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border2); }
.cr-header-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; }

.cr-header-actions { display: flex; align-items: center; gap: 2px; }
.cr-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: none; background: transparent; color: var(--t3); cursor: pointer;
  transition: all 0.15s; font-size: 16px;
}
.cr-action-btn:hover { background: #f1f5f9; color: var(--blue); }
.cr-action-btn.active { background: var(--blue); color: #fff; }
.cr-action-btn:disabled, .cr-action-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.cr-action-divider { width: 1px; height: 24px; background: var(--border); margin: 0 6px; }

/* Group menu dropdown */
.cr-group-menu { position: relative; }
.cr-group-dropdown {
  display: none; position: absolute; right: 0; top: 46px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12); min-width: 230px;
  z-index: 100; overflow: hidden; padding: 6px 0;
}
.cr-group-dropdown.open { display: block; }
.cr-group-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-family: var(--f); font-size: 9px; font-weight: 500; color: var(--t2);
  cursor: pointer; transition: background 0.12s;
}
.cr-group-dropdown-item:hover { background: #f8fafc; }
.cr-group-dropdown-item i { width: 16px; text-align: center; color: var(--t4); font-size: 14px; }
.cr-group-dropdown-item.danger { color: #dc2626; }
.cr-group-dropdown-item.danger i { color: #dc2626; }

/* MESSAGES AREA */
.cr-messages { flex: 1; overflow-y: auto; padding: 20px 24px; background: #fafbfc; }
.cr-messages::-webkit-scrollbar { width: 5px; }
.cr-messages::-webkit-scrollbar-track { background: transparent; }
.cr-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

.cr-msg { display: flex; margin-bottom: 4px; align-items: flex-end; }
.cr-msg.mine { flex-direction: row-reverse; }

.cr-msg-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #d5f0ff, #b3e4ff);
  color: #1aa3e0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f); font-size: 12px; font-weight: 700; flex-shrink: 0;
  text-transform: capitalize; margin-bottom: 2px;
}
.cr-msg-content { max-width: 55%; margin: 0 10px; position: relative; }
.cr-msg-sender { font-family: var(--f); font-size: 9px; font-weight: 600; color: var(--blue); margin-bottom: 3px; padding-left: 4px; }
.cr-msg.mine .cr-msg-sender { text-align: right; color: var(--blue); padding-right: 4px; }

.cr-msg-bubble {
  padding: 10px 14px 6px; border-radius: 18px;
  font-family: var(--f); font-size: 12px; line-height: 1.55; color: var(--t1);
  word-wrap: break-word; position: relative; min-width: 90px;
}
.cr-msg:not(.mine) .cr-msg-bubble {
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); border-bottom-left-radius: 6px;
}
.cr-msg.mine .cr-msg-bubble {
  background: linear-gradient(135deg, var(--blue) 0%, #1aa3e0 50%, #5bc8ff 100%);
  color: #fff; border-bottom-right-radius: 6px;
  box-shadow: 0 3px 12px rgba(26,163,224,0.25);
}

.cr-msg-time-inline {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 4px; margin-top: 4px; font-size: 9px; opacity: 0.6;
}
.cr-msg.mine .cr-msg-time-inline { color: rgba(255,255,255,0.7); }
.cr-msg:not(.mine) .cr-msg-time-inline { color: var(--t4); }

/* Read receipts: double-tick, blue when seen */
.cr-msg-receipt { position: relative; display: inline-flex; align-items: center; width: 15px; height: 9px; }
.cr-msg-receipt i { position: absolute; top: 0; font-size: 9px; line-height: 1; }
.cr-msg-receipt .cr-receipt-tick2 { left: 4px; }
.cr-msg.mine .cr-msg-receipt i { color: rgba(255,255,255,0.7); }
.cr-msg-receipt.seen i { color: #38bdf8; }
.cr-msg.mine .cr-msg-receipt.seen i { color: #7fe0ff; }
.cr-msg-edited { font-size: 9px; font-style: italic; opacity: 0.7; }

/* Quoted reply preview inside a bubble */
.cr-msg-quote {
  border-left: 3px solid var(--blue); border-radius: 4px;
  background: rgba(34,186,255,0.08); padding: 4px 8px; margin-bottom: 4px;
  cursor: pointer; max-width: 100%; overflow: hidden;
}
.cr-msg.mine .cr-msg-quote { background: rgba(255,255,255,0.16); border-left-color: rgba(255,255,255,0.8); }
.cr-msg-quote-name { display: block; font-size: 9px; font-weight: 700; color: var(--blue); }
.cr-msg.mine .cr-msg-quote-name { color: #eaf8ff; }
.cr-msg-quote-text { display: block; font-size: 10px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-msg.mine .cr-msg-quote-text { color: rgba(255,255,255,0.85); }
.cr-msg-quote-text.deleted { font-style: italic; opacity: 0.7; }

/* Flash highlight when jumping to a quoted message */
.cr-msg-flash > .cr-msg-content > .cr-msg-bubble,
.cr-msg-flash .cr-msg-bubble { animation: crMsgFlash 1.4s ease; }
@keyframes crMsgFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,186,255,0); }
  20% { box-shadow: 0 0 0 3px rgba(34,186,255,0.45); }
}

/* Reply compose preview (above the input) */
.cr-reply-compose {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin: 0 12px; border-left: 3px solid var(--blue);
  background: var(--page); border-radius: 6px;
}
.cr-reply-compose-icon { color: var(--blue); font-size: 13px; flex-shrink: 0; }
.cr-reply-compose-info { flex: 1; min-width: 0; }
.cr-reply-compose-name { font-size: 10px; font-weight: 700; color: var(--blue); }
.cr-reply-compose-text { font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-reply-compose-cancel {
  border: none; background: none; color: var(--t4); cursor: pointer;
  font-size: 14px; padding: 4px; flex-shrink: 0;
}
.cr-reply-compose-cancel:hover { color: var(--red,#EF4444); }

/* Reactions */
.cr-msg-reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; padding-left: 4px; }
.cr-msg.mine .cr-msg-reactions { justify-content: flex-end; padding-right: 4px; padding-left: 0; }
.cr-reaction-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 2px 8px 2px 5px; font-size: 14px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: all 0.15s;
}
.cr-reaction-badge:hover { border-color: var(--blue); }
.cr-reaction-count { font-size: 10px; font-weight: 600; color: var(--t3); }
.cr-reaction-badge.mine { background: #e8f7ff; border-color: var(--blue); }
.cr-reaction-badge.mine .cr-reaction-count { color: var(--blue); }

/* Reaction picker (emoji palette popup) */
.cr-reaction-picker {
  display: inline-flex; gap: 2px; margin-top: 5px; padding: 3px;
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12); width: -moz-fit-content; width: fit-content;
}
.cr-msg.mine .cr-reaction-picker { margin-left: auto; }
.cr-reaction-opt {
  border: none; background: none; cursor: pointer; font-size: 17px; line-height: 1;
  width: 30px; height: 30px; border-radius: 50%;
  transition: transform .1s ease, background .12s ease;
}
.cr-reaction-opt:hover { background: var(--page); transform: scale(1.18); }

/* Forwarded label */
.cr-msg-forwarded { font-size: 10px; font-style: italic; color: var(--t4); margin-bottom: 3px; }
.cr-msg-forwarded i { font-size: 9px; margin-right: 3px; }
.cr-msg.mine .cr-msg-forwarded { color: rgba(255,255,255,0.75); }

/* Pinned messages bar */
.cr-pinned-bar {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px;
  background: #fff8e6; border-bottom: 1px solid #f3e2b3;
}
.cr-pinned-icon { color: var(--amber,#F59E0B); font-size: 12px; flex-shrink: 0; }
.cr-pinned-list { display: flex; gap: 16px; overflow-x: auto; flex: 1; min-width: 0; }
.cr-pinned-item { display: flex; gap: 6px; align-items: baseline; cursor: pointer; white-space: nowrap; }
.cr-pinned-from { font-size: 10px; font-weight: 700; color: var(--t2); }
.cr-pinned-text { font-size: 11px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.cr-pinned-item:hover .cr-pinned-text { color: var(--blue); }

/* Message search panel */
.cr-search-panel {
  border-bottom: 1px solid var(--border); background: #fff;
  display: flex; flex-direction: column; max-height: 340px;
}
.cr-search-input-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border2); }
.cr-search-input-row i { color: var(--t4); font-size: 13px; }
.cr-search-input-row input { flex: 1; border: none; outline: none; font-family: var(--f); font-size: 13px; background: none; }
.cr-search-close { border: none; background: none; cursor: pointer; color: var(--t4); font-size: 15px; padding: 2px 6px; }
.cr-search-close:hover { color: var(--red,#EF4444); }
.cr-search-results { overflow-y: auto; }
.cr-search-loading, .cr-search-empty { padding: 16px; text-align: center; color: var(--t4); font-size: 12px; }
.cr-search-result { padding: 9px 14px; border-bottom: 1px solid var(--border2); cursor: pointer; }
.cr-search-result:hover { background: #f0faff; }
.cr-search-result-top { display: flex; justify-content: space-between; margin-bottom: 2px; }
.cr-search-result-from { font-size: 11px; font-weight: 700; color: var(--t2); }
.cr-search-result-time { font-size: 10px; color: var(--t4); }
.cr-search-result-text { font-size: 12px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Forward modal */
.cr-forward-overlay {
  position: fixed; inset: 0; background: rgba(17,24,39,.45);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
}
.cr-forward-modal {
  background: #fff; border-radius: 10px; width: 420px; max-width: 92vw;
  max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,.2); overflow: hidden;
}
.cr-forward-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--blue); }
.cr-forward-head h4 { margin: 0; font-size: 13px; font-weight: 700; color: #fff; }
.cr-forward-close { border: none; background: none; color: rgba(255,255,255,.85); cursor: pointer; font-size: 16px; }
.cr-forward-close:hover { color: #fff; }
.cr-forward-preview { padding: 10px 18px; background: var(--page); border-bottom: 1px solid var(--border); font-size: 12px; }
.cr-forward-preview-from { font-weight: 700; color: var(--t2); margin-right: 5px; }
.cr-forward-preview-text { color: var(--t3); }
.cr-forward-list { overflow-y: auto; padding: 6px; flex: 1; }
.cr-forward-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.cr-forward-item:hover { background: var(--page); }
.cr-forward-item.selected { background: #e8f7ff; }
.cr-forward-item input { accent-color: var(--blue); }
.cr-forward-item-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.cr-forward-item-avatar.group { background: var(--blue); }
.cr-forward-item-name { font-size: 13px; color: var(--t1); }
.cr-forward-empty { padding: 18px; text-align: center; color: var(--t4); font-size: 12px; }
.cr-forward-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border2); }

/* @mentions */
.cr-mention { color: var(--blue); font-weight: 600; }
.cr-msg.mine .cr-mention { color: #d6f3ff; font-weight: 700; }
.cr-mention-picker {
  margin: 0 12px 6px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 -2px 12px rgba(0,0,0,.1);
  max-height: 200px; overflow-y: auto;
}
.cr-mention-opt { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; }
.cr-mention-opt:hover { background: var(--page); }
.cr-mention-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; flex-shrink: 0;
}
.cr-mention-name { font-size: 13px; color: var(--t1); }

/* Voice recording bar */
.cr-recording-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 0 12px 6px;
  background: #fff4f4; border: 1px solid #f6caca; border-radius: 8px;
}
.cr-recording-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red,#EF4444); animation: crRecPulse 1s ease-in-out infinite; flex-shrink: 0; }
@keyframes crRecPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.cr-recording-label { flex: 1; font-size: 12px; font-weight: 600; color: var(--t2); }
.cr-recording-btn { border: none; background: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; }
.cr-recording-btn.cancel { color: var(--red,#EF4444); }
.cr-recording-btn.cancel:hover { background: #fde8e8; }
.cr-recording-btn.send { color: #fff; background: var(--blue); }
.cr-recording-btn.send:hover { background: #4ac8ff; }

/* Voice message player */
.cr-audio-player { max-width: 240px; height: 38px; display: block; }
.cr-msg.mine .cr-audio-player { filter: none; }

/* Inline links */
.cr-link { color: inherit; text-decoration: underline; word-break: break-all; }
.cr-msg:not(.mine) .cr-link { color: var(--blue); }

/* Link preview card */
.cr-link-preview {
  display: flex; margin-top: 6px; max-width: 360px; text-decoration: none;
  background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--blue);
  border-radius: 8px; overflow: hidden;
}
.cr-link-preview:hover { background: #f7fbff; }
.cr-link-preview-img { width: 64px; height: 64px; object-fit: cover; flex-shrink: 0; }
.cr-link-preview-body { padding: 8px 10px; min-width: 0; }
.cr-link-preview-site { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--t4); }
.cr-link-preview-title { font-size: 12px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-link-preview-desc { font-size: 11px; color: var(--t3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Hover actions */
.cr-msg-hover-actions {
  display: none; position: absolute; top: 50%; transform: translateY(-50%);
  left: 100%; margin-left: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 2px;
  z-index: 5; gap: 1px;
}
.cr-msg-content:hover .cr-msg-hover-actions { display: flex; }
.cr-msg-hover-btn {
  width: 20px; height: 20px; border: none; border-radius: 5px;
  background: transparent; color: var(--t4); cursor: pointer;
  font-size: 10px; display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.cr-msg-hover-btn:hover { background: #f1f5f9; color: var(--t2); }
.cr-msg-hover-btn.danger:hover { background: #fef2f2; color: #dc2626; }

/* Image message */
.cr-msg-image-wrap {
  border-radius: 14px; overflow: hidden; margin-bottom: 2px;
  max-width: 280px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.cr-msg-image-wrap img { display: block; width: 100%; height: auto; }

/* Audio message */
.cr-msg-audio { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.cr-audio-play-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0; transition: all 0.15s;
}
.cr-msg:not(.mine) .cr-audio-play-btn { background: var(--blue); color: #fff; }
.cr-msg.mine .cr-audio-play-btn { background: rgba(255,255,255,0.25); color: #fff; }
.cr-audio-play-btn:hover { transform: scale(1.08); }
.cr-audio-wave { flex: 1; height: 4px; background: rgba(0,0,0,0.1); border-radius: 2px; position: relative; overflow: hidden; }
.cr-msg.mine .cr-audio-wave { background: rgba(255,255,255,0.2); }
.cr-audio-wave-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 2px; }
.cr-msg:not(.mine) .cr-audio-wave-fill { background: var(--blue); }
.cr-msg.mine .cr-audio-wave-fill { background: rgba(255,255,255,0.6); }
.cr-audio-duration { font-size: 10px; flex-shrink: 0; opacity: 0.7; }

/* File message */
.cr-msg-file {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  cursor: pointer; transition: all 0.15s; min-width: 200px;
}
.cr-msg:not(.mine) .cr-msg-file { background: #f8fafc; }
.cr-msg:not(.mine) .cr-msg-file:hover { background: #f1f5f9; }
.cr-msg.mine .cr-msg-file { background: rgba(255,255,255,0.15); }
.cr-msg.mine .cr-msg-file:hover { background: rgba(255,255,255,0.22); }
.cr-msg-file-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.cr-msg:not(.mine) .cr-msg-file-icon { background: #e8f7ff; color: var(--blue); }
.cr-msg.mine .cr-msg-file-icon { background: rgba(255,255,255,0.2); color: #fff; }
.cr-msg-file-info { flex: 1; min-width: 0; }
.cr-msg-file-info .filename { font-weight: 600; font-size: 9px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-msg-file-info .filesize { opacity: 0.6; font-size: 10px; }

/* System message */
.cr-msg-system { text-align: center; margin: 18px 0; }
.cr-msg-system span {
  font-family: var(--f); font-size: 10px; font-weight: 500; color: var(--t3);
  background: #f1f5f9; padding: 6px 18px; border-radius: 20px; display: inline-block;
}
.cr-msg-call-event .cr-call-event-time { margin-left: 8px; opacity: 0.7; font-size: 9px; }
.cr-msg-call-event .cr-call-event-duration { margin-left: 8px; font-size: 9px; font-weight: 700; color: var(--t2); }
.cr-msg-call-event .cr-call-event-duration i { font-size: 8px; margin-right: 2px; opacity: 0.7; }

/* Date separator */
.cr-date-sep { text-align: center; margin: 24px 0 14px; position: relative; }
.cr-date-sep::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); }
.cr-date-sep span {
  font-family: var(--f); font-size: 10px; font-weight: 600; color: var(--t4);
  background: #fafbfc; padding: 3px 16px; border-radius: 20px;
  display: inline-block; position: relative; z-index: 1;
}

/* Empty state */
.cr-messages-empty { text-align: center; padding: 80px 30px; }
.cr-messages-empty-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #e8f7ff, #d5f0ff);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.cr-messages-empty-icon i { font-size: 32px; color: var(--blue); }
.cr-messages-empty h4 { font-family: var(--f); font-size: 14px; font-weight: 600; color: var(--t2); margin: 0 0 6px; }
.cr-messages-empty p { font-family: var(--f); font-size: 12px; color: var(--t4); margin: 0; }

/* TYPING INDICATOR */
.cr-typing-bar { padding: 8px 24px; background: #fafbfc; display: none; align-items: center; gap: 8px; border-top: 1px solid var(--border); }
.cr-typing-bar.cr-typing-show { display: flex; }
.cr-typing-dots { display: flex; align-items: center; gap: 3px; }
.cr-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--t4); animation: typingBounce 1.4s infinite; }
.cr-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.cr-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
.cr-typing-text { font-family: var(--f); font-size: 9px; color: var(--t4); font-weight: 500; }

/* INPUT AREA */
.cr-input-area {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 14px 20px 18px; background: #fff;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.cr-input-left-actions { display: flex; align-items: center; }
.cr-input-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: transparent; color: var(--t4); cursor: pointer;
  transition: all 0.15s; font-size: 18px;
}
.cr-input-btn:hover { background: #f1f5f9; color: var(--blue); }

.cr-text-wrap { flex: 1; position: relative; }
.cr-text-wrap textarea {
  width: 100%; border: 1.5px solid var(--border);
  border-radius: 24px; padding: 11px 48px 11px 18px;
  font-family: var(--f); font-size: 12px; outline: none;
  resize: none; min-height: 44px; max-height: 120px;
  line-height: 1.45; box-sizing: border-box; color: var(--t1);
  transition: border-color 0.2s; background: #f8fafc;
}
.cr-text-wrap textarea::placeholder { color: var(--t4); }
.cr-text-wrap textarea:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(34,186,255,0.08); }

.cr-input-inline-actions { position: absolute; right: 6px; bottom: 5px; display: flex; align-items: center; gap: 0; }
.cr-input-inline-btn {
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: transparent; color: var(--t4); cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.cr-input-inline-btn:hover { color: var(--blue); background: #f1f5f9; }

.cr-send-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #1aa3e0);
  color: #fff; cursor: pointer; font-size: 17px; flex-shrink: 0;
  transition: all 0.15s; box-shadow: 0 3px 12px rgba(34,186,255,0.3);
}
.cr-send-btn:hover { transform: scale(1.06); box-shadow: 0 5px 18px rgba(34,186,255,0.4); }
.cr-send-btn:active { transform: scale(0.96); }
.cr-send-btn:disabled { background: #d1d5db; box-shadow: none; cursor: not-allowed; transform: none; }

.cr-send-error { font-family: var(--f); font-size: 9px; color: #dc2626; padding: 4px 24px 0; background: #fff; display: none; }
.cr-send-error.cr-error-show { display: block; }

/* RIGHT SIDEBAR — Group Info */
.cr-sidebar {
  width: 320px; background: #fff;
  border-left: 1px solid var(--border); flex-shrink: 0;
  display: flex; flex-direction: column; overflow: hidden;
  transition: width 0.25s ease, opacity 0.25s ease;
}
.cr-sidebar.collapsed { width: 0; border: none; opacity: 0; pointer-events: none; }

.cr-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; height: 68px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cr-sidebar-header h4 { margin: 0; font-family: var(--f); font-size: 14px; font-weight: 700; color: var(--t1); }
.cr-sidebar-close {
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: transparent; color: var(--t4); cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.cr-sidebar-close:hover { background: #f1f5f9; color: var(--t2); }

.cr-sidebar-body { flex: 1; overflow-y: auto; padding: 0; }
.cr-sidebar-body::-webkit-scrollbar { width: 4px; }
.cr-sidebar-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

/* Group avatar / info section */
.crs-group-profile { text-align: center; padding: 24px 20px 18px; border-bottom: 1px solid #f1f5f9; }
.crs-group-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #5bc8ff);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(34,186,255,0.25);
}
.crs-group-name { font-family: var(--f); font-size: 14px; font-weight: 700; color: var(--t1); margin: 0 0 4px; }
.crs-group-desc { font-family: var(--f); font-size: 9px; color: var(--t4); margin: 0; max-height: 36px; overflow: hidden; }

/* DM contact info block */
.crs-dm-info { padding: 0 20px 14px; display: flex; flex-direction: column; gap: 8px; }
.crs-dm-field { display: flex; flex-direction: column; gap: 2px; }
.crs-dm-lbl { font-family: var(--f); font-size: 9px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.04em; }
.crs-dm-lbl i { margin-right: 4px; }
.crs-dm-val { font-family: var(--f); font-size: 9px; font-weight: 400; color: var(--t1); word-break: break-all; }

/* Sidebar sections */
.crs-section { border-bottom: 1px solid #f1f5f9; }
.crs-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; cursor: pointer; transition: background 0.12s;
}
.crs-section-header:hover { background: #f8fafc; }
.crs-section-title {
  font-family: var(--f); font-size: 9px; font-weight: 700; color: var(--t2);
  text-transform: capitalize; letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 8px;
}
.crs-section-title i { color: var(--t4); font-size: 13px; }
.crs-section-count {
  font-family: var(--f); font-size: 10px; font-weight: 700;
  color: var(--blue); background: #e8f7ff;
  padding: 2px 8px; border-radius: 8px;
}
.crs-section-toggle { font-size: 12px; color: var(--t4); transition: transform 0.2s; }
.crs-section-toggle.open { transform: rotate(180deg); }

/* Files grid */
.crs-files-grid { padding: 0 14px 14px; }
.crs-file-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 8px; border-radius: 8px; transition: background 0.12s; cursor: pointer;
}
.crs-file-row:hover { background: #f8fafc; }
.crs-file-row-left { display: flex; align-items: center; gap: 10px; }
.crs-file-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.crs-file-icon.photos { background: #fef3c7; color: #d97706; }
.crs-file-icon.videos { background: #fee2e2; color: #dc2626; }
.crs-file-icon.files { background: #dbeafe; color: #2563eb; }
.crs-file-icon.audio { background: #dcfce7; color: #16a34a; }
.crs-file-icon.links { background: #d5f0ff; color: #1a9fd4; }
.crs-file-icon.voice { background: #fce7f3; color: #db2777; }
.crs-file-label { font-family: var(--f); font-size: 9px; font-weight: 500; color: var(--t2); }
.crs-file-count { font-family: var(--f); font-size: 9px; font-weight: 600; color: var(--t4); }

/* Members list */
.crs-members-list { padding: 0 8px 8px; }
.crs-member { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; transition: background 0.12s; }
.crs-member:hover { background: #f8fafc; }
.crs-member-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #d5f0ff, #b3e4ff);
  color: #1aa3e0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f); font-size: 13px; font-weight: 700;
  text-transform: capitalize; flex-shrink: 0; position: relative;
}
.crs-member-online { position: absolute; bottom: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.crs-member-offline { position: absolute; bottom: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #d1d5db; border: 2px solid #fff; }
.crs-member-info { flex: 1; min-width: 0; }
.crs-member-name {
  font-family: var(--f); font-size: 9px; font-weight: 600; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.crs-member-admin-badge {
  font-size: 8px; font-weight: 700; text-transform: capitalize;
  letter-spacing: 0.3px; padding: 1px 6px; border-radius: 4px;
  background: #fef3c7; color: #92400e;
}
.crs-member-external-badge {
  font-size: 8px; font-weight: 700; text-transform: capitalize;
  letter-spacing: 0.3px; padding: 1px 6px; border-radius: 4px;
  background: #dcfce7; color: #166534;
}
.crs-member-role { font-family: var(--f); font-size: 10px; color: var(--t4); }
.crs-member-make-admin {
  width: 26px; height: 26px; border: none; border-radius: 8px;
  background: transparent; color: #d1d5db; cursor: pointer;
  font-size: 12px; display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.crs-member-make-admin:hover { background: #fef3c7; color: #92400e; }
.crs-member-remove {
  width: 26px; height: 26px; border: none; border-radius: 8px;
  background: #fef2f2; color: #dc2626; cursor: pointer;
  font-size: 12px; display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.crs-member-remove:hover { background: #fee2e2; color: #b91c1c; }

/* CALL OVERLAY */
.cr-call-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  z-index: 9999; flex-direction: column; align-items: center; justify-content: center;
  /* Allow tall video/screenshare layouts to scroll instead of pushing the
     call controls off-screen, and reserve room for the pinned controls. */
  overflow-y: auto; padding: 70px 16px 120px;
}
.cr-call-overlay.active { display: flex; }
/* Keep the call controls (incl. End Call) always visible at the bottom,
   regardless of how tall the video/screenshare area grows. */
.cr-call-overlay .cr-call-controls {
  position: fixed; left: 0; right: 0; bottom: 28px;
  justify-content: center; z-index: 10001;
}
.cr-call-avatar-ring {
  width: 100px; height: 100px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #5bc8ff);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
  box-shadow: 0 0 0 8px rgba(34,186,255,0.15), 0 0 0 20px rgba(34,186,255,0.06);
}
.cr-call-avatar-ring i { font-size: 38px; color: #fff; }
.cr-call-status { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.cr-call-timer { color: var(--t4); font-size: 14px; margin-bottom: 30px; font-variant-numeric: tabular-nums; }
.cr-call-videos { position: relative; width: 680px; max-width: 92vw; height: auto; min-height: 315px; background: #000; border-radius: 20px; overflow: hidden; margin-bottom: 30px; box-shadow: 0 12px 48px rgba(0,0,0,0.5); }
.cr-call-video-container { width: 100%; height: 100%; }
/* Remote peers grid — one tile per participant, wraps for larger groups. */
.cr-call-remote-grid {
  width: 100%; min-height: 315px;
  display: grid; gap: 6px; padding: 6px; box-sizing: border-box;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-content: center;
}
.cr-call-remote-tile {
  position: relative; width: 100%; min-height: 200px;
  background: #1e293b; border-radius: 12px; overflow: hidden;
}
.cr-call-remote-tile video { width: 100% !important; height: 100% !important; object-fit: cover; }
.cr-call-video-container.local {
  position: absolute; bottom: 16px; right: 16px;
  width: 130px; height: 98px; background: #1e293b;
  border: 2px solid rgba(255,255,255,0.15); border-radius: 14px;
  overflow: hidden; z-index: 10;
}
.cr-call-video-label {
  position: absolute; bottom: 6px; left: 8px;
  font-family: var(--f); font-size: 10px; color: #fff;
  background: rgba(0,0,0,0.5); padding: 2px 8px; border-radius: 4px; z-index: 5;
}
.cr-call-controls { display: flex; gap: 16px; }
.cr-call-ctrl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 22px; transition: all 0.15s; color: #fff;
}
.cr-call-ctrl-btn.mute { background: rgba(255,255,255,0.12); }
.cr-call-ctrl-btn.mute:hover { background: rgba(255,255,255,0.2); }
.cr-call-ctrl-btn.mute.active { background: #f59e0b; }
.cr-call-ctrl-btn.video-toggle { background: rgba(255,255,255,0.12); }
.cr-call-ctrl-btn.video-toggle:hover { background: rgba(255,255,255,0.2); }
.cr-call-ctrl-btn.video-toggle.active { background: #f59e0b; }
.cr-call-ctrl-btn.hangup { background: #dc2626; }
.cr-call-ctrl-btn.hangup:hover { background: #ef4444; transform: scale(1.06); }
.cr-call-ctrl-btn.screenshare-toggle { background: rgba(255,255,255,0.12); }
.cr-call-ctrl-btn.screenshare-toggle:hover { background: rgba(255,255,255,0.2); }
.cr-call-ctrl-btn.screenshare-toggle.active { background: var(--blue); }
.cr-call-ctrl-btn.switch-camera { background: rgba(255,255,255,0.12); }
.cr-call-ctrl-btn.switch-camera:hover { background: rgba(255,255,255,0.2); }
.cr-call-ctrl-btn.chat-toggle { background: rgba(255,255,255,0.12); }
.cr-call-ctrl-btn.chat-toggle:hover { background: var(--blue); }

/* Return-to-chat / minimize affordances on the full call view */
.cr-call-minimize-btn {
  position: fixed; top: 22px; right: 24px; z-index: 10002;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.12); color: #fff; border: none;
  font-family: var(--f); font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 99px; cursor: pointer; transition: all 0.15s;
}
.cr-call-minimize-btn:hover { background: var(--blue); }
.cr-call-minimize-btn i { font-size: 14px; }
.cr-call-expand-btn { display: none; }

/* ----- Minimized call: collapse the overlay into a small floating bar so the
   chat conversation behind it is fully readable and usable. ----- */
.cr-call-overlay.minimized {
  top: auto; left: auto; right: 18px; bottom: 18px;
  width: 280px; height: auto; padding: 12px 14px;
  flex-direction: row; align-items: center; gap: 10px;
  border-radius: 14px; overflow: visible;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
.cr-call-overlay.minimized .cr-call-quality,
.cr-call-overlay.minimized .cr-call-videos,
.cr-call-overlay.minimized .cr-call-error,
.cr-call-overlay.minimized .cr-call-status,
.cr-call-overlay.minimized .cr-call-timer,
.cr-call-overlay.minimized #agora-screenshare-video,
.cr-call-overlay.minimized .cr-call-minimize-btn,
.cr-call-overlay.minimized .cr-call-ctrl-btn.chat-toggle,
.cr-call-overlay.minimized .cr-call-ctrl-btn.video-toggle,
.cr-call-overlay.minimized .cr-call-ctrl-btn.switch-camera,
.cr-call-overlay.minimized .cr-call-ctrl-btn.screenshare-toggle { display: none; }
.cr-call-overlay.minimized .cr-call-avatar-ring {
  width: 40px; height: 40px; margin-bottom: 0; box-shadow: none; flex: 0 0 auto;
}
.cr-call-overlay.minimized .cr-call-avatar-ring i { font-size: 16px; }
.cr-call-overlay.minimized .cr-call-name {
  font-size: 13px; margin-bottom: 0; flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-call-overlay.minimized .cr-call-controls {
  position: static; gap: 8px; margin-left: auto; flex: 0 0 auto;
}
.cr-call-overlay.minimized .cr-call-ctrl-btn { width: 38px; height: 38px; font-size: 15px; }
.cr-call-overlay.minimized .cr-call-expand-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: none; flex: 0 0 auto;
  background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; font-size: 14px;
}
.cr-call-overlay.minimized .cr-call-expand-btn:hover { background: var(--blue); }
.cr-call-name { color: #e2e8f0; font-family: var(--f); font-size: 20px; font-weight: 700; margin-bottom: 6px; letter-spacing: 0.02em; }
.cr-call-error {
  background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3);
  border-radius: 10px; padding: 8px 16px; margin-bottom: 16px;
  color: #fca5a5; font-family: var(--f); font-size: 9px; text-align: center; max-width: 400px;
}
.cr-call-error i { margin-right: 6px; color: #f87171; }
.cr-call-quality { position: absolute; top: 16px; right: 20px; display: flex; align-items: center; gap: 6px; color: var(--t4); font-family: var(--f); font-size: 9px; }
.cr-call-quality-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.cr-call-quality-bar { width: 3px; border-radius: 1px; background: rgba(255,255,255,0.2); }
.cr-call-quality-bar.active { background: #22c55e; }
.cr-call-quality-bar.warn { background: #f59e0b; }
.cr-call-quality-bar.poor { background: #ef4444; }
.cr-call-avatar-ring.ringing { animation: callAvatarRingPulse 1.5s infinite; }
@keyframes callAvatarRingPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(34,186,255,0.15), 0 0 0 20px rgba(34,186,255,0.06); }
  50% { box-shadow: 0 0 0 14px rgba(34,186,255,0.25), 0 0 0 30px rgba(34,186,255,0.1); }
}

/* SCREENSHARE PANEL */
.cr-screenshare-panel { display: none; flex: 1; flex-direction: column; background: #1a1e2e; position: relative; overflow: hidden; }
.cr-screenshare-panel.active { display: flex; }
.ss-top-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: #252a3a; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; z-index: 5; }
.ss-top-bar-left { display: flex; align-items: center; gap: 10px; }
.ss-presenting-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: ssPulse 1.5s infinite; }
@keyframes ssPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.ss-presenting-text { font-family: var(--f); font-size: 12px; font-weight: 600; color: #f1f5f9; }
.ss-presenting-text .presenter-name { color: var(--blue); }
.ss-top-bar-right { display: flex; align-items: center; gap: 8px; }
.ss-stop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border: none; border-radius: 8px;
  background: #dc2626; color: #fff; font-family: var(--f); font-size: 9px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.ss-stop-btn:hover { background: #ef4444; transform: scale(1.02); }
.ss-back-to-chat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
  background: transparent; color: var(--t4); font-family: var(--f); font-size: 9px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.ss-back-to-chat-btn:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
.ss-video-area { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; background: #111827; min-height: 0; }
.ss-main-video { width: 100%; height: 100%; background: #000; }
.ss-main-video video { width: 100% !important; height: 100% !important; object-fit: contain; }
.ss-pip-video {
  position: absolute; bottom: 16px; right: 16px;
  width: 180px; height: 135px; background: #1e293b;
  border: 2px solid rgba(255,255,255,0.12); border-radius: 12px;
  overflow: hidden; z-index: 10; box-shadow: 0 8px 24px rgba(0,0,0,0.4); display: none;
}
.ss-pip-video.visible { display: block; }
.ss-pip-label { position: absolute; bottom: 6px; left: 8px; font-family: var(--f); font-size: 10px; color: #fff; background: rgba(0,0,0,0.6); padding: 2px 8px; border-radius: 4px; }
.ss-controls {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 20px; background: #252a3a;
  border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.ss-ctrl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 18px; color: #e2e8f0; transition: all 0.15s; position: relative;
}
.ss-ctrl-btn.default { background: rgba(255,255,255,0.08); }
.ss-ctrl-btn.default:hover { background: rgba(255,255,255,0.15); }
.ss-ctrl-btn.active { background: #f59e0b; color: #fff; }
.ss-ctrl-btn.danger { background: #dc2626; color: #fff; }
.ss-ctrl-btn.danger:hover { background: #ef4444; transform: scale(1.06); }
.ss-ctrl-btn-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-family: var(--f); font-size: 9px; color: var(--t3); white-space: nowrap; }
.ss-participants { display: flex; align-items: center; gap: 8px; }
.ss-participant-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; background: rgba(255,255,255,0.06);
  border-radius: 20px; font-family: var(--f); font-size: 9px; color: #cbd5e1;
}
.ss-participant-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #1aa3e0);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--f); font-size: 10px; font-weight: 700; text-transform: capitalize;
}
.ss-participant-count { font-family: var(--f); font-size: 9px; color: var(--t3); padding: 4px 10px; background: rgba(255,255,255,0.04); border-radius: 12px; }

/* Incoming screenshare notification banner */
.ss-incoming-banner {
  display: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: #252a3a; border: 1px solid rgba(34,186,255,0.3);
  border-radius: 14px; padding: 14px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3); align-items: center; gap: 14px;
}
.ss-incoming-banner.visible { display: flex; }
.ss-incoming-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #1aa3e0);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.ss-incoming-text { color: #f1f5f9; font-family: var(--f); font-size: 12px; font-weight: 500; }
.ss-incoming-text strong { color: var(--blue); }
.ss-incoming-actions { display: flex; gap: 8px; margin-left: 8px; }
.ss-join-btn {
  padding: 7px 18px; border: none; border-radius: 8px;
  background: var(--blue); color: #fff; font-family: var(--f); font-size: 9px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.ss-join-btn:hover { background: #1aa3e0; }
.ss-dismiss-btn {
  padding: 7px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
  background: transparent; color: var(--t4); font-family: var(--f); font-size: 9px;
  cursor: pointer; transition: all 0.15s;
}
.ss-dismiss-btn:hover { background: rgba(255,255,255,0.06); }

/* Incoming call notification banner */
.call-incoming-banner {
  display: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: #252a3a; border: 1px solid rgba(34,186,255,0.3);
  border-radius: 14px; padding: 14px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3); align-items: center; gap: 14px;
}
.call-incoming-banner.visible { display: flex; }
.call-incoming-icon {
  width: 44px; height: 44px; border-radius: 50%;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; animation: callRingPulse 1.5s infinite;
}
.call-incoming-icon.audio { background: linear-gradient(135deg, var(--blue), #1aa3e0); }
.call-incoming-icon.video { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
@keyframes callRingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,186,255,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(34,186,255,0); }
}
.call-incoming-text { color: #f1f5f9; font-family: var(--f); font-size: 12px; font-weight: 500; }
.call-incoming-text strong { color: var(--blue); }

/* Ongoing-call (rejoin) banner */
.call-ongoing-banner {
  display: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 49;
  background: #252a3a; border: 1px solid rgba(34,197,94,0.35);
  border-radius: 14px; padding: 12px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3); align-items: center; gap: 14px;
}
.call-ongoing-banner.visible { display: flex; }
.call-ongoing-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.call-ongoing-text { color: #f1f5f9; font-family: var(--f); font-size: 12px; font-weight: 500; }
.call-ongoing-text strong { color: #22c55e; }
.call-ongoing-actions { display: flex; gap: 8px; margin-left: 8px; }
.call-incoming-actions { display: flex; gap: 8px; margin-left: 8px; }
.call-accept-btn {
  padding: 7px 18px; border: none; border-radius: 8px;
  background: #22c55e; color: #fff; font-family: var(--f); font-size: 9px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.call-accept-btn:hover { background: #16a34a; }
.call-reject-btn {
  padding: 7px 18px; border: none; border-radius: 8px;
  background: #dc2626; color: #fff; font-family: var(--f); font-size: 9px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.call-reject-btn:hover { background: #ef4444; }

/* MODALS */
#addMemberModal .modal-content,
#inviteExternalModal .modal-content {
  border-radius: 16px; border: none;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18); overflow: hidden;
}
#addMemberModal .modal-header,
#inviteExternalModal .modal-header {
  background: #f8fafc; border-bottom: 1px solid var(--border); padding: 18px 24px;
}
#addMemberModal .modal-header .modal-title,
#inviteExternalModal .modal-header .modal-title {
  font-family: var(--f); font-size: 14px; font-weight: 600; color: var(--t1);
}
/* Close button — Bootstrap .close fallback + browser button default render
   as a bordered box on these light headers. Restore borderless circular look
   matching the contact picker. */
#addMemberModal .modal-header .close,
#inviteExternalModal .modal-header .close {
  background: transparent; border: none; outline: none;
  color: var(--t3); opacity: 1; text-shadow: none;
  font-size: 24px; font-weight: 400; line-height: 1;
  padding: 4px 8px; margin: 0; cursor: pointer;
  border-radius: 6px; transition: all .12s ease;
}
#addMemberModal .modal-header .close:hover,
#inviteExternalModal .modal-header .close:hover {
  color: var(--t1); background: rgba(0,0,0,0.05);
}
#addMemberModal .modal-header .close:focus,
#inviteExternalModal .modal-header .close:focus {
  outline: none; box-shadow: 0 0 0 2px rgba(34,186,255,0.25);
}
#addMemberModal .modal-body,
#inviteExternalModal .modal-body { padding: 24px; }
#addMemberModal .modal-footer,
#inviteExternalModal .modal-footer {
  background: #f8fafc; border-top: 1px solid var(--border); padding: 16px 24px;
}

.cr-contact-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  cursor: pointer; transition: all 0.12s; margin-bottom: 2px;
}
.cr-contact-item:hover { background: #f8fafc; }
.cr-contact-item.selected { background: #f0f9ff; }
.cr-contact-check {
  width: 22px; height: 22px; border: 2px solid #d1d5db;
  border-radius: 5px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; transition: all 0.15s;
}
.cr-contact-item.selected .cr-contact-check { background: var(--blue); border-color: var(--blue); color: #fff; }
.cr-contact-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #d5f0ff, #b3e4ff);
  color: #1aa3e0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f); font-size: 12px; font-weight: 700; text-transform: capitalize; flex-shrink: 0;
}
.cr-contact-name { font-family: var(--f); font-size: 12px; font-weight: 500; color: var(--t1); }

/* Permission toggles */
.cr-perm-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-perm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1.5px solid var(--border);
  border-radius: 12px; cursor: pointer; transition: all 0.15s;
  font-family: var(--f); font-size: 9px; font-weight: 500; color: var(--t2);
}
.cr-perm-item:hover { border-color: var(--blue); }
.cr-perm-item.active { background: #f0f9ff; border-color: var(--blue); color: var(--blue); }
.cr-perm-item input[type="checkbox"] { display: none; }
.cr-perm-item i { font-size: 14px; }

/* Invite success */
.cr-invite-success { text-align: center; padding: 16px 0; }
.cr-invite-success-icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.cr-invite-success-icon i { font-size: 30px; color: #16a34a; }
.cr-invite-link-box {
  display: flex; align-items: center; gap: 8px;
  background: #f8fafc; border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px;
}
.cr-invite-link-box input {
  flex: 1; background: transparent; border: none;
  outline: none; font-family: var(--f); font-size: 9px; color: var(--t2);
}
.cr-invite-link-box button {
  padding: 7px 16px; border: 1.5px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--t2); font-family: var(--f); font-size: 9px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.cr-invite-link-box button:hover { border-color: var(--blue); color: var(--blue); }

/* Invite details block (success panel) */
.kv-invite-details {
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #f8fafc; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}
.kv-invite-detail-row { display: flex; align-items: center; gap: 8px; }
.kv-invite-detail-lbl {
  font-family: var(--f); font-size: 9px; font-weight: 600;
  color: var(--t3); text-transform: uppercase; letter-spacing: 0.04em;
  flex: 0 0 92px; white-space: nowrap;
}
.kv-invite-detail-lbl i { margin-right: 4px; width: 10px; text-align: center; }
.kv-invite-detail-val {
  font-family: var(--f); font-size: 9px; font-weight: 400; color: var(--t1);
  flex: 1; word-break: break-word;
}
.kv-invite-perm-pill {
  display: inline-block; font-family: var(--f); font-size: 9px; font-weight: 600;
  color: #075985; background: #e0f2fe; border: 1px solid #bae6fd;
  border-radius: 99px; padding: 2px 8px; margin-right: 4px;
}

/* ANIMATIONS */
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* CHAT RESPONSIVE */
@media (max-width: 1200px) {
  .cr-sidebar { width: 280px; }
  .chat-left-sidebar { width: 280px; }
}
@media (max-width: 960px) {
  .cr-sidebar { display: none; }
  .chat-left-sidebar { width: 260px; }
  .cr-msg-content { max-width: 70%; }
}
@media (max-width: 768px) {
  .chat-left-sidebar { display: none; }
  .cr-msg-content { max-width: 80%; }
}
@media (max-width: 640px) {
  .chat-app-container { height: calc(100vh - 90px); border-radius: 0; }
  .cr-messages { padding: 14px 12px; }
  .cr-input-area { padding: 10px 12px 14px; }
  .cr-header { padding: 0 12px; height: 58px; }
}

/* ===== Reports Page ===== */

/* Search input in page header */
.kv-rpt-search-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #fff;
    padding: 0 10px;
    height: 26px;
}
.kv-rpt-search-wrap:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(34,186,255,.1);
}
.kv-rpt-search-icon {
    color: var(--t4);
    font-size: 10px;
    flex-shrink: 0;
    pointer-events: none;
}
.kv-rpt-search-inp {
    font-family: var(--f);
    font-size: 9px;
    color: var(--t1);
    padding: 3px 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 200px;
}

/* Category Filter Pills */
.kv-rpt-cat-strip {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding: 2px 0;
    font-family: var(--f);
}
.kv-rpt-cat-pill {
    font-family: var(--f);
    font-size: 9px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--t3);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: all .12s;
    white-space: nowrap;
}
.kv-rpt-cat-pill:hover {
    border-color: var(--blue);
    color: var(--blue);
}
.kv-rpt-cat-pill.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

/* Category Section */
.kv-rpt-section {
    margin-bottom: 24px;
    font-family: var(--f);
}
.kv-rpt-sec-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--t3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kv-rpt-sec-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.kv-rpt-sec-count {
    background: #F0F7FF;
    color: var(--blue);
    font-size: 9px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 7px;
}

/* Report Card Grid */
.kv-rpt-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    font-family: var(--f);
}
.kv-rpt-card {
    background: #F7F8FA;
    border: 1px solid #F0F1F3;
    border-radius: 7px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kv-rpt-card:hover {
    border-color: var(--blue);
    background: #EFF8FF;
}
.kv-rpt-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.kv-rpt-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(34,186,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kv-rpt-card-icon i {
    color: var(--blue);
    font-size: 13px;
}
.kv-rpt-card-open {
    color: var(--blue);
    font-size: 11px;
    opacity: 0;
    transition: opacity .12s;
}
.kv-rpt-card:hover .kv-rpt-card-open {
    opacity: 1;
}
.kv-rpt-card-name {
    font-size: 9px;
    font-weight: 600;
    color: var(--t1);
    line-height: 1.35;
}
.kv-rpt-card-desc {
    font-size: 9px;
    color: var(--t4);
    line-height: 1.3;
}
@media (max-width: 640px) {
    .kv-rpt-card-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== Check-In/Out Report Details ===== */

.kv-cio-details {
    text-align: left;
    font-size: 10px;
    line-height: 1.5;
}
.kv-cio-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--f);
}
.kv-cio-lbl {
    font-weight: 700;
    font-size: 10px;
    color: var(--t2);
    white-space: nowrap;
}
.kv-cio-auto {
    background: #dc3545;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    text-transform: capitalize;
}
.kv-cio-sig-img {
    width: 60px;
    height: 60px;
    border: 1px solid #70ad47;
    border-radius: 4px;
    object-fit: contain;
    vertical-align: middle;
}
.kv-cio-more {
    color: var(--blue);
    font-size: 10px;
    text-decoration: underline;
    cursor: pointer;
}

/* ===== Report Dashboard Charts ===== */

.kv-rpt-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.kv-rpt-chart-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    font-family: var(--f);
    animation: fadeUp .3s ease both;
}
.kv-rpt-chart-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
    margin-bottom: 10px;
}
.kv-rpt-chart-footer {
    font-size: 9px;
    font-weight: 600;
    color: var(--t2);
    text-align: center;
    margin-top: 8px;
}
@media (max-width: 768px) {
    .kv-rpt-chart-grid {
        grid-template-columns: 1fr;
    }
}
table thead tr:first-child td:first-child, table thead tr:first-child td:last-child  {
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
}

/* ═══════════════════════════════════════════════
   COMMUNICATION SEND PAGE
   ═══════════════════════════════════════════════ */

/* Communication mode checkboxes */
.kv-comm-mode {
  display: flex;
  gap: 20px;
  padding: 6px 0;
}
.kv-comm-mode label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-family: var(--f);
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
}

/* Subject split input */
.kv-subject-group {
  display: flex;
  gap: 8px;
}
.kv-subject-group .kv-subject-prefix {
  width: 120px;
  min-width: 100px;
  background: var(--page);
}
.kv-subject-group .kv-subject-main {
  flex: 1;
}

/* Email editor (Quill)
.kv-editor-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r2);
  overflow: hidden;
}
.kv-editor-wrap #email_content {
  min-height: 150px;
  margin-top: 0;
} */

/* Email editor (Quill) */
.kv-editor-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r2);
  overflow: hidden;
  background: #ffffff;
}

/* Let the target element act as a flex column so its children stretch */
.kv-editor-wrap #email_content {
  min-height: 150px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

/* Force Quill's internal theme container to stretch completely */
.kv-editor-wrap #email_content .ql-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Force the actual clickable text area to fill the entire remaining 150px height */
.kv-editor-wrap #email_content .ql-editor {
  flex-grow: 1;
  height: 100%;
  min-height: 130px; /* Leave room for toolbar height variations */
  overflow-y: auto;
  box-sizing: border-box;
}



/* SMS counter */
.kv-sms-counter {
  margin-top: 4px;
  font-size: 10px;
  font-family: var(--f);
  color: var(--t4);
}
.kv-sms-counter.warning {
  color: var(--red);
  font-weight: 600;
}

/* Additional contact row */
.kv-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.kv-contact-row .selectize-dd,
.kv-contact-row > div:first-child {
  flex: 1 1 auto;
  /* allow the dropdown column to shrink below the selectize control's
     intrinsic width so the add button stays inside the card (flex items
     default to min-width:auto, which causes the overflow) */
  min-width: 0;
}
/* keep the add button at its natural size, never squeezed or pushed out */
.kv-contact-row > button {
  flex: 0 0 auto;
}

/* Inline add/edit contact form */
.kv-inline-contact {
  background: #f9fbfd;
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  padding: 14px;
  margin-top: 8px;
}
.kv-inline-contact .kv-contact-form-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.kv-inline-contact .kv-contact-form-row + .kv-contact-form-row {
  margin-top: 10px;
}
.kv-inline-contact input,
.kv-inline-contact select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  font-size: 9px;
  font-family: var(--f);
  color: var(--t2);
}
.kv-inline-contact input:focus,
.kv-inline-contact select:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(34,186,255,.15);
}

/* Attachment browse button */
.kv-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: #f0f7ff;
  border: 1px solid #d4e6f7;
  border-radius: var(--r2);
  font-size: 9px;
  font-family: var(--f);
  font-weight: 500;
  color: var(--blue-mid);
  cursor: pointer;
  transition: background .2s;
}
.kv-attach-btn:hover {
  background: #d4e6f7;
}

/* Attachment table */
.kv-attach-table {
  margin-top: 10px;
  width: 100%;
  border-collapse: collapse;
}
.kv-attach-table thead td {
  font-size: 9px;
  font-weight: 600;
  font-family: var(--f);
  color: var(--t4);
  text-transform: capitalize;
  letter-spacing: .05em;
  padding: 6px 8px;
  border-bottom: 2px solid var(--border2);
}
.kv-attach-table tbody tr {
  border-bottom: 1px solid var(--border2);
}
.kv-attach-table tbody td {
  padding: 8px;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t2);
}
.kv-attach-table .kv-remove-btn {
  cursor: pointer;
  color: var(--red);
  font-size: 14px;
  transition: color .2s;
}
.kv-attach-table .kv-remove-btn:hover {
  color: #c0392b;
}

/* Forwarded attachment tiles */
.kv-fwd-label {
  font-weight: 600;
  font-size: 10px;
  font-family: var(--f);
  color: var(--t4);
  text-transform: capitalize;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.kv-fwd-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.kv-fwd-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #f0f7ff;
  border: 1px solid #d4e6f7;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.kv-fwd-tile:hover {
  background: #d4e6f7;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.kv-fwd-tile i.file-icon { font-size: 20px; }
.kv-fwd-tile i.fa-file-image { color: #43a047; }
.kv-fwd-tile i.fa-file-video { color: #1e88e5; }
.kv-fwd-tile i.fa-file-audio { color: #e53935; }
.kv-fwd-tile i.fa-file-pdf  { color: #c62828; }
.kv-fwd-tile i.fa-file-word  { color: #2b579a; }
.kv-fwd-tile i.fa-file-excel { color: #217346; }
.kv-fwd-tile i.fa-file-powerpoint { color: #d24726; }
.kv-fwd-tile i.fa-file-archive { color: #f39c12; }
.kv-fwd-tile i.fa-file-code  { color: #8e24aa; }
.kv-fwd-tile i.fa-file-text  { color: #607d8b; }
.kv-fwd-tile i.fa-file       { color: #999; }
.kv-fwd-tile .kv-fwd-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #fff;
  transition: background .2s;
  line-height: 1;
}
.kv-fwd-tile .kv-fwd-remove:hover {
  background: #c0392b;
}

/* ── Attachment Preview Modal ── */
.kv-att-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.70);
  z-index: 9998;
  backdrop-filter: blur(4px);
  animation: kvAttFadeIn .2s ease;
}
.kv-att-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 9999;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  max-width: 90vw;
  max-height: 90vh;
  min-width: 420px;
  overflow: hidden;
  animation: kvAttSlideIn .25s ease;
}
@keyframes kvAttFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes kvAttSlideIn { from { opacity:0; transform:translate(-50%,-48%); } to { opacity:1; transform:translate(-50%,-50%); } }

.kv-att-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid var(--border2);
  gap: 12px;
}
.kv-att-header .kv-att-file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.kv-att-file-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.kv-att-file-icon.image { background: #e8f5e9; color: #43a047; }
.kv-att-file-icon.video { background: #e3f2fd; color: #1e88e5; }
.kv-att-file-icon.audio { background: #fce4ec; color: #e53935; }
.kv-att-file-icon.pdf   { background: #ffebee; color: #c62828; }
.kv-att-file-icon.other { background: #f3e5f5; color: #8e24aa; }

.kv-att-filename {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--f);
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kv-att-filetype {
  font-size: 10px;
  font-family: var(--f);
  color: var(--t4);
  text-transform: capitalize;
  letter-spacing: .5px;
}
.kv-att-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.kv-att-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--r2);
  font-size: 9px;
  font-family: var(--f);
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.kv-att-btn-dl {
  background: var(--blue-mid);
  color: #fff;
}
.kv-att-btn-dl:hover {
  background: #035eb3;
  color: #fff;
  text-decoration: none;
}
.kv-att-btn-open {
  background: var(--page);
  color: var(--t2);
}
.kv-att-btn-open:hover {
  background: var(--border);
  color: var(--t1);
  text-decoration: none;
}
.kv-att-btn-close {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--t4);
  cursor: pointer;
  transition: all .2s;
  padding: 0;
}
.kv-att-btn-close:hover {
  background: var(--red-bg);
  color: var(--red);
}
.kv-att-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a2e;
  min-height: 300px;
  max-height: 70vh;
}
.kv-att-body img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}
.kv-att-body video {
  max-width: 100%;
  max-height: 70vh;
  outline: none;
}
.kv-att-body iframe {
  width: 100%;
  height: 70vh;
  border: none;
  background: #fff;
}
.kv-att-generic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 40px;
  text-align: center;
  background: var(--page);
  width: 100%;
  height: 100%;
  min-height: 250px;
}
.kv-att-generic-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e8eef5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #7b8fa8;
  margin-bottom: 16px;
}
.kv-att-generic-name {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--f);
  color: var(--t1);
  margin-bottom: 4px;
  word-break: break-all;
}
.kv-att-generic-ext {
  font-size: 10px;
  font-family: var(--f);
  color: var(--t4);
  text-transform: capitalize;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.kv-att-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--t4);
  gap: 12px;
}
.kv-att-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: 50%;
  animation: kvAttSpin .8s linear infinite;
}
@keyframes kvAttSpin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════
   MEDIA INVITE PAGE
   ═══════════════════════════════════════════════ */

/* Send panel (collapsible card) */
.kv-mi-send-panel {
  display: none;
  margin-bottom: 14px;
}
.kv-mi-send-panel.open {
  display: block;
}
.kv-mi-send-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.kv-mi-send-full {
  grid-column: 1 / -1;
}

/* Status badges */
.kv-mi-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--f);
  white-space: nowrap;
}
.kv-mi-badge-sent     { background: #e8f4fd; color: #007bff; }
.kv-mi-badge-opened   { background: #e0f7fa; color: #0097a7; }
.kv-mi-badge-uploaded  { background: #e8f5e9; color: var(--green); }
.kv-mi-badge-live      { background: #fce4ec; color: #dc2626; }
.kv-mi-badge-ended     { background: var(--page); color: var(--t3); }
.kv-mi-badge-expired   { background: var(--page); color: var(--t3); }
.kv-mi-badge-failed    { background: var(--red-bg); color: var(--red); }
.kv-mi-badge-closed    { background: var(--page); color: var(--t3); }

/* Live pulse dot */
@keyframes kvLivePulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.kv-mi-live-dot {
  width: 8px;
  height: 8px;
  background: #dc2626;
  border-radius: 50%;
  display: inline-block;
  animation: kvLivePulse 1.5s infinite;
}

/* Alert messages */
.kv-mi-alert {
  font-size: 9px;
  font-family: var(--f);
  padding: 8px 12px;
  border-radius: var(--r2);
  display: none;
  margin-top: 10px;
}
.kv-mi-alert-error   { color: var(--red); background: var(--red-bg); }
.kv-mi-alert-success { color: var(--green); background: #d4edda; }

/* Hint text under fields */
.kv-mi-hint {
  font-size: 9px;
  font-family: var(--f);
  color: var(--t4);
  margin-top: 3px;
}

/* ── Alert Presets List Page ── */
.kv-ap-triggers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.kv-ap-trigger-item {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  transition: border-color .15s;
}
.kv-ap-trigger-item:hover { border-color: var(--blue); }
.kv-ap-trigger-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page);
  border-radius: 50%;
  font-size: 13px;
  color: var(--navy);
}
.kv-ap-trigger-body { flex: 1 1 200px; min-width: 0; word-break: normal; overflow-wrap: break-word; }
.kv-ap-trigger-title {
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.4;
}
.kv-ap-trigger-desc {
  font-size: 10px;
  color: var(--t3);
  margin-top: 2px;
  line-height: 1.3;
}
.kv-ap-trigger-editable { cursor: pointer; }
.kv-ap-trigger-editable:hover { background: #f0f8ff; }

/* Meta cluster on the right side of a trigger card — shows Event interval +
   Notification indicator when those options are enabled on the trigger. */
.kv-ap-trigger-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  margin-left: auto;
}
.kv-ap-trigger-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}
.kv-ap-trigger-tag i { font-size: 9px; }
.kv-ap-trigger-tag-event {
  background: rgba(34,186,255,.12);
  color: var(--blue);
  border: 1px solid rgba(34,186,255,.25);
}
.kv-ap-trigger-tag-notify {
  background: rgba(16,185,129,.12);
  color: var(--green);
  border: 1px solid rgba(16,185,129,.25);
}
.kv-ap-trigger-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--t4);
  font-size: 12px;
  cursor: pointer;
  border-radius: 50%;
  transition: all .15s;
}
.kv-ap-trigger-remove:hover { background: var(--red-bg); color: var(--red); }

/* Category selection boxes */
.kv-ap-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kv-ap-category-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 80px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: all .15s;
  background: #fff;
}
.kv-ap-category-box:hover { border-color: var(--blue); background: #f0f8ff; }
.kv-ap-category-disabled { opacity: 0.4; pointer-events: none; }
.kv-ap-category-icon { font-size: 20px; color: var(--navy); margin-bottom: 6px; }
.kv-ap-category-text { font-size: 9px; font-weight: 500; color: var(--t2); }

/* Trigger config sections */
.kv-ap-config-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: flex-end;
}
.kv-ap-config-sections > span {
  display: contents;
}
.kv-ap-config-section-head {
  flex-basis: 100%;
  width: 100%;
  padding: 14px 0 8px;
  border-top: 1px solid var(--border2);
}
.kv-ap-config-section-head:first-child { border-top: none; padding-top: 0; }
.kv-ap-config-section-head label {
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  display: block;
}
.kv-ap-config-inline-field {
  width: 160px;
  margin-right: 10px;
  margin-bottom: 8px;
}
.kv-ap-config-inline-field .inp { width: 100%; }
.kv-ap-required::after { content: " *"; color: var(--red); }

/* Activity toggle buttons */
.kv-ap-activity-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.kv-ap-activity-btn { cursor: pointer; }
.kv-ap-activity-btn input { display: none; }
.kv-ap-activity-btn span {
  display: inline-block;
  padding: 6px 14px;
  font-size: 9px;
  font-weight: 500;
  font-family: var(--f);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  color: var(--t2);
  background: #fff;
  transition: all .15s;
}
.kv-ap-activity-btn input:checked + span {
  background: #e0ecff;
  border-color: var(--blue);
  color: var(--navy);
  font-weight: 600;
}
.kv-ap-activity-btn span:hover { background: #f0f4ff; }

/* ── Asset Timeline (modal history) ── */
.kv-ast-timeline-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border2);
}
.kv-ast-timeline-item:last-child { border-bottom: none; }
.kv-ast-timeline-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 4px;
}
.kv-ast-timeline-body { flex: 1; min-width: 0; }

/* ── Shipment Stop Cards (createedit_asset) ── */
.kv-stop-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 12px;
}
.kv-stop-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--page);
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
}

/* Driver Type radio pill buttons */
.kv-driver-type-group {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.kv-driver-type-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
  color: var(--t3);
  font-size: 9px;
  font-weight: 600;
  font-family: var(--f);
  transition: all .12s ease;
  margin: 0;
}
.kv-driver-type-option i {
  font-size: 11px;
  color: var(--t4);
}
.kv-driver-type-option input[type="radio"] {
  display: none;
}
.kv-driver-type-option:hover {
  border-color: var(--blue);
  color: var(--t1);
}
.kv-driver-type-option.selected {
  background: rgba(34,186,255,.08);
  border-color: var(--blue);
  color: var(--blue);
}
.kv-driver-type-option.selected i {
  color: var(--blue);
}
.kv-stop-card-body {
  padding: 14px;
}
.kv-stop-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--f);
}
.kv-stop-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--blue);
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.kv-stop-add-btn:hover {
  border-color: var(--blue);
  background: rgba(34,186,255,.05);
}

/* Full-width field inside kv-edit-grid (spans both columns) */
.kv-edit-field-full { grid-column: 1 / -1; }

/* Shipment Form legacy block REMOVED — see kuvrr-global.css FORM SYSTEM (.kvgl-form-*). */

/* ── Shipment Dashboard (kv-sd-*) ── */
.kv-sd-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.kv-sd-stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  animation: fadeUp .35s ease both;
}
.kv-sd-stat-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.kv-sd-stat-active {
  border-color: var(--blue);
  box-shadow: 0 2px 10px rgba(34,186,255,.18);
}
.kv-sd-stat-label {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-transform: capitalize;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.kv-sd-stat-card canvas { max-height: 160px; }
.kv-sd-stat-value {
  font-family: var(--f);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 6px;
}

/* Status pills for shipment table */
.kv-sd-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}
.kv-sd-status-ready { background: #3498db; }
.kv-sd-status-transit { background: #f39c12; }
.kv-sd-status-done { background: #27ae60; }.kv-sd-status-done { background: #27ae60; }

/* ===== AV Alarm Initiate ===== */
.kv-av-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 768px) {
  .kv-av-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .kv-av-grid { grid-template-columns: 1fr; }
}
.kv-av-card {
  border-radius: 8px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.kv-av-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.kv-av-card:active {
  transform: translateY(0);
}
.kv-av-card.disabled {
  opacity: 0.7;
  cursor: default;
}
.kv-av-card.disabled:hover {
  transform: none;
  box-shadow: none;
}
.kv-av-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.kv-av-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.kv-av-name {
  font-family: var(--f);
  font-size: 14px;
  font-weight: 600;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
.kv-av-message {
  font-family: var(--f);
  font-size: 9px;
  margin-top: 6px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  text-align: center;
  line-height: 1.4;
}
.kv-av-count {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 500;
  color: var(--t3);
}
.kv-av-recent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #EBF8FF;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 14px;
}
.kv-av-recent-label {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 700;
  color: var(--t3);
  text-transform: capitalize;
  letter-spacing: 0.3px;
}
.kv-av-recent-value {
  font-family: var(--f);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
}
.kv-av-recent i {
  color: var(--blue);
  font-size: 13px;
}

/* ── AV Alarm Color Picker & Sample (kv-color-*, kv-av-sample) ── */

.kv-color-picker {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.kv-color-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 9px;
  font-weight: 500;
  font-family: var(--f);
  color: var(--t2);
  cursor: pointer;
  gap: 4px;
}
.kv-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid var(--border);
  transition: border-color .15s ease;
}
.kv-color-option:hover .kv-color-swatch {
  border-color: var(--t1);
}
.kv-av-sample {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--f);
}

/* ---- Closing Messages catalog (/closing-messages/) ---- */
.kv-clm-help {
  font-size: 9px;
  color: var(--t3);
  font-family: var(--f);
  line-height: 1.5;
  max-width: 72%;
}
.kv-clm-help strong { color: var(--t2); }

/* Scroll container keeps the navy header pinned while rows scroll. */
.kv-clm-wrap {
  max-height: calc(100vh - 220px);
  overflow: auto;
}
.kv-clm-table { border-collapse: separate; border-spacing: 0; }
.kv-clm-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
/* Roomier, vertically centered rows. */
.kv-clm-table td {
  vertical-align: middle;
  padding: 10px 12px;
}
.kv-clm-table .kv-edit-input {
  width: 100%;
  font-family: var(--f);
}

/* Message cell: input + optional inline category tag. */
.kv-clm-msg {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kv-clm-msg .clm-text { flex: 1 1 auto; min-width: 120px; }

/* App Closure Message: category cell with a color-coded status dot. */
.kv-aclm-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
}
.kv-aclm-cat .aclm-cat { flex: 1 1 auto; }
.kv-aclm-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9CA3AF;
  box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.18);
}
.kv-aclm-cat[data-cat="standard"] .kv-aclm-dot { background: #10B981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18); }
.kv-aclm-cat[data-cat="Panic"]    .kv-aclm-dot { background: #EF4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18); }
.kv-aclm-cat[data-cat="Other"]    .kv-aclm-dot { background: #6B7280; box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.18); }
.kv-aclm-cat[data-cat="cancel"]   .kv-aclm-dot { background: #F59E0B; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18); }

/* Colors cell: two clickable swatches; hex stays muted until focused. */
.kv-clm-colors {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kv-clm-swatch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.kv-clm-swatch input[type="color"] {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.kv-clm-hex {
  width: 60px;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t3);
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--page);
  transition: all .12s ease;
}
.kv-clm-hex:hover { border-color: var(--border); }
.kv-clm-hex:focus {
  color: var(--t1);
  background: #fff;
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 186, 255, 0.1);
}

/* Larger live preview pill. */
.kv-clm-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  font-family: var(--f);
  max-width: 100%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.kv-clm-preview .kv-clm-preview-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

/* ── Monitoring Performance Dashboard (kv-mpd-*) ── */

.kv-mpd-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10B981; box-shadow: 0 0 8px #10B981;
  animation: kv-mpd-pulse 2s infinite;
}
@keyframes kv-mpd-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.kv-mpd-period-sel {
  background: #fff; border: 1px solid var(--border2, #D1D5DE); border-radius: 5px;
  color: var(--t1); font-family: var(--f); font-size: 9px; font-weight: 500;
  padding: 6px 12px; cursor: pointer; outline: none;
}

/* Multi-select org dropdown */
.kv-mpd-multisel {
  position: relative; display: inline-block;
}
.kv-mpd-multisel-toggle {
  background: #fff; border: 1px solid var(--border2, #D1D5DE); border-radius: 5px;
  color: var(--t1); font-family: var(--f); font-size: 9px; font-weight: 500;
  padding: 0 28px 0 12px; cursor: pointer; white-space: nowrap;
  min-width: 160px; user-select: none; height: 34px; line-height: 34px;
}
.kv-mpd-multisel-toggle i {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 9px; color: var(--t3); transition: transform .2s;
}
.kv-mpd-multisel.open .kv-mpd-multisel-toggle i { transform: translateY(-50%) rotate(180deg); }
.kv-mpd-multisel-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  background: #fff; border: 1px solid var(--border2, #D1D5DE); border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 1060; min-width: 220px; width: 100%;
  max-height: 260px; overflow-y: auto; padding: 4px 0;
}
.kv-mpd-multisel.open .kv-mpd-multisel-menu { display: block; }
.kv-mpd-multisel-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-family: var(--f); font-size: 9px; font-weight: 400; color: var(--t1);
  cursor: pointer; white-space: nowrap; margin: 0;
}
.kv-mpd-multisel-item:hover { background: #F0F7FF; }
.kv-mpd-multisel-item input[type="checkbox"] {
  accent-color: var(--blue-mid, #22BAFF); margin: 0; pointer-events: none;
  width: 14px; height: 14px; min-width: 14px; flex-shrink: 0;
}

/* Segmented pill control used in the filter modal to display (read-only)
   which Event Category applies to the current tab. The active option is
   filled blue; inactive options are muted; whole thing is visually
   non-interactive (cursor: default) since the tab locks the category. */
.kv-segment {
  display: inline-flex;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2px;
  gap: 1px;
  width: fit-content;
}
.kv-segment-opt {
  font-family: var(--f);
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  padding: 5px 11px;
  border-radius: 13px;
  cursor: default;
  user-select: none;
  transition: all .15s;
}
.kv-segment-opt.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 3px rgba(34,186,255,.25);
}

/* Filter-popup scope: make the multi-select fill the .kv-popup-field column
   and match the adjacent text inputs visually. Without this it defaults to
   inline-block with a fixed min-width and looks out of place. */
.kv-popup-field .kv-mpd-multisel { display: block; width: 100%; }
.kv-popup-field .kv-mpd-multisel-toggle {
  display: block; width: 100%; min-width: 0;
  font-size: 9px; font-weight: 400;
}
.kv-popup-field .kv-mpd-multisel-menu { width: 100%; min-width: 0; }
.kv-popup-field .kv-mpd-multisel-item {
  font-family: var(--f); font-size: 9px; font-weight: 400;
  color: var(--t1); letter-spacing: normal; margin: 0;
  line-height: 14px;
}
.kv-popup-field .kv-mpd-multisel-item > span { line-height: 14px; }

/* Dark theme overrides for multi-select */
.kv-mpd-dark .kv-mpd-multisel-toggle {
  background: #12161E; border-color: #252D3D; color: #F0F2F5;
}
.kv-mpd-dark .kv-mpd-multisel-toggle i { color: #6B7A90; }
.kv-mpd-dark .kv-mpd-multisel-menu {
  background: #12161E; border-color: #252D3D; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.kv-mpd-dark .kv-mpd-multisel-item { color: #F0F2F5; }
.kv-mpd-dark .kv-mpd-multisel-item:hover { background: #1A2030; }

/* No data overlay for charts */
.kv-mpd-cc-body { position: relative; }
.kv-mpd-no-data {
  display: none; position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,255,255,.85); border-radius: 0 0 8px 8px; z-index: 2;
  font-family: var(--f); font-size: 12px; font-weight: 500; color: var(--t3, #8896A6);
}
.kv-mpd-no-data i { font-size: 28px; opacity: .35; }
.kv-mpd-no-data.active { display: flex; }
.kv-mpd-dark .kv-mpd-no-data {
  background: rgba(12,21,32,.88); color: #6B7A90;
}

/* Chart Loader */
.kv-mpd-loader {
  display: none; position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255,255,255,.92); border-radius: 0 0 8px 8px; z-index: 3;
  font-family: var(--f); font-size: 9px; font-weight: 500; color: var(--t3, #8896A6);
}
.kv-mpd-loader.active { display: flex; }
.kv-mpd-loader-spinner {
  width: 28px; height: 28px; border: 3px solid rgba(34,186,255,.15);
  border-top-color: #22BAFF; border-radius: 50%;
  animation: kv-mpd-spin .7s linear infinite;
}
@keyframes kv-mpd-spin { to { transform: rotate(360deg); } }
.kv-mpd-dark .kv-mpd-loader {
  background: rgba(12,21,32,.92); color: #6B7A90;
}
.kv-mpd-dark .kv-mpd-loader-spinner {
  border-color: rgba(34,186,255,.12); border-top-color: #22BAFF;
}

/* Dashboard-wide font override — every visible text node inside the
   monitoring dashboard renders in Roboto (var(--f)) without exception.
   Catches any third-party widget (select boxes, native form controls,
   Chart.js HTML legends, etc.) that would otherwise fall back to the
   browser default sans-serif. */
#mpdWrapper,
#mpdWrapper *,
#mpdWrapper input,
#mpdWrapper select,
#mpdWrapper button,
#mpdWrapper textarea {
  font-family: var(--f) !important;
}

/* KPI Strip */
.kv-mpd-kpi-strip {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px;
  padding: 16px 0 0;
  position: relative; z-index: 5;
}
.kv-mpd-kpi {
  background: #fff; border: 1px solid var(--border, #E2E5EC); border-radius: 8px;
  padding: 14px 18px; position: relative;
}
.kv-mpd-kpi .kv-tip-box { z-index: 1100; }
.kv-mpd-kpi-blue   { box-shadow: inset 0 2px 0 0 var(--blue); }
.kv-mpd-kpi-green  { box-shadow: inset 0 2px 0 0 #10B981; }
.kv-mpd-kpi-red    { box-shadow: inset 0 2px 0 0 #EF4444; }
.kv-mpd-kpi-amber  { box-shadow: inset 0 2px 0 0 #F59E0B; }
.kv-mpd-kpi-purple { box-shadow: inset 0 2px 0 0 #8B5CF6; }
.kv-mpd-kpi-cyan   { box-shadow: inset 0 2px 0 0 #06B6D4; }
.kv-mpd-kpi-orange { box-shadow: inset 0 2px 0 0 #F97316; }

.kv-mpd-kpi-label {
  font-family: var(--f); font-size: 10px; font-weight: 600; color: var(--t3);
  letter-spacing: .06em; text-transform: capitalize; margin-bottom: 6px;
  display: flex; align-items: center; gap: 4px;
}
.kv-mpd-kpi-val {
  font-family: var(--f); font-size: 26px; font-weight: 700; line-height: 1;
}
.kv-mpd-kpi-val-blue { color: var(--blue); }
.kv-mpd-kpi-val-green { color: #10B981; }
.kv-mpd-kpi-val-red { color: #EF4444; }
.kv-mpd-kpi-val-amber { color: #F59E0B; }
.kv-mpd-kpi-val-purple { color: #8B5CF6; }
.kv-mpd-kpi-val-cyan { color: #06B6D4; }
.kv-mpd-kpi-val-orange { color: #F97316; }

.kv-mpd-unit {
  font-size: 14px; color: var(--t3); font-weight: 400;
}
.kv-mpd-kpi-sub {
  font-family: var(--f); font-size: 10px; color: var(--t3); margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
}
.kv-mpd-up { color: #10B981; }
.kv-mpd-down { color: #EF4444; }

/* Chart Grid */
.kv-mpd-grid {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 0 0;
}
.kv-mpd-row { display: grid; gap: 12px; }
.kv-mpd-row-2 { grid-template-columns: 1fr 1fr; }
.kv-mpd-row-3 { grid-template-columns: 1fr 1fr 1fr; }

.kv-mpd-chart-card {
  background: #fff; border: 1px solid var(--border, #E2E5EC); border-radius: 8px;
  display: flex; flex-direction: column;
}
.kv-mpd-cc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px; border-bottom: 1px solid var(--border, #E2E5EC); flex-shrink: 0;
}
.kv-mpd-cc-title {
  font-family: var(--f); font-size: 12px; font-weight: 600; color: var(--t1);
  display: flex; align-items: center; gap: 6px;
}
.kv-mpd-cc-num {
  background: var(--blue); color: #fff; font-size: 9px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.kv-mpd-cc-sub {
  font-family: var(--f); font-size: 9px; color: var(--t3); font-weight: 500;
}
.kv-mpd-cc-body {
  padding: 14px 18px; position: relative; height: 260px;
}
.kv-mpd-cc-body canvas {
  width: 100% !important; height: 100% !important; max-height: 260px;
}
.kv-mpd-cc-body.kv-mpd-cc-body-tall {
  height: 420px;
}
.kv-mpd-cc-body.kv-mpd-cc-body-tall canvas {
  max-height: 420px;
}

/* Footer */
.kv-mpd-footer {
  text-align: center; padding: 14px 0 16px; margin-top: 16px;
  font-family: var(--f); font-size: 10px; color: var(--t3);
  background: #F5F5F7; border-top: 1px solid var(--border, #E2E5EC); border-radius: 8px;
}
.kv-mpd-footer-conf {
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: capitalize; margin-bottom: 4px; color: #EF4444;
}
.kv-mpd-footer-legal {
  font-size: 9px; color: var(--t4); line-height: 1.5;
  max-width: 900px; margin: 0 auto; padding: 0 20px;
}
.kv-mpd-footer-copy {
  font-size: 9px; margin-top: 6px; color: var(--t4);
}

/* Theme toggle button */
.kv-mpd-theme-btn {
  background: #fff; border: 1px solid var(--border2, #D1D5DE); border-radius: 5px;
  color: var(--t2); padding: 5px 8px; cursor: pointer; display: flex;
  align-items: center; transition: all .2s; font-size: 14px;
}
.kv-mpd-theme-btn:hover { border-color: var(--blue); color: var(--blue); }

/* Dark theme overrides */
.kv-mpd-dark .kv-mpd-kpi,
.kv-mpd-dark .kv-mpd-chart-card {
  background: #12161E; border-color: #1E2433;
}
.kv-mpd-dark .kv-mpd-kpi-label,
.kv-mpd-dark .kv-mpd-kpi-sub,
.kv-mpd-dark .kv-mpd-cc-sub { color: #6B7A90; }
.kv-mpd-dark .kv-mpd-cc-title { color: #F0F2F5; }
.kv-mpd-dark .kv-mpd-cc-head { border-bottom-color: #1E2433; }
.kv-mpd-dark .kv-mpd-unit { color: #6B7A90; }
.kv-mpd-dark .kv-mpd-footer {
  background: #0C1520; border-top-color: #1E2433; color: #6B7A90;
}
.kv-mpd-dark .kv-mpd-footer-legal,
.kv-mpd-dark .kv-mpd-footer-copy { color: #4A5568; }
.kv-mpd-dark .kv-mpd-period-sel {
  background: #12161E; border-color: #252D3D; color: #F0F2F5;
}
.kv-mpd-dark .kv-mpd-theme-btn {
  background: #12161E; border-color: #252D3D; color: #A8B2C1;
}
.kv-mpd-dark .kv-mpd-theme-btn:hover { border-color: var(--blue); color: var(--blue); }

/* Responsive: stack KPIs and charts on smaller screens */
@media (max-width: 1200px) {
  .kv-mpd-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .kv-mpd-row-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .kv-mpd-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kv-mpd-row-2, .kv-mpd-row-3 { grid-template-columns: 1fr; }
}

/* ===================================================================
   INCIDENT DETAIL PAGE  (body.kv-incident-page)
   =================================================================== */

/* Page-level layout */
body.kv-incident-page {
  font-family: var(--f);
  background: var(--page);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
}
body.kv-incident-page header.user-nav {
  display: none;
}

/* Incident Topbar */
body.kv-incident-page .kv-ip-topbar {
  display: flex;
  align-items: center;
  background: var(--navy);
  height: 42px;
  padding: 0 14px;
  flex-shrink: 0;
}
body.kv-incident-page .kv-ip-tb-brand {
  display: flex;
  align-items: center;
}
body.kv-incident-page .kv-ip-tb-brand img {
  height: 26px;
}
body.kv-incident-page .kv-ip-tb-logo-text {
  color: #fff;
  font-family: var(--f);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  margin-left: 8px;
}
body.kv-incident-page .kv-ip-tb-logo-text:hover {
  opacity: .85;
}
body.kv-incident-page .kv-ip-tb-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* Asset Tracking Event Report modal — draggable + resizable */
.kv-atr-backdrop {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.45);
  z-index: 9998;
}
.kv-modal.kv-atr-modal {
  position: fixed;
  z-index: 9999;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 620px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  /* Once jQuery UI applies inline top/left via draggable, don't keep the
     translateX centering or the element will jump away from the drop point */
}
.kv-modal.kv-atr-modal.ui-draggable-dragging,
.kv-modal.kv-atr-modal[style*="left:"] {
  transform: none;
}
.kv-modal.kv-atr-modal .kv-modal-head {
  cursor: move;
  user-select: none;
}
body.kv-incident-page .kv-ip-tb-org {
  font-family: var(--f);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 12px;
}
body.kv-incident-page .kv-ip-tb-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* User chip dropdown on incident detail top bar */
body.kv-incident-page .kv-ip-user-chip {
  position: relative;
  cursor: pointer;
}
body.kv-incident-page .kv-ip-user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  list-style: none;
  padding: 4px 0;
  margin: 0;
  z-index: 10001;
  font-family: var(--f);
}
body.kv-incident-page .kv-ip-user-menu li {
  margin: 0;
  padding: 0;
}
body.kv-incident-page .kv-ip-user-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease;
}
body.kv-incident-page .kv-ip-user-menu a:hover {
  background: var(--page);
  color: var(--blue);
}
body.kv-incident-page .kv-ip-user-menu a i {
  width: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--t3);
}
body.kv-incident-page .kv-ip-user-menu a:hover i {
  color: var(--blue);
}
body.kv-incident-page .kv-ip-tb-right .user-chip-new {
  border-color: rgba(255,255,255,.2);
}
body.kv-incident-page .kv-ip-tb-right .uname {
  color: #fff;
}
body.kv-incident-page #content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  min-height:unset !important;
}
body.kv-incident-page #shelf { display: none; }
body.kv-incident-page #loadingScreen { display: none !important; }
body.kv-incident-page #incident-detail {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
}
body.kv-incident-page footer#footer { display: none; }

/* Layout root */
.kv-ip-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  height: 100%;
}
/* Override kuvrr.css .incident-detail { padding: 2%; margin-left: 30px; } */
body.kv-incident-page .incident-detail {
  padding: 0 !important;
  margin-left: 0 !important;
  margin: 0 !important;
}
/* Override kuvrr.css .chat-container, .notes-container { margin-top: 12px; } */
body.kv-incident-page .chat-container,
body.kv-incident-page .notes-container {
  margin-top: 0 !important;
}

/* Alert Strip — wraps gracefully on narrow viewports. Each item stacks
   its label above the value (see screenshot reference) so the row can
   still be read when squeezed. */
.kv-ip-strip {
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 6px 14px;
  min-height: 36px;
  row-gap: 6px;
  flex-shrink: 0;
  overflow: visible;
}
.kv-ip-si {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 2px 12px;
  border-right: 1px solid var(--border2);
  font-size: 10px;
  min-width: 0;
  flex-shrink: 0;
}
.kv-ip-si:first-child { padding-left: 0; }
.kv-ip-si:last-of-type { border-right: 0; }
.kv-ip-sl {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  letter-spacing: .04em;
  text-transform: none;
  white-space: nowrap;
}
.kv-ip-sv {
  font-size: 10px;
  font-weight: 600;
  color: var(--t1);
  white-space: nowrap;
}
/* Status pills */
.kv-ip-pil {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
}
.kv-ip-pil::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kv-ip-pil-sos { background: #FEE2E2; color: #B91C1C; }
.kv-ip-pil-sos::before { background: #EF4444; }
.kv-ip-pil-open { background: #FEF3C7; color: #92400E; }
.kv-ip-pil-open::before { background: #F59E0B; }
.kv-ip-pil-closed { background: #F3F4F6; color: var(--t3); }
.kv-ip-pil-closed::before { background: #9CA3AF; }
/* Amber pill used for Asset Tracking type + shipment subtype (Prolonged
   Stop, Temperature, etc.) so tracker events read as a distinct class from
   safety/SOS events which stay red. */
.kv-ip-pil-amber { background: #FEF3C7; color: #92400E; }
.kv-ip-pil-amber::before { background: #F59E0B; }
/* Green "closed" chip with a check icon. Used for the Status pill when the
   event is resolved. Overrides the dot pseudo-element since we render a
   real <i class="fa fa-check"> inside. */
.kv-ip-pil-closed-ok {
  background: #D1FAE5;
  color: #065F46;
  padding: 2px 10px;
}
.kv-ip-pil-closed-ok::before { display: none; }
.kv-ip-pil-closed-ok .fa-check {
  font-size: 8px;
  color: #10B981;
}

/* ---- Time dropdown in strip ---- */
.kv-ip-time-dd {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.kv-ip-time-dd .kv-ip-sv .fa-caret-down {
  font-size: 9px;
  margin-left: 2px;
  color: var(--t3);
}
.kv-time-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 500;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  min-width: 300px;
  padding: 12px 16px;
}
.kv-time-dropdown.open { display: block; }
.kv-td-row {
  padding: 8px 0;
}
.kv-td-row + .kv-td-row {
  border-top: 1px solid var(--border2);
}
.kv-td-lbl {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  color: var(--t4);
  letter-spacing: .04em;
  text-transform: capitalize;
  margin-bottom: 2px;
}
.kv-td-val {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
}
.kv-td-hint {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 400;
  color: var(--blue);
  margin-top: 1px;
}

/* Alert strip right actions — stays pinned to the right when there's room,
   wraps to a new line gracefully when the strip overflows. */
.kv-ip-sa {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
  padding-left: 12px;
}
.kv-ip-aib {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 5px;
  height: 26px;
  background: var(--page);
  border: 1px solid var(--border);
  font-family: var(--f);
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.kv-ip-aib:hover,
.kv-ip-aib.kv-ip-aib-active {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(34,186,255,.04);
}
/* Primary filled variant for the "Close Event View" button in the strip. */
.kv-ip-aib.kv-ip-aib-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.kv-ip-aib.kv-ip-aib-primary:hover {
  background: #4AC8FF;
  border-color: #4AC8FF;
  color: #fff;
}
.kv-ip-dd-wrap {
  position: relative;
}
.kv-ip-dd {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  min-width: 160px;
  z-index: 100;
  padding: 4px 0;
}
.kv-ip-dd-item {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 9px;
  font-weight: 700;
  color: var(--t1);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s;
}
.kv-ip-dd-item:hover {
  background: var(--page);
  color: var(--t1);
  text-decoration: none;
}

/* All modal/popup footers — right-aligned buttons */
body.kv-incident-page .modal-footer,
body.kv-incident-page .kv-sm-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
body.kv-incident-page .popup-form-buttons {
  float: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px;
}
body.kv-incident-page .popup-form-buttons .btn,
body.kv-incident-page .popup-form-buttons .submit {
  float: none !important;
}

/* Action alerts */
body.kv-incident-page .kv-action-alert {
  background: #FEF3C7;
  border-left: 4px solid #F59E0B;
  padding: 8px 14px;
  font-size: 9px;
  color: var(--t1);
  flex-shrink: 0;
}

/* Closed event banner — green confirmation styling */
body.kv-incident-page .kv-action-alert.kv-action-alert-closed {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #D1FAE5;
  border-left: 4px solid #10B981;
  border-radius: 5px;
  padding: 10px 14px;
  margin: 8px 12px;
  color: #065F46;
  font-size: 10px;
  font-weight: 600;
}
body.kv-incident-page .kv-action-alert.kv-action-alert-closed .kv-action-alert-icon {
  color: #059669;
  font-size: 13px;
  flex-shrink: 0;
}
body.kv-incident-page .kv-action-alert.kv-action-alert-closed .kv-action-alert-msg {
  line-height: 1.4;
}

/* Event ended by user — full-width bar between strip and main content */
body.kv-incident-page .kv-ip-ended-alert {
  background: #FEF2F2;
  border-left: 4px solid #EF4444;
  padding: 7px 16px;
  font-size: 9px;
  font-weight: 500;
  color: var(--t1);
  flex-shrink: 0;
}
body.kv-incident-page .kv-ip-ended-alert > i {
  color: #EF4444;
  margin-right: 5px;
}

/* Main scrollable area */
.kv-ip-main {
  overflow-y: auto;
  padding: 6px;
}

/* TOP ROW — 4 columns. Fixed height so all four cards stay aligned; the video
   card uses "ambient mode" (a blurred backdrop of the same video) to fill any
   letterbox, so it never has to grow/shrink to the video's shape. */
.kv-ip-top {
  display: grid;
  grid-template-columns: 4fr 5fr 5fr 6fr;
  gap: 15px;
  /* Fixed height (not min-height) so each card -- including the Chat View -- stays
     bounded and scrolls internally. With min-height a long chat (e.g. a chat-tip
     conversation) grew the whole row instead of scrolling. The asset-tracking
     variant (.kv-ip-top-at) sets its own height and is more specific, so unaffected. */
  height: 405px;
  flex-shrink: 0;
}
/* Asset tracking: 2-column layout — map LEFT, profile RIGHT */
.kv-ip-top.kv-ip-top-at {
  grid-template-columns: 1fr 1fr;
  height: 480px;
}
.kv-ip-top.kv-ip-top-at > .kv-at-profile-card {
  order: 2;
}
.kv-ip-top.kv-ip-top-at > .kv-ip-dark {
  order: 1;
}

/* ── Asset Tracking Profile Card ── */
.kv-at-profile-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kv-at-tabs {
  display: flex;
  gap: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}
/* Bumped to 11px/600 with a 16px icon so the tab strip reads at the same
   weight as the rest of the card (was a noticeably-small 10px / 12px
   icon). Active tab now uses brand blue for both text and underline; the
   underline thickens to 2px to match the reference design. */
.kv-at-tab {
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  font-family: var(--f);
}
.kv-at-tab:hover {
  color: var(--t2);
}
.kv-at-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 700;
}
.kv-at-tab svg {
  width: 16px;
  height: 16px;
  stroke: var(--t3);
  transition: stroke 0.15s;
  margin-right: 0;
  vertical-align: middle;
}
.kv-at-tab:hover svg {
  stroke: var(--t2);
}
.kv-at-tab.active svg {
  stroke: var(--blue);
}
.kv-at-body {
  flex: 1;
  overflow-y: auto;
  background: #fff;
}
.kv-at-panel {
  padding: 14px 16px;
}

/* Emergency Contacts card — tabbed layout in the right-side card on the
   incident detail page. Light-themed (white card body), unlike .kv-at-tabs
   which sit on the dark navy asset-tracking profile strip.
   NOTE: .kv-ip-psap-card has a rule that zeroes margin + padding on every
   direct child div. The selectors below use .kv-ip-psap-card > ... with
   !important to beat that rule for the header / tab strip / body. */

.kv-ip-psap-card > .kv-ec-head {
  padding: 10px 14px 9px !important;
  border-bottom: 1px solid var(--border2);
}
.kv-ec-head .kv-ip-ch-t {
  font-size: 11px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: .02em;
}
.kv-ec-head .kv-ip-chi { font-size: 12px; }

.kv-ip-psap-card > .kv-ec-tabs {
  display: flex;
  gap: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 6px !important;
  flex-wrap: wrap;
}
.kv-ec-tabs {
  display: flex;
  gap: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 6px;
  flex-wrap: wrap;
}
.kv-ec-tab {
  padding: 8px 14px;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 500;
  color: var(--t3);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.kv-ec-tab:hover { color: var(--t1); }
.kv-ec-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 700;
}
.kv-ec-body {
  background: #fff;
}
.kv-ec-panel {
  padding: 12px 14px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}
/* Tables inside any Emergency Contacts tab (PSAP / Org / Personal /
   Carriers & Drivers): fix the layout so columns share the available
   width instead of letting long emails push the last column out of view. */
.kv-ec-panel > .kv-data-table,
.kv-ec-panel .kv-data-table {
  width: 100%;
  table-layout: fixed;
}
.kv-ec-panel .kv-data-table th,
.kv-ec-panel .kv-data-table td {
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: middle;
}
.kv-ec-panel .kv-data-table .kv-call-ico,
.kv-ec-panel .kv-data-table .kv-comm-ico {
  white-space: nowrap;
}
/* Tip section (Category / Message / Media) lives inside the Emergency
   Contacts card but outside .kv-ec-panel, so it needs its own horizontal
   padding to line up with the contact panels instead of sitting flush
   against the card edge. */
/* Tip details panel (shown in the chat-card slot for tip events) */
.kv-ip-tip-details-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
}
/* Chat-tips: the Tip Category row sits ABOVE the conversation, so it must hug its
   content instead of flex:1 -- otherwise it expands to fill half the card and the
   chat starts way down. With this, the chat section (flex:1) fills the rest and the
   conversation begins right under "Tip Category:". */
.kv-ip-tip-details-body.kv-tip-cat-only {
  flex: 0 0 auto;
  overflow: visible;
  padding-bottom: 0;
}
.kv-tip-cat-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.kv-tip-cat-lbl,
.kv-tip-msg-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
}
/* Separate pencil-icon edit button beside the tip category chip */
.kv-tip-cat-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--blue);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.kv-tip-cat-edit:hover {
  border-color: var(--blue);
  background: #F0F7FF;
  color: var(--blue);
}
.kv-tip-msg-lbl {
  display: block;
  margin: 12px 0 6px;
}
.kv-tip-msg-box {
  font-size: 11px;
  color: var(--t1);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 80px;
  background: #fff;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Anonymous tip: centered placeholder in the profile card */
.kv-ip-anon-profile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px 20px;
}
.kv-ip-anon-profile > i {
  font-size: 40px;
  color: var(--t4);
  margin-bottom: 4px;
}
.kv-ip-anon-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--t2);
}
/* Tip media rendered inside the top-left Media panel (#media-container).
   Tip photos use the existing #incident-photos-container; video/audio are
   rendered here because tips have no channel_name to drive the live/recorded
   player. Fills the dark media body, centered, object-fit:contain. */
body.kv-incident-page #media-container .kv-ip-tip-media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: #111;
  padding: 8px;
}
body.kv-incident-page #media-container .kv-ip-tip-media-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Image wrapper + fullscreen button (the <img> has no native fullscreen). */
body.kv-incident-page #media-container .kv-ip-tip-img-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kv-ip-tip-img-fs {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 0.12s ease;
  z-index: 2;
}
.kv-ip-tip-img-fs:hover {
  background: rgba(0, 0, 0, 0.8);
}
.kv-ip-tip-img-fs i {
  color: #fff;
}
/* Fullscreen: black backdrop, and swap the expand icon for a collapse icon
   so the same button exits fullscreen. Separate vendor rules -- a combined
   selector list would be dropped entirely if a browser rejects one pseudo. */
.kv-ip-tip-img-fs .kv-fs-close { display: none; }
.kv-ip-tip-img-wrap:fullscreen { background: #000; }
.kv-ip-tip-img-wrap:-webkit-full-screen { background: #000; }
.kv-ip-tip-img-wrap:fullscreen .kv-fs-open { display: none; }
.kv-ip-tip-img-wrap:-webkit-full-screen .kv-fs-open { display: none; }
.kv-ip-tip-img-wrap:fullscreen .kv-fs-close { display: inline; }
.kv-ip-tip-img-wrap:-webkit-full-screen .kv-fs-close { display: inline; }
/* Video fills the panel width (like the recorded-video player) so its native
   control bar is wide enough for the browser to show the fullscreen button
   instead of collapsing it into the overflow menu for narrow portrait clips. */
body.kv-incident-page #media-container .kv-ip-tip-media-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.kv-ip-tip-media-audio-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.kv-ip-tip-media-audio-icon {
  font-size: 42px;
  color: var(--blue);
  opacity: 0.9;
}
/* Full width so the native control bar has room for the volume slider +
   speaker; at a narrow fixed width the controls overflow/clip on hover. */
.kv-ip-tip-media-audio {
  width: 100%;
  max-width: 100%;
}
/* Tip with no media: gray empty state instead of a confusing black box. */
body.kv-incident-page #media-container .kv-ip-tip-nomedia {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--page);
  text-align: center;
  padding: 20px;
}
.kv-ip-tip-nomedia i {
  font-size: 40px;
  color: var(--t4);
}
.kv-ip-tip-nomedia-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--t2);
}
.kv-ip-tip-nomedia-sub {
  font-size: 10px;
  color: var(--t3);
}
/* Alert Details tab — 3-column layout (Alert Details | Shipment Information |
   Carrier & Cargo). Collapses to 2 columns then 1 at narrower widths so it
   still reads well on smaller screens. */
.kv-at-panel .kv-at-alert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.kv-at-panel .kv-at-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* Section header (ALERT DETAILS / SHIPMENT INFORMATION / CARRIER & CARGO).
   Bumped from 9px to 10px and the leading SVG from 12px to 16px to match
   the reference design -- the smaller numbers made the icon look like a
   tick mark next to the heading rather than a proper section glyph. */
.kv-at-panel .kv-at-col-hdr {
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kv-at-panel .kv-at-col-hdr svg {
  width: 16px;
  height: 16px;
  stroke: var(--blue);
  flex-shrink: 0;
  margin-right: 0;
  vertical-align: middle;
}
.kv-at-panel .kv-at-col-spacer { height: 6px; }
@media (max-width: 1280px) {
  .kv-at-panel .kv-at-alert-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .kv-at-panel .kv-at-alert-grid { grid-template-columns: 1fr; }
}
/* .pf-l / .pf-v aliased to standard .kv-detail-lbl / .kv-detail-val specs
   (9px label/value; label 600 semibold Proper Case, value 500) */
.kv-at-panel .pf-l {
  font-size: 9px;
  font-weight: 600 !important;
  color: var(--t3);
  font-family: var(--f);
  display: inline;
  margin-right: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.kv-at-panel .pf-v {
  font-size: 9px;
  font-weight: 500 !important;
  color: var(--t1) !important;
  font-family: var(--f);
  word-break: break-word;
}
.kv-at-panel .pf-v *,
.kv-at-panel .pf-l * {
  font-weight: inherit !important;
}
/* Reset inline blue color on values — only real links stay blue */
.kv-at-panel .pf-v span {
  color: var(--t1) !important;
}
.kv-at-panel .pf-v a,
.kv-at-panel .pf-v a span,
.kv-at-panel .pf-v [ng-click],
.kv-at-panel .pf-v [style*="underline"] {
  color: var(--blue-mid) !important;
  cursor: pointer;
}
/* Aligned row: label gets fixed width so values line up across rows */
.kv-at-panel .pf-row-aligned {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.kv-at-panel .pf-row-aligned > .pf-l {
  flex: 0 0 70px;
  margin-right: 0;
}
.kv-at-panel .pf-row-aligned > .pf-v {
  flex: 1 1 auto;
  min-width: 0;
}
.pf-cf-icon {
  display: none !important;
}
.kv-at-panel .pf-l:has(.pf-cf-icon) {
  display: inline-flex;
  align-items: center;
}
.kv-at-panel .pf-v {
  font-size: 9px;
  color: var(--t1);
}
.kv-at-panel .pill-s {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}
.kv-at-panel .ps-critical { background: #FEE2E2; color: #991B1B; }
.kv-at-panel .ps-warning  { background: #FEF3C7; color: #92400E; }
.kv-at-panel .ps-info     { background: #E0F2FE; color: #0369A1; }

/* BOTTOM ROW — 2 columns */
.kv-ip-bottom {
  display: grid;
  grid-template-columns: 2.5fr 2fr;
  gap: 15px;
  flex: 1;
  margin-top:15px
}

/* Card base */
.kv-ip-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  animation: fadeUp .3s ease both;
}
.kv-ip-dark {
  background: #0C1520;
  border-color: #0C1520;
}

/* Card header */
.kv-ip-ch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 9px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.kv-ip-dark .kv-ip-ch {
  background: #0C1520;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.kv-ip-ch-t {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: .02em;
}
.kv-ip-dark .kv-ip-ch-t {
  color: rgba(255,255,255,.88);
  letter-spacing: .06em;
}
.kv-ip-chi { color: var(--blue); font-size: 14px; }

/* Map card: override the dark .kv-ip-dark header — header bar is white
   while the card body (map frame) keeps the dark surround. */
.kv-ip-map-card.kv-ip-dark .kv-ip-ch {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 4px 12px;
}
.kv-ip-map-card.kv-ip-dark .kv-ip-ch-t {
  color: var(--t1);
  letter-spacing: .02em;
}
.kv-ip-map-card.kv-ip-dark .kv-ip-chi { color: var(--blue); }

/* Media & Chat card headers were taller than the Live Tracking / Profile
   headers. Shrink them to line up across the top row. Scoped to .kv-ip-top
   so the bottom-row Event Actions header is unaffected, and kept less
   specific than the map override so Live Tracking keeps its own padding. */
.kv-ip-top .kv-ip-ch {
  padding: 4px 12px;
}

/* LIVE pill */
.kv-live-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.35);
  color: #34D399;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: capitalize;
}
.kv-live-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 5px rgba(52,211,153,.8);
  animation: blinkDot 1.5s ease-in-out infinite;
}
@keyframes blinkDot {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.2; transform:scale(.65); }
}
/* REC merged into the LIVE pill (replaces the old separate REC topbar). */
.kv-live-sep {
  width: 1px;
  height: 9px;
  background: rgba(255,255,255,.28);
  margin: 0 3px;
}
.kv-live-rec-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 5px rgba(239,68,68,.85);
  animation: blinkDot 1.5s ease-in-out infinite;
  margin-right: 3px;
}
.kv-live-rec-txt {
  color: #F87171;
  font-weight: 700;
}

/* VIDEO BODY */
/* VIDEO CARD BODY */
.kv-ip-video-body {
  flex: 1;
  background: var(--page);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  min-height: 0;
  overflow: hidden;
  color: var(--t1);
  font-size: 10px;
  padding: 0;
}
/* Dark mode for live stream card */
body.kv-incident-page .kv-ip-dark .kv-ip-video-body {
  background: #111827;
  color: #fff;
}

/* ── Top bar: REC indicator / Closed status ── */
.kv-vid-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  flex-shrink: 0;
}
/* Light mode (non-live) top bar */
.kv-ip-video-body .kv-vid-topbar {
  background: rgba(0,0,0,0.04);
  border-bottom: 1px solid var(--border2);
}
/* Dark mode top bar */
body.kv-incident-page .kv-ip-dark .kv-vid-topbar {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* REC badge */
.kv-vid-rec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}
.kv-vid-rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #EF4444;
  flex-shrink: 0;
  animation: edgePulse 1.2s ease infinite;
}

/* Recorded video: dark body so video is visible on black background */
body.kv-incident-page .kv-ip-card:not(.kv-ip-dark) .kv-ip-video-body {
  background: #111;
}

/* ── Video / stream area fills remaining space ── */
body.kv-incident-page #media-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Span wrapping live player — fills space, nav controls at bottom */
body.kv-incident-page #media-container > span {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: rgba(255,255,255,0.4);
  font-size: 10px;
}

/* Recorded video inside #media-container.
   Fill the entire media box (both dimensions) and use object-fit:contain so the
   WHOLE video is always shown at its native aspect ratio, scaled as large as the
   box allows. Black appears only as the unavoidable letterbox in the one axis
   where the video ratio differs from the box — never a small, margin-bound video.
   (height:auto previously shrank the element, leaving black on all four sides.) */
body.kv-incident-page #media-container video#video-container {
  flex: 1 1 auto;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  object-fit: contain;
  background: #000;
}

/* ============================================================
   AMBIENT MODE — blurred backdrop fills the letterbox (YouTube/Zoom style)
   ------------------------------------------------------------
   incident_detail_v2.controller.js (setupVideoAmbient) injects a <canvas
   class="kv-vid-ambient-cv"> as the first child of #media-container and paints
   a small, downscaled frame of the PLAYING video into it ~30fps. CSS scales
   that canvas up to cover the whole box and blurs it, so the empty space around
   a contained (whole, correct-ratio) video is filled with a soft blurred copy
   of the same footage instead of black. The card keeps its fixed grid size, so
   the layout never shifts — works for portrait, landscape and mid-call rotation,
   for both the recorded <video> and the live Agora stream.
   The card carries .kv-vid-ambient-on while this is active.
   ============================================================ */
body.kv-incident-page #media-container > canvas.kv-vid-ambient-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* zoom the small frame to fill the whole box */
  /* scale(1.12) hides the soft blurred edges; brightness dims it so the real
     video in front stays the focus */
  transform: scale(1.12);
  filter: blur(22px) brightness(0.55) saturate(1.15);
  z-index: 0;
  pointer-events: none;
  opacity: 0;                 /* shown only while a video is actually playing */
  transition: opacity .25s ease;
}
body.kv-incident-page .kv-vid-ambient-on #media-container > canvas.kv-vid-ambient-cv {
  opacity: 1;
}
/* The real video + controls must sit ABOVE the ambient canvas, and their own
   black backgrounds must go transparent so the blurred backdrop shows through
   the letterbox area. */
body.kv-incident-page .kv-vid-ambient-on #media-container > span,
body.kv-incident-page .kv-vid-ambient-on #media-container > #video-container {
  position: relative;
  z-index: 1;
}
body.kv-incident-page .kv-vid-ambient-on #media-container video#video-container,
body.kv-incident-page .kv-vid-ambient-on #media-container #video-container,
body.kv-incident-page .kv-vid-ambient-on #remote-playerlist .player,
body.kv-incident-page .kv-vid-ambient-on #remote-playerlist .agora_video_player {
  background: transparent !important;
}
/* NOTE: the controls (nav.player-btn.kv-vid-controls) are a position:absolute
   overlay (see "Floating overlay" rule below) so they do NOT reduce the video
   height. Do not set position:relative here — that would put them back in flow. */

/* NOTE: "live-grow" (growing the card to match a tall/portrait live stream) was
   removed. The top card row (.kv-ip-top) is a FIXED 405px height so the Chat View
   card scrolls internally; a card in that row can't grow, and an oversized
   #video-container would be clipped by .kv-ip-card{overflow:hidden}, hiding the
   bottom controls. The live stream now fits the fixed box via object-fit:contain
   (ambient blur fills the letterbox), exactly like the recorded <video>. */

/* ── Live stream: fill the card; local preview = small PiP overlay ──
   Agora's emc.css sets .player to a fixed 280×520 and #remote-playerlist
   to top:-155px — we override both so the remote feed fills the available
   space inside our flex card. Local preview becomes a corner PiP. */

/* Prevent emc.css fixed 462px width on #video-container in old layout */
body.kv-incident-page .incident-detail-pane .incident-media #video-container {
  width: 100% !important;
}

/* Pre-stream loading spinner — small, centered overlay. Without this the
   raw loading.gif renders at its native size and dominates the card. */
body.kv-incident-page img#video-loader,
body.kv-incident-page #media-container #video-container > #video-loader {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  background: transparent !important;
}

/* Live #video-container = fills parent, becomes positioning context for
   the remote stream + local PiP overlay */
body.kv-incident-page #media-container #video-container {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #000;
  overflow: hidden;
}
body.kv-incident-page #media-container #video-container > .vjs-default-skin,
body.kv-incident-page #media-container #video-container > .vjs-default-skin > .col {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
}

/* Remote stream fills the container */
body.kv-incident-page #remote-playerlist {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.kv-incident-page #remote-playerlist > [id^="player-wrapper-"] {
  width: 100%;
  height: 100%;
  position: relative;
}
body.kv-incident-page #remote-playerlist .player {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
}
body.kv-incident-page #remote-playerlist .player-name { display: none !important; }
body.kv-incident-page #remote-playerlist .agora_video_player {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Local player = small PiP overlay in top-right */
body.kv-incident-page #video-container #local-player.lp-local-player,
body.kv-incident-page #video-container #local-player-no-bg.no-video-bg {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  width: 110px !important;
  height: 70px !important;
  z-index: 3;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  background: #000;
  overflow: hidden;
}
body.kv-incident-page #video-container #local-player.lp-local-player .agora_video_player {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ── Bottom controls bar ──
   .player-btn starts hidden (emc.css: display:none).
   JS calls $('.player-btn').show() when local track is playing.
   DO NOT set display here — let JS control it.
   Only add visual styling. */
body.kv-incident-page nav.player-btn.kv-vid-controls {
  /* Floating overlay at the bottom of the video (was a solid bar that took
     layout space). Transparent background, faint by default, fully visible
     when the operator hovers the video area. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  padding: 26px 0 14px;
  background: transparent;
  width: 100%;
  z-index: 4;
  opacity: .35;
  transition: opacity .2s ease;
  pointer-events: none;   /* let clicks pass through the transparent area; buttons re-enable below */
}
/* Reveal the controls fully on hover over the video area. */
body.kv-incident-page #media-container:hover nav.player-btn.kv-vid-controls {
  opacity: 1;
}
/* In fullscreen, keep the controls fully visible (no hover needed) — separate
   rules because an unknown :fullscreen / :-webkit-full-screen selector would
   invalidate the whole grouped rule on browsers that don't support it. */
body.kv-incident-page #incident-media-section:fullscreen nav.player-btn.kv-vid-controls {
  opacity: 1;
}
body.kv-incident-page #incident-media-section:-webkit-full-screen nav.player-btn.kv-vid-controls {
  opacity: 1;
}
body.kv-incident-page nav.player-btn.kv-vid-controls ul {
  display: flex;
  gap: 16px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center;
  justify-content: center;
  position: static !important;
  right: auto !important;
}
/* Circular button style — raised specificity so it beats emc.css's
   .player-btn li { display:block; float:left } rule. */
body.kv-incident-page .player-btn.kv-vid-controls li.kv-vid-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  overflow: hidden;
  pointer-events: auto;   /* clickable even though the nav passes events through */
}
body.kv-incident-page .player-btn.kv-vid-controls li.kv-vid-btn:hover {
  background: rgba(0,0,0,0.65);
}
body.kv-incident-page .player-btn.kv-vid-controls li.kv-vid-btn img {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.kv-incident-page .player-btn.kv-vid-controls li.kv-vid-btn i.fa {
  line-height: 1 !important;
  margin: 0 !important;
}
/* Muted state keeps the same grey background — only the icon color
   flips to red (see .muted .fa rule below and the mic-/camera-mute
   PNG assets used by mic-toggle / video-toggle). */
body.kv-incident-page .player-btn.kv-vid-controls li.kv-vid-btn.muted {
  border: none !important;
  background: rgba(0,0,0,0.45) !important;
}
body.kv-incident-page .player-btn.kv-vid-controls li.kv-vid-btn.muted:hover {
  background: rgba(0,0,0,0.65) !important;
}
/* Legacy .kv-vid-btn-end red-fill variant — neutralised to match the
   shared dark style. Kept as a selector so existing markup still works. */
body.kv-incident-page .player-btn.kv-vid-controls li.kv-vid-btn.kv-vid-btn-end {
  background: rgba(0,0,0,0.45) !important;
}
body.kv-incident-page .player-btn.kv-vid-controls li.kv-vid-btn.kv-vid-btn-end:hover {
  background: rgba(0,0,0,0.65) !important;
}

/* Icon colors: blue by default; red when the button is in .muted state.
   Applies to all <i class="fa"> glyphs inside the custom control bar
   (speaker / fullscreen). Mic + camera use PNG assets whose colors are
   baked in (mic.png vs mic-mute.png, camera.png vs camera-mute.png). */
body.kv-incident-page .player-btn.kv-vid-controls li.kv-vid-btn i.fa {
  color: var(--blue) !important;
}
body.kv-incident-page .player-btn.kv-vid-controls li.kv-vid-btn.muted i.fa {
  color: #EF4444 !important;
}
/* Speaker sub-state: when the button is NOT muted, fa-volume-off is hidden
   (blue not shown). When muted, .muted class flips color to red above, and
   the template toggles display between .speaker-on and .speaker-off. */
body.kv-incident-page .player-btn.kv-vid-controls li#speaker-toggle.muted i.speaker-off {
  color: #EF4444 !important;
}

/* ── Hide media title & top-border (legacy) ── */
.kv-ip-media-title { display: none !important; }
.kv-ip-video-body .top-border { display: none !important; }

/* ── Asset tracking table (light card, non-live) ── */
body.kv-incident-page .kv-ip-video-body {
  padding: 0;
}
body.kv-incident-page .kv-ip-video-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  background: white;
  border: 1px solid var(--border);
}
body.kv-incident-page .kv-ip-video-body table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border2);
  border-right: 1px solid var(--border2);
  color: var(--t1);
  font-size: 10px;
  vertical-align: middle;
}
body.kv-incident-page .kv-ip-video-body table td b {
  font-weight: 600;
  color: var(--navy);
}
/* Wrap asset table and AV alert text in padding.
   Exclude #media-container so the live/recorded video fills the card flush
   (otherwise the 6px pad shows as a dark frame around the video in kv-ip-dark mode). */
body.kv-incident-page .kv-ip-video-body .kv-vid-topbar ~ *:not(#media-container) {
  padding: 6px;
}
/* AV alert text */
body.kv-incident-page .kv-ip-video-body #media-container > span > span {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  padding: 8px;
}

/* Media not available empty state */
.kv-ip-no-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--page);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  gap: 8px;
}
.kv-ip-no-media > i {
  font-size: 36px;
  color: var(--t4);
  margin-bottom: 4px;
}
.kv-ip-no-media-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--t1);
}
.kv-ip-no-media-sub {
  font-size: 9px;
  font-weight: 400;
  color: var(--t3);
}

/* CHAT CARD BODY */
.kv-ip-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body.kv-incident-page #incident-chat-section.incident-chat {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* override emc.css absolute positioning */
  position: static !important;
  width: 100% !important;
  left: auto !important;
  margin-top: 0 !important;
}

/* chat-observers now lives inside .kv-ip-ch header — transparent wrapper */
body.kv-incident-page .kv-ip-ch .chat-observers {
  display: contents;
}
/* Panic container: hidden by default, JS sets display:flex to show */
body.kv-incident-page #panic-container {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  color: #DC2626;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 12px;
  padding: 2px 8px;
}
body.kv-incident-page #panic-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #DC2626;
  flex-shrink: 0;
  animation: edgePulse 1s ease infinite;
}

/* Unique detected keywords beside the Chat View label -- flashes like Panic.
   Shown via ng-show, so base display must be visible (ng-hide overrides). */
body.kv-incident-page #keyword-flash-container.kv-kwd-flash {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 700;
  color: #DC2626;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 12px;
  padding: 2px 8px;
  animation: kvKwdFlash 1s ease infinite;
}
body.kv-incident-page #keyword-flash-container .kv-kwd-flash-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #DC2626;
  flex-shrink: 0;
  animation: edgePulse 1s ease infinite;
}
body.kv-incident-page #keyword-flash-container .kv-kwd-flash-list {
  display: block;
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
}
/* Marquee: the track holds two identical copies of the keyword list and
   slides left by exactly half its width, so the loop is seamless. */
body.kv-incident-page #keyword-flash-container .kv-kwd-flash-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: kvKwdMarquee 12s linear infinite;
}
body.kv-incident-page #keyword-flash-container.kv-kwd-flash:hover .kv-kwd-flash-track {
  animation-play-state: paused;
}
body.kv-incident-page #keyword-flash-container .kv-kwd-flash-item {
  white-space: nowrap;
  margin-right: 16px;
}
@keyframes kvKwdMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
body.kv-incident-page #keyword-flash-container .kv-kwd-flash-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  margin-left: 1px;
  border-radius: 99px;
  background: #DC2626;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 14px;
  vertical-align: middle;
}
@keyframes kvKwdFlash {
  0%, 100% { background: #FEF2F2; border-color: #FCA5A5; }
  50%      { background: #FEE2E2; border-color: #F87171; }
}

/* ── Messages scroll area ── */
body.kv-incident-page .chat-container#chat {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px;
  background: #fff;
  height: auto !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: none !important;
  border-radius: 0 !important;
}

/* ── Reset ALL legacy article/message styles from emc.css ── */
body.kv-incident-page .chat-container article,
body.kv-incident-page .chat-container .user-message,
body.kv-incident-page .chat-container .admin-message {
  float: none !important;
  clear: none !important;
  min-width: 0 !important;
  max-width: 85%;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  text-align: left !important;
}

/* Outgoing (Observer/Dispatcher) = RIGHT */
body.kv-incident-page .chat-container .admin-message {
  align-self: flex-end !important;
  align-items: flex-end !important;
}

/* Incoming (App User) = LEFT */
body.kv-incident-page .chat-container .user-message {
  align-self: flex-start !important;
  align-items: flex-start !important;
}

/* Hide legacy <header> and .message elements */
body.kv-incident-page .chat-container header { display: none !important; }
body.kv-incident-page .chat-container > article > .message { display: none !important; }

/* ── Bubble wrapper (kv-chat-bubble) ── */
body.kv-incident-page .kv-chat-bubble {
  max-width: 100%;
  padding: 6px 10px;
}
body.kv-incident-page .admin-message .kv-chat-bubble {
  background: var(--navy);
  border-radius: 8px 8px 2px 8px;
}
body.kv-incident-page .user-message .kv-chat-bubble {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px 8px 8px 2px;
}

/* ── Header inside bubble: name + time ── */
body.kv-incident-page .kv-chat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 1px;
}
body.kv-incident-page .kv-chat-name {
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.kv-incident-page .admin-message .kv-chat-name { color: var(--blue); }
body.kv-incident-page .user-message .kv-chat-name  { color: var(--blue); }

body.kv-incident-page .kv-chat-time {
  font-size: 8.5px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
body.kv-incident-page .admin-message .kv-chat-time { color: rgba(255,255,255,0.5); }
body.kv-incident-page .user-message .kv-chat-time  { color: var(--blue); }

/* ── Message text ── */
body.kv-incident-page .kv-chat-text {
  font-size: 9px;
  line-height: 1.4;
  word-break: break-word;
}
body.kv-incident-page .admin-message .kv-chat-text { color: #fff; }
body.kv-incident-page .user-message .kv-chat-text  { color: var(--t1); }

/* Panic — red bg override */
body.kv-incident-page .kv-chat-text.panic-message {
  background: #DC2626 !important;
  color: #fff !important;
  border-radius: 4px;
  padding: 3px 6px;
  margin: 1px -3px -1px -3px;
}

/* ── Keyword-detected chat message — flashing red content ── */
/* Content flash: pulse the message bubble background red->lighter-red. */
@keyframes kvKwdBlink {
  0%, 100% { background: #DC2626; box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50%      { background: #F87171; box-shadow: 0 0 6px 2px rgba(220,38,38,.55); }
}
/* Icon flash: pulse opacity so the audio icon blinks. */
@keyframes kvKwdIconFlash {
  0%, 100% { opacity: 1; }
  50%      { opacity: .2; }
}
body.kv-incident-page .kv-chat-text.kv-chat-keyword {
  background: #DC2626 !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 4px;
  padding: 3px 6px;
  margin: 1px -3px -1px -3px;
  animation: kvKwdBlink 1s ease-in-out infinite;
}
/* Audio icon in the bubble head (no text label) */
body.kv-incident-page .kv-chat-kwd-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: #DC2626;
  animation: kvKwdIconFlash 1s ease-in-out infinite;
}
body.kv-incident-page .kv-chat-kwd-tag .fa { font-size: 11px; }

/* Attachments inside bubble */
body.kv-incident-page .kv-chat-attach { margin-top: 3px; }
body.kv-incident-page .kv-chat-attach a {
  display: inline-block;
  margin-right: 4px;
  font-size: 9px;
}
body.kv-incident-page .admin-message .kv-chat-attach a { color: rgba(255,255,255,0.7); }
body.kv-incident-page .user-message .kv-chat-attach a  { color: var(--blue); }

/* ── Chat input bar ── */
body.kv-incident-page #chat-form-container {
  flex-shrink: 0;
  border-top: 1px solid var(--border2);
  background: #fff;
  padding: 0;
}
body.kv-incident-page #chat-form-container .chat-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 6px 8px 6px !important;
  margin: 0 !important;
}
/* Row 1: input + SEND button */
body.kv-incident-page #chat-form-container .field.chat-frm-btns {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 4px 0 !important;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
body.kv-incident-page #chat-form-container input[name="message"] {
  flex: 1 !important;
  width: auto !important;
  padding: 6px 10px !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--f) !important;
  font-size: 9px !important;
  color: var(--t1) !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
body.kv-incident-page #chat-form-container input[type="submit"] {
  flex-shrink: 0;
  padding: 6px 14px !important;
  border: none !important;
  border-radius: 0 18px 18px 0 !important;
  background: var(--blue) !important;
  color: #fff !important;
  font-family: var(--f) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
}
body.kv-incident-page #chat-form-container input[type="submit"]:hover {
  opacity: 0.88;
}
/* Row 2: Smart Responses — full-width sky-blue pill */
body.kv-incident-page #chat-form-container a#quick-responses-button.btn {
  display: block !important;
  width: 100% !important;
  padding: 6px 10px !important;
  background: var(--blue) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: 18px !important;
  border: none !important;
  font-family: var(--f) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: capitalize !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  cursor: pointer;
  box-sizing: border-box !important;
}
body.kv-incident-page #chat-form-container a#quick-responses-button.btn::before {
  content: "\26A1 ";
}
body.kv-incident-page #chat-form-container a#quick-responses-button.btn:hover {
  background: #1DA8E9 !important;
}

/* Smart Responses modal */
body.kv-incident-page .kv-sr-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: rgba(0,0,0,.45) !important;
  z-index: 1100 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}
body.kv-incident-page .kv-sr-overlay.active {
  display: flex !important;
}
body.kv-incident-page .kv-sr-modal#quick-responses {
  display: flex !important;
  position: static !important;
  width: 420px !important;
  max-width: 85vw !important;
  max-height: 70vh !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
body.kv-incident-page .kv-sr-modal {
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
}
body.kv-incident-page .kv-sr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
body.kv-incident-page .kv-sr-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
}
body.kv-incident-page .kv-sr-close {
  font-size: 12px;
  color: var(--t3);
  cursor: pointer;
  padding: 2px;
}
body.kv-incident-page .kv-sr-close:hover { color: var(--t1); }
body.kv-incident-page .kv-sr-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px !important;
  margin: 0 !important;
  list-style: none !important;
  overflow-y: auto;
  max-height: none;
}
body.kv-incident-page .kv-sr-list li.half {
  display: inline-flex !important;
  width: calc(50% - 3px) !important;
  border: 1px solid var(--border) !important;
  border-radius: 5px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  background: #F9FAFB;
  transition: all .12s ease;
}
body.kv-incident-page .kv-sr-list li.half:hover {
  background: #EBF8FF !important;
  border-color: var(--blue) !important;
}
body.kv-incident-page .kv-sr-list li.half span {
  display: block;
  padding: 8px 10px !important;
  font-size: 9px !important;
  font-weight: 400;
  color: var(--t1);
  line-height: 1.4;
}

/* No-content placeholder */
.kv-ip-no-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--t4);
  font-size: 9px;
}
.kv-ip-no-content i {
  font-size: 28px;
  opacity: 0.4;
}
.kv-ip-no-content span {
  opacity: 0.6;
}

/* PROFILE CARD */
body.kv-incident-page .kv-ip-card .profile-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
body.kv-incident-page .kv-ip-card .profile-container .tabbable {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
body.kv-incident-page .kv-ip-card .profile-tabs {
  display: flex;
  border-bottom: 2px solid var(--border2);
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
body.kv-incident-page .kv-ip-card .profile-tabs li a {
  display: block;
  padding: 9px 10px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
}
body.kv-incident-page .kv-ip-card .profile-tabs li.active a {
  color: var(--navy);
  border-bottom-color: var(--navy);
  font-weight: 700;
}
body.kv-incident-page .kv-ip-card .profile-photo {
  display: none; /* hide sidebar photo in new layout */
}
body.kv-incident-page .kv-ip-card .tab-content {
  margin-left: 0 !important;
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
}
body.kv-incident-page .kv-ip-card .tab-content .tab-pane {
  font-size: 10px;
  color: var(--t2);
  line-height: 1.6;
}
body.kv-incident-page .profile-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 4px;
}
body.kv-incident-page .profile-organization {
  display: block;
  margin-bottom: 6px;
}
body.kv-incident-page .profile-organization .status-label {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(34,186,255,.08);
  border: 1px solid rgba(34,186,255,.15);
  color: var(--blue);
}
body.kv-incident-page .profile-phonenumber,
body.kv-incident-page .profile-devicetype,
body.kv-incident-page .profile-appversion,
body.kv-incident-page .profile-address-block > div {
  display: block;
  font-size: 10px;
  color: var(--t2);
  line-height: 1.6;
}
body.kv-incident-page .profile-thermal { display: block; font-size: 10px; color: var(--t2); }

/* MAP CARD */
.kv-ip-map-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, #C8E0F0 0%, #A8CCE4 40%, #B8D8EC 100%);
  min-height: 0;
}
.kv-ip-map-body #gps_event_location,
.kv-ip-map-body #alert_location {
  position: absolute;
  inset: 0;
}
.kv-ip-map-body .profile-map-container {
  width: 100%;
  height: 100%;
}
.kv-ip-map-body .profile-map-container #detail-map,
.kv-ip-map-body .profile-map-container > div {
  width: 100% !important;
  height: 100% !important;
}
/* Hide "Report a map error" link */
body.kv-incident-page .kv-ip-map-body .gm-style-cc {
  display: none !important;
}
/* InfoWindow popup styling */
body.kv-incident-page .gm-style .gm-style-iw-c {
  border-radius: 8px !important;
  padding: 10px 6px 8px 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.14) !important;
  max-width: 300px !important;
}
body.kv-incident-page .gm-style .gm-style-iw-d {
  overflow: hidden !important;
  max-height: none !important;
}
body.kv-incident-page .gm-style .gm-style-iw-tc::after {
  background: #fff !important;
}
body.kv-incident-page .gm-style .gm-ui-hover-effect {
  top: 0 !important;
  right: 0 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.04) !important;
  border-radius: 50% !important;
  opacity: .7;
  transition: all .15s ease;
}
body.kv-incident-page .gm-style .gm-ui-hover-effect:hover {
  opacity: 1;
  background: rgba(0,0,0,.08) !important;
}
body.kv-incident-page .gm-style .gm-ui-hover-effect > span {
  margin: 0 !important;
}
body.kv-incident-page .gm-style .gm-ui-hover-effect > img {
  margin: 0 !important;
}
.kv-ip-map-body img#mapLoader,
.kv-ip-map-body img#AlertMapLoader {
  width: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.kv-ip-map-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background: #0C1520;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.kv-ip-mmb {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.35);
  cursor: pointer;
  transition: all .15s;
}
.kv-ip-mmb:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }
.kv-ip-mmb.kv-ip-mmb-on {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(34,186,255,.4);
}
.kv-ip-mmb.kv-ip-mmb-on:hover { background: var(--blue); color: white; }
.kv-ip-mmg {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
}
.kv-ip-mmg:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }

/* Map stats overlay */
.kv-ip-map-stats {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 4px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
  pointer-events: none;
}
.kv-ms-r { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kv-ms-l { font-size: 9px; font-family: var(--f); color: var(--t3); }
.kv-ms-v { font-size: 9px; font-family: var(--f); font-weight: 700; }
.kv-ms-coord { color: var(--t1); }
.kv-ms-acc { color: var(--green, #10B981); }
.kv-ms-upd { color: var(--t2); }

/* Normal mode: hide Map/Satellite toggle and native fullscreen button */
body.kv-incident-page .kv-ip-map-body .gm-style-mtc,
body.kv-incident-page .kv-ip-map-body .gm-fullscreen-control {
  display: none !important;
}
/* Style zoom control buttons */
body.kv-incident-page .kv-ip-map-body .gm-bundled-control button {
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
}

/* Fullscreen mode: show all native Google Maps controls */
body.kv-incident-page .kv-ip-map-body.map-is-fullscreen .gm-style-mtc,
body.kv-incident-page .kv-ip-map-body.map-is-fullscreen .gm-fullscreen-control {
  display: flex !important;
}

/* EVENT RESPONSE CARD — bottom-left */
body.kv-incident-page .kv-ip-card .event-location-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding:0;
  border:0;
}

body.kv-incident-page .kv-ip-card .event-location-container .tabbable {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
body.kv-incident-page .kv-ip-card .event-location-container .profile-tabs {
  display: flex;
  border-bottom: 2px solid var(--border2);
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
body.kv-incident-page .kv-ip-card .event-location-container .profile-tabs li a {
  display: block;
  padding: 9px 12px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
}
body.kv-incident-page .kv-ip-card .event-location-container .profile-tabs li a .kv-tab-unread-star {
  margin-left: 5px;
  font-size: 9px;
  color: #F59E0B;
}
body.kv-incident-page .kv-ip-card .event-location-container .profile-tabs li.active a {
  color: var(--navy);
  border-bottom-color: var(--navy);
  font-weight: 700;
}
body.kv-incident-page .kv-ip-card .tab-content .tab-pane.active { display: block; }
body.kv-incident-page .kv-ip-card .event-location-container .tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  min-height: 0;
}
body.kv-incident-page .kv-ip-card .event-location-container .tab-content > .tab-pane {
  padding: 0;
  font-size: 10px;
}
/* Action response table */
body.kv-incident-page #incident-action-response-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}
body.kv-incident-page #incident-action-response-table thead tr {
  background: var(--navy);
}
body.kv-incident-page #incident-action-response-table thead td {
  padding: 8px;
  color: rgba(255,255,255,.8);
  font-size: 9px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: .04em;
}
body.kv-incident-page #incident-action-response-table tbody tr:nth-child(odd) td { background: #fff; }
body.kv-incident-page #incident-action-response-table tbody tr:nth-child(even) td { background: #EBF8FF; }
body.kv-incident-page #incident-action-response-table tbody tr:hover td { background: #CCF0FF !important; }
body.kv-incident-page #incident-action-response-table tbody td { padding: 7px 8px; border-bottom: 1px solid var(--border2); font-size: 10px; }

/* Notes fix */
body.kv-incident-page .notes-form .submit-field {
  position: static !important;
  width: auto !important;
  display: inline-block;
  margin-top: 6px;
}
body.kv-incident-page .notes-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--navy);
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 6px;
}
body.kv-incident-page .notes-container {
  font-size: 10px;
  color: var(--t2);
  max-height: 150px;
  overflow-y: auto;
  margin-bottom: 6px;
}
body.kv-incident-page .notes-form textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
  font-family: var(--f);
  font-size: 10px;
}

/* PSAP / right card */
.kv-ip-psap-card {
  overflow-y: auto !important;
  font-size: 10px;
  color: var(--t2);
  display: flex;
  flex-direction: column;

}
/* Remove default margins from wrapper divs so gap is controlled entirely by flex gap */
.kv-ip-psap-card > div {
  margin: 0 !important;
  padding: 0 !important;
}

/* Collapsible sections — list-item style inside the card */
.kv-ip-sec {
  border: 1px solid var(--border2);
  overflow: hidden;
  margin: 0;
}
.kv-ip-sec:last-of-type { margin-bottom: 0; }
.kv-ip-sec-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.kv-ip-sec-hd:hover { background: #f8fafc; }
.kv-ip-sec-ht {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.kv-ip-sec-ht i { color: var(--blue); font-size: 9px; }
.kv-ip-sec-arr {
  font-size: 10px;
  color: var(--t3);
  flex-shrink: 0;
}
.kv-ip-sec-bd {
  background: #fff;
  border-top: 1px solid var(--border2);
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}
.kv-ip-sec-loading, .kv-ip-sec-empty {
  padding: 10px 14px;
  font-size: 10px;
  color: var(--t3);
  font-style: italic;
}

/* Data table inside right-card sections — locked to design spec:
   header 9px/600 white 95% on navy with 9px 11px padding,
   body cells 9px/400 navy (#213142) on alternating bg with 8px 11px padding.
   Roboto family enforced explicitly (var(--f)) so nothing higher up the
   cascade can swap it for Inter/system fonts. */
.kv-ip-psap-card .kv-data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f);
  font-size: 9px;
}
.kv-ip-psap-card .kv-data-table thead tr { background: var(--navy); }
.kv-ip-psap-card .kv-data-table thead th {
  padding: 9px 11px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,.95);
  letter-spacing: .055em;
  text-transform: capitalize;
  white-space: nowrap;
}
.kv-ip-psap-card .kv-data-table tbody tr:nth-child(odd) td { background: #fff; }
.kv-ip-psap-card .kv-data-table tbody tr:nth-child(even) td { background: #EBF8FF; }
.kv-ip-psap-card .kv-data-table tbody tr:hover td { background: #CCF0FF; }
.kv-ip-psap-card .kv-data-table tbody td {
  padding: 8px 11px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 400;
  color: var(--navy);
  border-bottom: 1px solid var(--border2);
  vertical-align: middle;
}
.kv-ip-psap-card .kv-data-table tbody tr:last-child td { border-bottom: none; }
.kv-ip-psap-card .kv-data-table tbody tr:last-child td:first-child { border-radius: 0 0 0 6px; }
.kv-ip-psap-card .kv-data-table tbody tr:last-child td:last-child  { border-radius: 0 0 6px 0; }

/* ============================================================
   PROFILE CARD — kv-pf-* classes (new design)
   ============================================================ */

/* Card wrapper — fills available space in bottom-right cell */
body.kv-incident-page .kv-pf-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* profile-container fills remaining card height */
body.kv-incident-page .kv-pf-card .profile-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ---- Tab bar ---- */
body.kv-incident-page .kv-pf-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  border-bottom: 1px solid var(--border2) !important;
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
  background: #fff;
}

body.kv-incident-page .kv-pf-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 500;
  color: var(--t3);
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
body.kv-incident-page .kv-pf-tab i {
  color: var(--blue);
  font-size: 10px;
}

body.kv-incident-page .kv-pf-tab:hover {
  color: var(--navy);
  text-decoration: none;
}

body.kv-incident-page .kv-pf-tab.active {
  color: var(--navy) !important;
  border-bottom-color: var(--blue) !important;
  font-weight: 600 !important;
}
body.kv-incident-page .kv-pf-tab.active i {
  color: var(--blue);
}

/* ---- Header (avatar + name + org) ---- */
body.kv-incident-page .kv-pf-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
  background: #fff;
}

/* Avatar circle */
body.kv-incident-page .kv-pf-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(34,186,255,.12);
  display: flex !important;
  align-items: center;
  justify-content: center;
}

body.kv-incident-page .kv-pf-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

body.kv-incident-page .kv-pf-initials {
  font-family: var(--f);
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  text-transform: capitalize;
  letter-spacing: .02em;
  line-height: 1;
}

/* Identity block */
body.kv-incident-page .kv-pf-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.kv-incident-page .kv-pf-name {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}

body.kv-incident-page .kv-pf-gm-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: #FEF9C3;
  border: 1px solid #FDE047;
  color: #854D0E;
  vertical-align: middle;
  line-height: 1.4;
}

body.kv-incident-page .kv-pf-org {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--f);
  font-size: 8.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(34,186,255,.08);
  border: 1px solid rgba(34,186,255,.25);
  color: var(--blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---- Tab content body ---- */
body.kv-incident-page .kv-pf-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  background: #fff;
  padding: 0 !important; /* cancel legacy .kv-ip-card .tab-content { padding: 8px 12px } */
}

body.kv-incident-page .kv-pf-pane {
  display: none;
  padding: 0 10px;
}

body.kv-incident-page .kv-pf-pane.active {
  display: block;
}

/* ---- Label : Value rows ---- */
body.kv-incident-page .kv-pf-section-title {
  font-family: var(--f);
  font-size: 10px !important;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--t1) !important;
  padding: 8px 0 2px;
  margin-bottom: 0;
  border-top: 1px solid var(--border2);
}

body.kv-incident-page .kv-pf-section-title:first-child {
  padding-top: 4px;
  border-top: none;
}

body.kv-incident-page .kv-pf-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 0;
  min-height: 18px;
}

body.kv-incident-page .kv-pf-row:last-child {
  border-bottom: none;
}

body.kv-incident-page .kv-pf-lbl {
  flex: 0 0 auto;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 500;
  color: var(--t3);
  text-align: left;
  white-space: nowrap;
}

body.kv-incident-page .kv-pf-val {
  flex: 1;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 500;
  color: var(--t1);
  word-break: break-word;
}

body.kv-incident-page .kv-pf-val a {
  color: var(--blue-mid);
  font-weight: 600;
  text-decoration: none;
}

body.kv-incident-page .kv-pf-val a:hover {
  text-decoration: underline;
}

/* Inline "Make a Call" icon button next to mobile numbers.
   Used across the incident page — profile card, shipment info,
   PSAP / emergency / org / carrier contact tables, Live Call History,
   Call Invite History. */
.kv-call-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 99px;
  background: var(--blue);
  color: #fff !important;
  font-size: 9px;
  line-height: 1;
  text-decoration: none !important;
  border: 1px solid var(--blue);
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.12s ease;
  box-shadow: 0 1px 2px rgba(34, 186, 255, 0.25);
}
.kv-call-ico:hover {
  background: #4AC8FF;
  border-color: #4AC8FF;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(34, 186, 255, 0.35);
  transform: translateY(-1px);
}
.kv-call-ico i.fa-phone,
.kv-call-ico i {
  font-size: 9px !important;
  color: #fff !important;
  line-height: 1;
}

/* Inline "Send Communication" icon button next to contact emails.
   Sits in the email column of the Org / Personal / Carrier-Driver
   contact tables and opens the Send Communication popup with the
   contact pre-selected as a recipient. */
.kv-comm-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 99px;
  background: var(--blue);
  color: #fff !important;
  font-size: 9px;
  line-height: 1;
  text-decoration: none !important;
  border: 1px solid var(--blue);
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.12s ease;
  box-shadow: 0 1px 2px rgba(34, 186, 255, 0.25);
}
.kv-comm-ico:hover {
  background: #4AC8FF;
  border-color: #4AC8FF;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(34, 186, 255, 0.35);
  transform: translateY(-1px);
}
.kv-comm-ico i.fa-envelope,
.kv-comm-ico i {
  font-size: 9px !important;
  color: #fff !important;
  line-height: 1;
}

/* Safe word — red bold */
body.kv-incident-page .kv-pf-safeword {
  color: var(--red) !important;
  font-weight: 600 !important;
}

/* Override legacy photo hiding — new layout shows kv-pf-avatar instead */
body.kv-incident-page .kv-pf-card .profile-photo {
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: rgba(34,186,255,.12) !important;
  flex-shrink: 0 !important;
  float: none !important;
  margin: 0 !important;
}

/* Override legacy margins from old profile layout */
body.kv-incident-page .kv-pf-card .profile-name { display: none; }
body.kv-incident-page .kv-pf-card .profile-phonenumber,
body.kv-incident-page .kv-pf-card .profile-devicetype,
body.kv-incident-page .kv-pf-card .profile-appversion { display: none !important; }
body.kv-incident-page .kv-pf-card .profile-address-block {
  margin-left: 0 !important;
  float: none !important;
}

/* Horizontal lat/lng row */
body.kv-incident-page .kv-pf-latlng-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
  flex-wrap: wrap;
}

/* Address line below lat/lng — blue */
body.kv-incident-page .kv-pf-addr-val {
  display: block;
  font-size: 10px !important;
  color: var(--blue) !important;
  font-weight: 500;
  padding: 2px 0;
  line-height: 1.4;
}
body.kv-incident-page .kv-pf-addr-val:empty { display: none; }
body.kv-incident-page .kv-pf-addr-val span,
body.kv-incident-page .kv-pf-addr-val .profile-address,
body.kv-incident-page .kv-pf-addr-val .profile-city { color: var(--blue) !important; font-size: 10px !important; }

/* Fetch address button */
body.kv-incident-page .kv-pf-addr-fetch { padding: 3px 0; }
body.kv-incident-page .kv-fetch-addr-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 600; color: var(--blue);
  cursor: pointer; transition: all .15s ease;
}
body.kv-incident-page .kv-fetch-addr-btn:hover { color: #4AC8FF; text-decoration: underline; }
body.kv-incident-page .kv-fetch-addr-btn .fa-map-marker { font-size: 11px; }

/* ── Map marker popup (LocationDetailOverlay) ── */
body.kv-incident-page .kv-loc-overlay { z-index: 999; }
body.kv-incident-page .kv-loc-popup {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px 10px;
  min-width: 210px;
  max-width: 280px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  font-family: var(--f); font-size: 11px; color: var(--t1);
}
body.kv-incident-page .kv-loc-popup::after {
  content: "";
  position: absolute; bottom: -9px; left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.12));
}
body.kv-incident-page .kv-loc-close {
  position: absolute; right: 8px; top: 8px;
  font-size: 13px; color: var(--t4); cursor: pointer;
  transition: color .12s ease;
}
body.kv-incident-page .kv-loc-close:hover { color: #EF4444; }
body.kv-incident-page .kv-loc-row {
  font-size: 11px; line-height: 1.5; font-weight: 500;
}
body.kv-incident-page .kv-loc-latlng-wrap {
  display: flex; align-items: center; gap: 8px;
}
body.kv-incident-page .kv-loc-fetch-icon {
  display: block; width: 22px; height: 22px;
  cursor: pointer;
  background: url(../img/kuvrr/map-marker.svg) center/contain no-repeat;
  flex-shrink: 0; transition: opacity .15s ease;
}
body.kv-incident-page .kv-loc-fetch-icon:hover { opacity: .7; }
body.kv-incident-page .kv-loc-fetch-icon.kv-loc-fetching {
  animation: kv-spin .8s linear infinite;
}
@keyframes kv-spin { to { transform: rotate(360deg); } }
body.kv-incident-page .kv-loc-address {
  margin-top: 4px; font-size: 10px; color: var(--blue);
  font-weight: 500; line-height: 1.4;
}
body.kv-incident-page .kv-loc-address:empty { display: none; }
body.kv-incident-page .kv-loc-nav {
  display: flex; justify-content: space-between;
  margin-top: 6px;
}
body.kv-incident-page .kv-loc-nav a {
  font-size: 20px; color: var(--blue); cursor: pointer;
  transition: color .12s ease;
}
body.kv-incident-page .kv-loc-nav a:hover { color: #4AC8FF; }

/* Map icon inside latlng row */
body.kv-incident-page .kv-pf-latlng-row .map-icon {
  margin-left: auto;
  cursor: pointer;
  font-size: 14px;
  color: var(--blue);
  opacity: .7;
}
body.kv-incident-page .kv-pf-latlng-row .map-icon:hover { opacity: 1; }

/* Tab active state must override Bootstrap default (display:none on .tab-pane) */
body.kv-incident-page .kv-pf-body .tab-pane { display: none; }
body.kv-incident-page .kv-pf-body .tab-pane.active { display: block; }
.profile-container, .profile-container .tab-content{
    margin:0 !important;
    padding:0 !important;
}
.profile-map-container{
 margin-bottom:0 !important;
 margin-top:0 !important;
}
#incident-jurisdiction-detail .kv-ip-sec{
        border-radius: 5px 5px 0 0;
}

body.kv-incident-page .kv-ip-psap-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.04);
}

/* ---- Redesigned Event Notes ---- */
body.kv-incident-page .kv-notes-section {
  border-top: 1px solid var(--border2);
  padding: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
body.kv-incident-page .kv-notes-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t1);
  padding: 10px 14px 8px;
}
body.kv-incident-page .kv-notes-count {
  background: var(--border2);
  color: var(--t3);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
}
/* Notes table — force fixed layout so it respects container width */
body.kv-incident-page .kv-notes-section .kv-ip-sec,
body.kv-incident-page .kv-notes-section .kv-ip-sec-bd {
  max-width: 100%;
  box-sizing: border-box;
}
body.kv-incident-page .kv-notes-section .kv-data-table {
  table-layout: fixed;
  max-width: 100%;
}
body.kv-incident-page .kv-notes-section .kv-data-table td {
  word-break: break-word;
  overflow-wrap: break-word;
}
body.kv-incident-page .kv-notes-empty {
  font-family: var(--f);
  font-size: 10px;
  color: var(--t4);
  text-align: center;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
body.kv-incident-page .kv-notes-empty i {
  font-size: 20px;
  color: var(--border2);
}
body.kv-incident-page .kv-notes-form {
  padding: 6px 14px 10px;
}
body.kv-incident-page .kv-notes-form textarea {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
  font-family: var(--f);
  font-size: 10px;
  color: var(--t1);
  box-sizing: border-box;
  margin-bottom: 6px;
}
body.kv-incident-page .kv-notes-form textarea:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(34,186,255,.1);
}
/* Close Event View — full-width blue pill */
body.kv-incident-page .kv-close-view-btn {
  display: block;
  width: 100%;
  padding: 10px 20px;
  margin: 14px 0 16px;
  background: #00b2fecf;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: capitalize;
  text-align: center;
  cursor: pointer;
  transition: background .15s;
}
body.kv-incident-page .kv-close-view-btn:hover {
  background: #2a4258;
}

/* ---- EVENT ACTIONS CARD — form + log heading ---- */
body.kv-incident-page .kv-ea-form,body.kv-incident-page .pd1 {
  padding: 10px 14px 6px;
}
body.kv-incident-page .kv-ea-form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  align-items: center;
}
body.kv-incident-page .kv-ea-form-field {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.kv-incident-page .kv-ea-form-field.kv-ea-field-col {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
body.kv-incident-page .kv-ea-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--t2);
  font-family: var(--f);
  white-space: nowrap;
  flex-shrink: 0;
}
body.kv-incident-page .kv-ea-select {
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  font-size: 9px;
  font-family: var(--f);
  color: var(--t1);
  padding: 0 8px;
  flex: 1;
  min-width: 0;
}
/* Template Message: label + select share one row; the select is capped under
   40% of the form (per design) instead of flex-filling the row. */
body.kv-incident-page .kv-ea-select.kv-ea-select-narrow {
  flex: 0 0 38%;
  width: 38%;
  max-width: 38%;
}
body.kv-incident-page .kv-ea-textarea {
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 9px;
  font-family: var(--f);
  resize: vertical;
  padding: 6px 8px;
  width: 100%;
  box-sizing: border-box;
  color: var(--t1);
}
body.kv-incident-page .kv-ea-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 0 2px;
}
/* ---- Unified button style for incident page ---- */
body.kv-incident-page .kv-btn,
body.kv-incident-page .kv-ea-form-actions button,
body.kv-incident-page .kv-notes-form button,
body.kv-incident-page .notes-form .submit-field button,
body.kv-incident-page .notes-form .submit-field input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 7px 18px !important;
  border: none !important;
  border-radius: 5px !important;
  background: var(--blue) !important;
  color: #fff !important;
  font-family: var(--f) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: capitalize !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .15s !important;
}
body.kv-incident-page .kv-btn:hover,
body.kv-incident-page .kv-ea-form-actions button:hover,
body.kv-incident-page .kv-notes-form button:hover,
body.kv-incident-page .notes-form .submit-field button:hover {
  background: #1DA8E9 !important;
}
body.kv-incident-page .kv-btn:disabled,
body.kv-incident-page .kv-btn[disabled],
body.kv-incident-page .kv-btn:disabled:hover,
body.kv-incident-page .kv-btn[disabled]:hover {
  background: #C4C9D4 !important;
  color: #fff !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}
body.kv-incident-page .kv-ea-share-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.kv-incident-page .kv-ea-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid var(--border);
  color: var(--blue-mid);
  font-size: 13px;
  text-decoration: none;
  background: #fff;
  transition: background .15s, border-color .15s;
}
body.kv-incident-page .kv-ea-icon-btn:hover {
  background: #EBF8FF;
  border-color: var(--blue);
}
/* Header action buttons (share, call, video, chat) */
body.kv-incident-page .kv-ea-hdr-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Soft-blue tinted icon button. Default state is the pastel-blue tile with
   a blue glyph; hover swaps to the brand blue with a white glyph (matches
   the kv-action-icons treatment used elsewhere on the list pages). */
body.kv-incident-page .kv-ea-hdr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--blue);
  font-size: 13px;
  text-decoration: none;
  background: #E6F4FB;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.kv-incident-page .kv-ea-hdr-btn:hover,
body.kv-incident-page .kv-ea-hdr-btn:focus {
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  outline: none;
  box-shadow: 0 4px 10px rgba(34, 186, 255, .28);
}
body.kv-incident-page .kv-ea-hdr-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(34, 186, 255, .25);
}
/* Styled tooltip rendered from `data-tooltip` so the labels look
   consistent (dark pill, centered under the button) rather than relying
   on the browser's default `title` rendering. The native `title=` is
   kept on the markup as an a11y fallback. */
body.kv-incident-page .kv-ea-hdr-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  background: #1F2937;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 5px 9px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
body.kv-incident-page .kv-ea-hdr-btn[data-tooltip]:hover::after,
body.kv-incident-page .kv-ea-hdr-btn[data-tooltip]:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Event log section heading */
body.kv-incident-page .kv-ea-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--t1);
  text-transform: none;
  letter-spacing: normal;
  padding: 10px 14px 8px;
  margin-top: 4px;
}
body.kv-incident-page .kv-ea-log-head .kv-ea-log-title {
  display: flex;
  align-items: center;
  gap: 5px;
}
body.kv-incident-page .kv-ea-log-export {
  display: flex;
  align-items: center;
  gap: 4px;
}
body.kv-incident-page .kv-ea-log-export .kv-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border-radius: 5px;
  border: none;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: background .15s, box-shadow .15s, opacity .15s;
}
body.kv-incident-page .kv-export-pdf {
  background: #EF4444;
  color: #fff;
}
body.kv-incident-page .kv-export-pdf:hover {
  background: #DC2626;
  color: #fff;
  box-shadow: 0 2px 6px rgba(239,68,68,.3);
}
body.kv-incident-page .kv-export-xls {
  background: #10B981;
  color: #fff;
}
body.kv-incident-page .kv-export-xls:hover {
  background: #059669;
  color: #fff;
  box-shadow: 0 2px 6px rgba(16,185,129,.3);
}
body.kv-incident-page .kv-export-btn.kv-export-disabled {
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
}
#share-link {
background: none !important;
}
body.kv-incident-page .nav-tabs > li.active > a{
    border: 0px;
}
.hr {
border-top:1px solid var(--border2);
}

/* ===================================================================
   COMMUNICATION TAB — Incident Detail
   =================================================================== */
#thread-items-container { padding:10px; }

.comm-list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 5px;
  margin-bottom: 20px;
}
.comm-list-card .card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: #f7f7f7;
  border-bottom: 1px solid rgba(0,0,0,.125);
  font-size: 15px;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comm-list-card .card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

/* Communication Tabs */
.comm-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e0e0e0;
}
.comm-tabs .comm-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.comm-tabs .comm-tab:hover { color: var(--t2); text-decoration: none; }
.comm-tabs .comm-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.comm-tabs .comm-tab i { font-size: 10px; }

/* Filter Grid */
#comm_filter { background: #fff; padding: 0; margin-bottom: 20px; }
#comm_filter .comm-list-card { margin-bottom: 20px; }
#comm_filter .comm-list-card .card-header {
  padding: 8px 14px;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
  background: var(--page);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border);
  border-radius: 5px 5px 0 0;
}
#comm_filter .comm-list-card .card-header .fa,
#comm_filter .comm-list-card .card-header svg { font-size: 11px; color: var(--t3); }
#comm_filter .comm-list-card .card-body { padding: 14px; }
#comm_filter .filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 16px;
  align-items: end;
}
#comm_filter .filter-field { min-width: 0; max-width: 100%; }
#comm_filter .filter-field label {
  font-family: var(--f);
  font-weight: 600;
  font-size: 9px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  display: block;
}
#comm_filter .filter-field input[type="text"],
#comm_filter .filter-field input[type="date"],
#comm_filter .filter-field select {
  width: 100%;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--f);
  font-size: 9px;
  color: var(--t1);
  background-color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  height: 28px;
  box-sizing: border-box;
  min-width: unset !important;
}
#comm_filter .filter-field input::placeholder { color: #C4C9D4; }
#comm_filter .filter-field input:focus,
#comm_filter .filter-field select:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,186,255,0.1);
}
#comm_filter .kv-btn {
  padding: 6px 18px;
  font-size: 9px;
  font-weight: 700;
  height: 28px;
  justify-self: start;
  width: auto;
  min-width: 90px;
}

/* Communication Card List */
.comm-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.15s;
}
.comm-card:hover { background: #f8fbfe; }
.comm-card.unread { background: #f0f8ff; }
.comm-card.unread:hover { background: #e4f0fa; }

.comm-card-node {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  margin-top: 2px;
}
.comm-card-node.sent { background: var(--blue); }
.comm-card-node.received { background: #27ae60; }

.comm-card-body { flex: 1; min-width: 0; }
.comm-card-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.comm-card-subject {
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.comm-card.unread .comm-card-subject { font-weight: 700; }
.comm-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.comm-card-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
/* Per-card reply/forward arrows -- same soft-blue tile treatment as the
   Event Actions header buttons, just slightly smaller because they sit
   inside the comm card's compact row. Hover swaps to solid blue +
   white glyph; tooltip uses the native title= since each card may have
   many of these and the styled pill would clip the comm-card row. */
.comm-card-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: #E6F4FB;
  color: var(--blue);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.comm-card-actions a:hover,
.comm-card-actions a:focus {
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  outline: none;
  box-shadow: 0 4px 10px rgba(34, 186, 255, .28);
}
.comm-card-actions a:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(34, 186, 255, .25);
}
.comm-card-actions a i { font-size: 11px; }

.comm-card-row-bottom { display: flex; align-items: center; }
.comm-card-meta {
  font-family: var(--f);
  font-size: 9px;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comm-card-meta i { font-size: 9px; color: #aaa; }

.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  margin-right: 6px;
  vertical-align: middle;
}

/* Empty state */
.empty-comm-state {
  text-align: center;
  padding: 10px 16px;
  color: var(--t4);
  font-family: var(--f);
  font-size: 9px;
}
.empty-comm-state .fa {
  font-size: 26px !important;
  margin-bottom: 8px !important;
  color: var(--t4);
}
.empty-comm-state p { font-size: 9px; color: var(--t3); margin: 0; }

/* Pagination */
#comm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
#comm-pagination button {
  padding: 6px 12px;
  border: 1px solid #dee2e6;
  background: white;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
}
#comm-pagination button:hover:not(:disabled) { background: var(--blue); color: white; border-color: var(--blue); }
#comm-pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
#comm-pagination #comm-page-info { padding: 0 12px; font-family: var(--f); font-size: 9px; color: var(--t3); }

/* Communication Detail View */
.comm-main-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  margin-bottom: 8px;
  overflow: hidden;
}

/* ── Communication detail page header (title icon + subject, attachments strip) ──
   The dark .comm-toolbar block below is legacy; new markup uses .kvgl-page-header
   with an inline icon + subject title, and a light attachments strip only when
   the comm has attached files. */
.kv-comm-ph-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  color: #fff;
  background: var(--t3);
}
.kv-comm-ph-icon.sent     { background: var(--blue); }
.kv-comm-ph-icon.received { background: var(--green); }
.kv-comm-ph-icon.replied  { background: var(--amber); }

.kv-comm-ph-subject {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.2;
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.kv-comm-attachments-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--page);
  border-bottom: 1px solid var(--border);
}
.kv-comm-attachments-bar .kv-comm-attachments-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.kv-comm-attachments-bar .kv-comm-attachments-label .fa { margin-right: 4px; }
.kv-comm-attachments-bar .comm-subject-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

/* Toolbar (dark header bar) */
.comm-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: none;
  min-height: 38px;
  background: #1e293b;
}
.comm-toolbar-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #94a3b8;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 4px 8px 4px 4px;
  border-radius: 5px;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.comm-toolbar-back:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  text-decoration: none;
}
.comm-toolbar-back i { font-size: 10px; }
.comm-toolbar-sep {
  width: 1px;
  height: 20px;
  background: #334155;
  flex-shrink: 0;
}
.comm-toolbar-subject {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.comm-toolbar-subject h3 {
  margin: 0;
  font-family: var(--f);
  font-size: 10px;
  font-weight: 700;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
  cursor: default;
}
.comm-subject-attachments {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  margin-left: 0;
}
.comm-subject-attachments .att-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.comm-subject-attachments .att-inline-icon:hover {
  background: rgba(255,255,255,0.18);
  text-decoration: none;
  transform: scale(1.1);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.comm-subject-attachments .att-inline-icon i { font-size: 12px; }
.comm-subject-attachments .att-inline-icon i.fa-file-image { color: #43a047; }
.comm-subject-attachments .att-inline-icon i.fa-file-video { color: #1e88e5; }
.comm-subject-attachments .att-inline-icon i.fa-file-audio { color: #e53935; }
.comm-subject-attachments .att-inline-icon i.fa-file-pdf  { color: #c62828; }
.comm-subject-attachments .att-inline-icon i.fa-file-word  { color: #2b579a; }
.comm-subject-attachments .att-inline-icon i.fa-file-excel { color: #217346; }
.comm-subject-attachments .att-inline-icon i.fa-file-powerpoint { color: #d24726; }
.comm-subject-attachments .att-inline-icon i.fa-file-archive { color: #f39c12; }
.comm-subject-attachments .att-inline-icon i.fa-file-code  { color: #8e24aa; }
.comm-subject-attachments .att-inline-icon i.fa-file-text  { color: #607d8b; }
.comm-subject-attachments .att-inline-icon i.fa-file       { color: #999; }

/* Icon-only action buttons (toolbar) -- styled to match the Event
   Actions header buttons (.kv-ea-hdr-btn): soft-blue tinted tile by
   default, solid brand-blue with white glyph on hover/focus, with a
   centered dark tooltip pill underneath. Colour swap is white-on-blue
   so it reads as "primary" rather than the previous near-invisible
   dark-grey-on-dark-bg. */
.comm-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #E6F4FB;
  color: var(--blue);
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.comm-action-btn:hover,
.comm-action-btn:focus {
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  outline: none;
  box-shadow: 0 4px 10px rgba(34, 186, 255, .28);
}
.comm-action-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(34, 186, 255, .25);
}
.comm-action-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  background: #1F2937;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 5px 9px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.comm-action-btn[data-tooltip]:hover::after,
.comm-action-btn[data-tooltip]:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.comm-action-btn i { font-size: 12px; }

/* Meta row (gray info strip) */
.comm-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 5px 12px;
  font-family: 'Roboto', sans-serif;
  font-size: 9px;
  color: #64748b;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.comm-meta-row .dot-sep { margin: 0 4px; color: #cbd5e1; }
.comm-inline-shipment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  background: #e0f7fa;
  color: #00838f;
  border: 1px solid #b2ebf2;
  margin-left: 6px;
  vertical-align: middle;
  font-family: 'Roboto', sans-serif;
}
.comm-inline-shipment .shipment-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}
.comm-meta-sep {
  width: 1px;
  height: 14px;
  background: #cbd5e1;
  margin: 0 8px;
  flex-shrink: 0;
}
.comm-meta-row .recipient-entry {
  display: inline;
  font-family: var(--f);
  font-size: 9px;
  color: #1e293b;
}
.comm-meta-row .recipient-detail { color: #64748b; font-weight: 400; font-family: var(--f); font-size: 9px; }
.comm-meta-row .recipient-detail .sep { margin: 0 3px; color: #cbd5e1; }
.comm-recipients-expanded {
  padding: 2px 12px 4px;
  font-family: var(--f);
  font-size: 9px;
  color: #1e293b;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

/* Notification-group header + nested members in expanded recipient lists */
.comm-rcpt-group-header {
  margin-top: 4px;
  font-weight: 600;
  color: #1e293b;
}
.comm-rcpt-group-header i { margin-right: 4px; color: #64748b; }
.comm-rcpt-group-member { padding-left: 12px; }

/* Group-member chips on the Send form (reply-to-a-group-member flow).
   One removable chip per individual: name | email | phone | group. */
.kv-group-member-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.kv-group-member-chip {
  display: inline-flex;
  align-self: flex-start;   /* hug content so the remove button sits next to the text */
  max-width: 100%;
  align-items: center;
  gap: 8px;
  background: #E0F4FF;
  border: 1px solid #B3E0FF;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--f);
}
.kv-group-member-chip .kv-gm-info {
  font-size: 11px;
  color: var(--navy, #213142);
  line-height: 1.5;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kv-group-member-chip .kv-gm-name { font-weight: 600; }
.kv-group-member-chip .kv-gm-detail { color: #475569; font-weight: 400; }
.kv-group-member-chip .kv-gm-sep { margin: 0 4px; color: #94A3B8; }
.kv-group-member-chip .kv-gm-remove {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--t3, #6B7280);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.kv-group-member-chip .kv-gm-remove:hover { color: #e53e3e; }

/* Thread card toolbar tweaks */
.thread-card .comm-toolbar { transition: background 0.15s; }
.thread-card .comm-toolbar:hover { background: #253348; }
.thread-card .comm-toolbar-subject h3 {
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: unset;
}

/* Old card header (kept for standalone page backward compat) */
.comm-card-header {
  padding: 24px 28px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.comm-card-header-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

/* Direction icon */
.comm-dir-icon {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  flex-shrink: 0;
}
.comm-dir-icon.sent { background: var(--blue); }
.comm-dir-icon.received { background: #27ae60; }
.comm-dir-icon .status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #1e293b;
}
.comm-dir-icon .status-dot.sent { background: var(--blue); }
.comm-dir-icon .status-dot.received { background: #f59e0b; }
.comm-card-title { flex: 1; min-width: 0; }
.comm-card-title h3 {
  margin: 0 0 4px 0;
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  word-break: break-word;
  line-height: 1.35;
}
.comm-card-title .comm-date-line {
  margin: 0;
  font-size: 9px;
  color: #94a3b8;
  font-family: var(--f);
  letter-spacing: 0.2px;
}
.comm-date-line .dot-sep { margin: 0 6px; color: #cbd5e1; }
.comm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  margin-left: 8px;
  vertical-align: middle;
}
.comm-chip.chip-email { background: #e0f2fe; color: #0369a1; }
.comm-chip.chip-sms { background: #fef3c7; color: #92400e; }
.recipient-detail { color: #64748b; font-weight: 400; }
.recipient-sep { color: #cbd5e1; }
.recipients-toggle {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.recipients-toggle:hover { color: #1aa3e6; }
.recipients-toggle i { font-size: 9px; margin-left: 3px; }

/* Divider */
.comm-divider { margin: 0; border: none; border-top: 1px solid #e2e8f0; }

/* Meta grid */
.comm-meta-grid { display: grid; grid-template-columns: auto 1fr; padding: 0; }
.comm-meta-col { padding: 16px 28px; border-right: 1px solid #e2e8f0; }
.comm-meta-col:last-child { border-right: none; }
.comm-meta-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.comm-meta-value { font-family: var(--f); font-size: 9px; color: #1e293b; word-break: break-word; }
.comm-meta-value .shipment-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  background: #e0f7fa;
  color: #00838f;
  border: 1px solid #b2ebf2;
}
.comm-meta-value .from-type { font-size: 9px; color: #94a3b8; margin-left: 6px; }
.comm-meta-value .email-link { color: var(--blue); text-decoration: none; font-size: 9px; }
.comm-meta-value .email-link:hover { text-decoration: underline; }

/* Message section */
.comm-message-section { padding: 0; background: #fff; margin: 0; }
/* Email / SMS bodies get their HTML injected from backend email templates
   which carry their own inline font-size / font-family declarations.
   Force a page-consistent base (10px) on every descendant so the
   conversation thread matches the rest of the page typography. Applies
   to the primary detail view (#comm-email-text) and every thread card
   body inside the expanded "Conversation Thread" section. */
#comm-email-text,
#comm-email-text *,
#thread-items-container .thread-card-body,
#thread-items-container .thread-card-body * {
  font-size: 10px !important;
  line-height: 1.5 !important;
  font-family: var(--f) !important;
}
#comm-email-text h1,
#comm-email-text h2,
#comm-email-text h3,
#thread-items-container .thread-card-body h1,
#thread-items-container .thread-card-body h2,
#thread-items-container .thread-card-body h3 {
  font-size: 12px !important;
  font-weight: 700 !important;
}
#comm-email-text h4,
#comm-email-text h5,
#thread-items-container .thread-card-body h4,
#thread-items-container .thread-card-body h5 {
  font-size: 11px !important;
  font-weight: 700 !important;
}
/* SMS plain-text block */
#comm-sms-text { font-size: 10px !important; line-height: 1.5 !important; }
.comm-section-label {
  font-size: 10px;
  font-weight: 700;
  color: #00b4ff;
  background: #fafbfc;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}
.comm-message-body { color: #1e293b; background: #fff; padding: 10px 30px; }
.comm-message-body iframe.email-frame { width: 100%; border: none; min-height: 400px; }
.comm-section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: #fafbfc;
  border-bottom: 1px solid #f1f5f9;
}
.email-fullscreen-btn {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  color: #64748b;
  font-size: 9px;
  font-weight: 500;
  transition: all 0.15s;
}
.email-fullscreen-btn:hover { background: #f0f7ff; border-color: var(--blue); color: var(--blue); }
.email-fullscreen-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.email-fullscreen-container {
  background: #fff;
  width: 92vw;
  height: 90vh;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.email-fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.email-fullscreen-header span { font-weight: 600; font-size: 15px; color: #1e293b; }
.email-fullscreen-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #64748b;
  padding: 0 4px;
  line-height: 1;
}
.email-fullscreen-close:hover { color: #ef4444; }
.email-fullscreen-body { flex: 1; overflow: hidden; }
.email-fullscreen-body iframe { width: 100%; height: 100%; border: none; }
.comm-message-body pre {
  white-space: pre-wrap;
  margin: 0;
}

/* Thread section */
.comm-thread-bar {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px 10px 0 0;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.comm-thread-bar:hover { background: #f8fafc; }
.comm-thread-bar-left { display: flex; align-items: center; gap: 10px; }
.comm-thread-bar-left .thread-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}
.comm-thread-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 700;
  background: #dcfce7;
  color: #16a34a;
}
.comm-thread-bar .toggle-icon {
  font-size: 14px;
  color: #94a3b8;
  transition: transform 0.2s;
  padding: 11px 10px 8px 9px;
  border-radius: 50%;
  border: 1px solid #ddd;
}
.comm-thread-body {}

/* Timeline */
.thread-timeline { position: relative; padding-left: 56px; }
.thread-timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
  border-radius: 1px;
}
.thread-timeline-item { position: relative; margin-bottom: 16px; }
.thread-timeline-item:last-child { margin-bottom: 0; }
.thread-node {
  position: absolute;
  left: -56px;
  top: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  border: 2px solid #fff;
}
.thread-node.sent { background: var(--blue); }
.thread-node.received { background: #27ae60; }
.thread-node .status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.thread-node .status-dot.sent { background: var(--blue); }
.thread-node .status-dot.received { background: #f59e0b; }

/* Thread card */
.thread-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.thread-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.thread-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  gap: 16px;
}
.thread-card-header-left { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; }
.thread-card-title { flex: 1; min-width: 0; }
.thread-card-title h4 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  word-break: break-word;
  line-height: 1.35;
}
.thread-card-title .comm-date-line {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  letter-spacing: 0.2px;
}
.thread-card-body { display: none; }
.thread-card.expanded .thread-card-body { display: block; }

/* Common detail styles */
.comm-field { margin-bottom: 10px; }
.comm-field .comm-label {
  font-weight: 700;
  font-size: 9px;
  color: #94a3b8;
  text-transform: capitalize;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
  display: block;
}
.comm-field .comm-value { font-family: var(--f); font-size: 9px; color: #1e293b; word-break: break-word; }
.content-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 12px;
  margin-top: 4px;
}
.content-block iframe.email-frame { width: 100%; border: none; min-height: 120px; }
.content-block pre {
  white-space: pre-wrap;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  color: #1e293b;
}

/* Attachment list */
.attachment-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.attachment-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #f0f7ff;
  border: 1px solid #d4e6f7;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.attachment-item:hover {
  background: #d4e6f7;
  text-decoration: none;
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.attachment-item i { font-size: 22px; }
.attachment-item i.fa-file-image { color: #43a047; }
.attachment-item i.fa-file-video { color: #1e88e5; }
.attachment-item i.fa-file-audio { color: #e53935; }
.attachment-item i.fa-file-pdf   { color: #c62828; }
.attachment-item i.fa-file-word  { color: #2b579a; }
.attachment-item i.fa-file-excel { color: #217346; }
.attachment-item i.fa-file-powerpoint { color: #d24726; }
.attachment-item i.fa-file-archive { color: #f39c12; }
.attachment-item i.fa-file-code  { color: #8e24aa; }
.attachment-item i.fa-file-text  { color: #607d8b; }
.attachment-item i.fa-file       { color: #999; }

/* Forwarded attachment tiles */
.fwd-attachment-section { margin-bottom: 12px; }
.fwd-attachment-label {
  font-weight: bold;
  font-size: 12px;
  color: #888;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.fwd-attachment-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fwd-attachment-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #f0f7ff;
  border: 1px solid #d4e6f7;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.fwd-attachment-tile:hover { background: #d4e6f7; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.fwd-attachment-tile i.file-icon { font-size: 20px; }
.fwd-attachment-tile i.fa-file-image { color: #43a047; }
.fwd-attachment-tile i.fa-file-video { color: #1e88e5; }
.fwd-attachment-tile i.fa-file-audio { color: #e53935; }
.fwd-attachment-tile i.fa-file-pdf   { color: #c62828; }
.fwd-attachment-tile i.fa-file-word  { color: #2b579a; }
.fwd-attachment-tile i.fa-file-excel { color: #217346; }
.fwd-attachment-tile i.fa-file-powerpoint { color: #d24726; }
.fwd-attachment-tile i.fa-file-archive { color: #f39c12; }
.fwd-attachment-tile i.fa-file-code  { color: #8e24aa; }
.fwd-attachment-tile i.fa-file-text  { color: #607d8b; }
.fwd-attachment-tile i.fa-file       { color: #999; }
.fwd-attachment-tile .fwd-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #fff;
  transition: background 0.2s;
  line-height: 1;
}
.fwd-attachment-tile .fwd-remove:hover { background: #c0392b; }

.empty-value { color: #cbd5e1; font-style: italic; }
.badge-type {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: bold;
  background-color: #f39c12;
  color: #fff;
}
.badge-sent {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: bold;
  background-color: var(--blue);
  color: #fff;
}
.badge-received {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: bold;
  background-color: #27ae60;
  color: #fff;
}
.recipient-list { list-style: none; padding: 0; margin: 0; }
.recipient-list li { padding: 3px 0; font-size: 14px; }
.recipient-list .recipient-name { font-weight: 600; color: #1e293b; }
.recipient-list .recipient-type {
  font-size: 9px; color: #94a3b8; background: #f1f5f9;
  padding: 1px 6px; border-radius: 8px; margin-left: 6px;
}
.recipient-list .recipient-contact { font-size: 12px; color: #94a3b8; display: block; margin-top: 1px; }

/* Attachment Preview Modal */
.att-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.70);
  z-index: 9998;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: attFadeIn .2s ease;
}
.att-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 9999;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  max-width: 90vw;
  max-height: 90vh;
  min-width: 420px;
  overflow: hidden;
  animation: attSlideIn .25s ease;
}
@keyframes attFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes attSlideIn { from { opacity:0; transform:translate(-50%,-48%); } to { opacity:1; transform:translate(-50%,-50%); } }
.att-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8e8e8;
  gap: 12px;
}
.att-modal-header .att-file-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.att-modal-header .att-file-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.att-file-icon.image { background: #e8f5e9; color: #43a047; }
.att-file-icon.video { background: #e3f2fd; color: #1e88e5; }
.att-file-icon.audio { background: #fce4ec; color: #e53935; }
.att-file-icon.pdf   { background: #ffebee; color: #c62828; }
.att-file-icon.other { background: #f3e5f5; color: #8e24aa; }
.att-file-icon.word  { background: #e8eaf6; color: #2b579a; }
.att-file-icon.excel { background: #e8f5e9; color: #217346; }
.att-modal-header .att-filename {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.att-modal-header .att-filetype {
  font-size: 9px;
  color: #999;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}
.att-modal-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.att-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.att-btn-download { background: #337ab7; color: #fff; }
.att-btn-download:hover { background: #286090; color: #fff; text-decoration: none; }
.att-btn-newtab { background: #e9ecef; color: #495057; }
.att-btn-newtab:hover { background: #dee2e6; color: #333; text-decoration: none; }
.att-btn-close {
  background: none;
  border: 1px solid #dee2e6;
  color: #666;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
}
.att-btn-close:hover { background: #f8d7da; border-color: #f5c6cb; color: #c62828; }
.att-modal-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 200px;
  background: #fafafa;
}
.att-modal-body img { max-width: 100%; max-height: 70vh; border-radius: 5px; box-shadow: 0 2px 12px rgba(0,0,0,.1); }
.att-modal-body iframe { width: 100%; height: 70vh; border: none; border-radius: 5px; }
.att-modal-body video,
.att-modal-body audio { max-width: 100%; border-radius: 5px; }
.att-no-preview { text-align: center; padding: 40px; color: #888; }
.att-no-preview i { font-size: 48px; color: #ccc; margin-bottom: 12px; display: block; }
.att-no-preview p { margin: 0 0 12px 0; font-size: 15px; }
#incidentCommModal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
#comm-header-recipients {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
  display: inline-flex;
  gap: 5px;
}

/* ── Bottom Tab Bar (scrollable for many tabs) ── */
.kv-bottom-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.kv-bottom-tabs > li > a {
  white-space: nowrap;
  font-size: 9px !important;
  padding: 8px 12px !important;
}

/* ── History container & table styles ── */
.kv-hist-container {
  padding: 0;
}
.kv-hist-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--t2);
  text-transform: capitalize;
  letter-spacing: 0.3px;
  padding: 10px 14px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* The leading glyph (phone / video / link) now reads as a proper section
   accent -- larger and brand-blue so it matches the kv-at-col-hdr icons
   used on the Alert Details tab. */
.kv-hist-title > i,
.kv-hist-title > .fa {
  font-size: 14px;
  color: var(--blue);
  margin-right: 0; /* gap on the parent handles spacing now */
  line-height: 1;
}
.kv-hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}
.kv-hist-table thead tr {
  background: var(--navy);
}
.kv-hist-table thead th {
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  padding: 8px 10px;
  white-space: nowrap;
}
.kv-hist-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.kv-hist-table tbody tr:nth-child(even) {
  background: #f8fafc;
}
.kv-hist-table tbody tr:hover {
  background: #EBF8FF;
}
.kv-hist-table tbody td {
  padding: 7px 10px;
  font-size: 9px;
  color: var(--t1);
  vertical-align: middle;
}
.kv-hist-empty-row {
  text-align: center;
  padding: 24px !important;
  color: var(--t3);
  font-style: italic;
}
.kv-hist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: var(--t3);
  font-size: 9px;
}
.kv-hist-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  gap: 4px;
}
.kv-hist-pagination button {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  font-size: 9px;
  cursor: pointer;
  transition: all 0.15s;
}
.kv-hist-pagination button:hover:not(:disabled) {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.kv-hist-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kv-hist-pagination #shipment-page-info {
  font-size: 9px;
  color: var(--t3);
}
.kv-tab-scroll {
  overflow-y: auto;
}

/* New row highlight */
.kv-new-row {
  animation: kvNewRowFlash 2s ease;
}
@keyframes kvNewRowFlash {
  0% { background: #FEF3C7; }
  100% { background: transparent; }
}
/* Red dot for current incident in shipment list */
.kv-red-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF4444;
  margin-right: 4px;
  vertical-align: middle;
}
/* Live dot inline for media invite */
.kv-live-dot-inline {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #dc2626;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
  animation: kvLivePulse 1.5s infinite;
}
@keyframes kvLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ---  Tracker Tab Cards (Incident Detail v2)  --- */
body.kv-incident-page .kv-tracker-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
body.kv-incident-page .kv-tracker-card-head {
  padding: 8px 14px 8px 20px;
  background: #F8FAFB;
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.kv-incident-page .kv-tracker-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
body.kv-incident-page .kv-tracker-dot.green { background: #10B981; }
body.kv-incident-page .kv-tracker-dot.grey  { background: #9CA3AF; }
body.kv-incident-page .kv-tracker-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  text-transform: none;
  letter-spacing: normal;
}
body.kv-incident-page .kv-tracker-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.kv-incident-page .kv-tracker-field {
  font-size: 9px;
  color: var(--t1);
  line-height: 1.5;
}
/* .kv-tracker-lbl / .kv-tracker-val aliased to standard detail field specs */
body.kv-incident-page .kv-tracker-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  font-family: var(--f);
  text-transform: none;
  letter-spacing: 0;
}
body.kv-incident-page .kv-tracker-val {
  font-size: 9px;
  font-weight: 500;
  color: var(--t1);
  font-family: var(--f);
  word-break: break-word;
}
body.kv-incident-page .kv-tracker-config-group {
  margin-bottom: 10px;
}
body.kv-incident-page .kv-tracker-config-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--t2);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 6px;
}
body.kv-incident-page .kv-tracker-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.kv-incident-page .kv-tracker-input-row + .kv-tracker-input-row {
  margin-top: 8px;
}
body.kv-incident-page .kv-tracker-select {
  font-family: var(--f);
  font-size: 9px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--t1);
  outline: none;
  min-width: 110px;
  cursor: pointer;
}
body.kv-incident-page .kv-tracker-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,186,255,.1);
}
body.kv-incident-page .kv-tracker-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
body.kv-incident-page .kv-tracker-input {
  font-family: var(--f);
  font-size: 9px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--t1);
  outline: none;
  width: 70px;
  text-align: right;
}
body.kv-incident-page .kv-tracker-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,186,255,.1);
}
body.kv-incident-page .kv-tracker-unit {
  font-size: 9px;
  color: var(--t3);
  font-weight: 600;
}

/* ---  Protocol Popup Dropdown  --- */
body.kv-incident-page .kv-proto-dd {
  position: relative;
}
body.kv-incident-page .kv-proto-dd-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s;
}
body.kv-incident-page .kv-proto-dd-selected:hover,
body.kv-incident-page .kv-proto-dd.open .kv-proto-dd-selected {
  border-color: var(--blue);
}
body.kv-incident-page .kv-proto-dd-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
body.kv-incident-page .kv-proto-dd-icon-fa {
  width: 28px;
  font-size: 18px;
  color: var(--blue);
  text-align: center;
  flex-shrink: 0;
}
body.kv-incident-page .kv-proto-dd-text {
  font-size: 9px;
  font-weight: 700;
  color: var(--t1);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.kv-incident-page .kv-proto-dd-arrow {
  font-size: 9px;
  color: var(--t3);
  flex-shrink: 0;
  transition: transform .2s;
}
body.kv-incident-page .kv-proto-dd.open .kv-proto-dd-arrow {
  transform: rotate(180deg);
}
body.kv-incident-page .kv-proto-dd-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 10;
  max-height: 240px;
  overflow-y: auto;
}
body.kv-incident-page .kv-proto-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  border-bottom: 1px solid var(--border2);
  transition: background .12s;
}
body.kv-incident-page .kv-proto-dd-item:last-child {
  border-bottom: none;
}
body.kv-incident-page .kv-proto-dd-item:hover {
  background: var(--page);
}

/* ---  Protocol Popup Steps  --- */
body.kv-incident-page .kv-proto-step {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border2);
}
body.kv-incident-page .kv-proto-step:last-child {
  border-bottom: none;
}
body.kv-incident-page .kv-proto-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.kv-incident-page .kv-proto-step-text {
  font-size: 9px;
  color: var(--t1);
  line-height: 1.6;
  padding-top: 2px;
}

/* Protocol popup — images fit within container */
body.kv-incident-page #protocolPopup img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Protocol popup — HTML-content protocol rendered in an isolated iframe.
   Height is set in JS (renderProtocolSteps) to fit the content. */
body.kv-incident-page .kv-proto-html-frame {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
  border-radius: 4px;
}

/* Protocol popup — PDF-content protocol embedded in an iframe. */
body.kv-incident-page .kv-proto-pdf-frame {
  display: block;
  width: 100%;
  height: 600px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}
body.kv-incident-page #protocolPopup .kv-call-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.kv-incident-page #protocolPopup .kv-call-body {
  flex: 1;
  min-height: 0;
}
body.kv-incident-page #protocolPopup .ui-resizable-se {
  width: 14px;
  height: 14px;
  right: 2px;
  bottom: 2px;
  cursor: se-resize;
}

/* ---  Alert History Tab (Incident Detail v2)  --- */
body.kv-incident-page .kv-at-panel.kv-ah-layout {
  padding: 0;
  height: 100%;
}
body.kv-incident-page .kv-ah-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 0;
  height: 100%;
  overflow: hidden;
}
body.kv-incident-page .kv-ah-timeline-col {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.kv-incident-page .kv-ah-timeline-head {
  font-size: 8px;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: 0.1em;
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.kv-incident-page .kv-ah-total-pill {
  font-size: 9px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(34,186,255,.1);
  border: 1px solid rgba(34,186,255,.25);
  border-radius: 99px;
  padding: 1px 8px;
  letter-spacing: 0;
}
body.kv-incident-page .kv-ah-timeline-scroll {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
body.kv-incident-page .kv-ah-date-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--t2);
  padding: 6px 12px 4px;
  background: var(--page);
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}
body.kv-incident-page .kv-ah-line-wrap {
  position: relative;
  padding: 4px 0;
}
body.kv-incident-page .kv-ah-vline {
  position: absolute;
  left: 51px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
body.kv-incident-page .kv-ah-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 5px 10px 5px 8px;
  cursor: pointer;
  transition: background .1s ease;
  position: relative;
}
body.kv-incident-page .kv-ah-item:hover { background: #f0f7ff; }
body.kv-incident-page .kv-ah-item.active { background: #e6f4ff; }
body.kv-incident-page .kv-ah-item.kv-ah-current .kv-ah-desc { font-weight: 600; }
body.kv-incident-page .kv-ah-time {
  font-size: 8px;
  color: var(--t3);
  width: 38px;
  text-align: right;
  padding-top: 2px;
  flex-shrink: 0;
  padding-right: 6px;
}
body.kv-incident-page .kv-ah-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid white;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin-top: 1px;
}
body.kv-incident-page .kv-ah-dot-red   { background: #EF4444; box-shadow: 0 0 0 1px #EF4444; }
body.kv-incident-page .kv-ah-dot-amber { background: #F59E0B; box-shadow: 0 0 0 1px #F59E0B; }
body.kv-incident-page .kv-ah-dot-green { background: #10B981; box-shadow: 0 0 0 1px #10B981; }
body.kv-incident-page .kv-ah-desc {
  font-size: 9px;
  color: var(--t1);
  line-height: 1.4;
  padding-left: 6px;
  flex: 1;
}
body.kv-incident-page .kv-ah-id { color: var(--t3); }
body.kv-incident-page .kv-ah-id-current {
  display: inline-block;
  background: rgba(34,186,255,.12);
  color: var(--blue);
  border: 1px solid rgba(34,186,255,.35);
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 8px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1.5;
}
body.kv-incident-page .kv-ah-sev {
  font-size: 9px;
  font-weight: 700;
}
body.kv-incident-page .kv-ah-sev-red   { color: #EF4444; }
body.kv-incident-page .kv-ah-sev-amber { color: #F59E0B; }
body.kv-incident-page .kv-ah-sev-green { color: #10B981; }
body.kv-incident-page .kv-ah-sev-pill {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 9px;
}
body.kv-incident-page .kv-ah-sev-pill.kv-ah-sev-red   { background: #FEF2F2; border: 1px solid #FECACA; }
body.kv-incident-page .kv-ah-sev-pill.kv-ah-sev-amber { background: #FFFBEB; border: 1px solid #FDE68A; }
body.kv-incident-page .kv-ah-sev-pill.kv-ah-sev-green { background: #ECFDF5; border: 1px solid #A7F3D0; }
/* Detail panel */
body.kv-incident-page .kv-ah-detail-col {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  gap: 16px;
}
body.kv-incident-page .kv-ah-detail-col.kv-ah-empty {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--t4);
  font-size: 9px;
  text-align: center;
}
body.kv-incident-page .kv-ah-detail-left,
body.kv-incident-page .kv-ah-detail-right {
  flex: 1;
  min-width: 0;
}
body.kv-incident-page .kv-ah-detail-right {
  border-left: 1px solid var(--border2);
  padding-left: 16px;
}
body.kv-incident-page .kv-ah-detail-single {
  flex-direction: column;
  gap: 0;
}
body.kv-incident-page .kv-ah-section-divider {
  border-top: 1px solid var(--border2);
  margin: 10px 0;
}
body.kv-incident-page .kv-ah-dfield {
  margin-bottom: 4px;
  line-height: 1.5;
}
/* .kv-ah-dlbl / .kv-ah-dval aliased to standard detail field specs */
body.kv-incident-page .kv-ah-dlbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  font-family: var(--f);
  display: inline;
  text-transform: none;
  letter-spacing: 0;
}
body.kv-incident-page .kv-ah-dval {
  font-size: 9px;
  font-weight: 500;
  color: var(--t1);
  font-family: var(--f);
  display: inline;
  word-break: break-word;
}
body.kv-incident-page .kv-ah-link {
  color: var(--blue-mid);
  font-weight: 600;
  text-decoration: none;
}
body.kv-incident-page .kv-ah-link:hover {
  text-decoration: underline;
}
body.kv-incident-page .kv-ah-empty {
  text-align: center;
  padding: 20px;
  color: var(--t3);
  font-size: 10px;
}
body.kv-incident-page .kv-ah-load-more {
  text-align: center;
  padding: 10px 0 6px;
  color: var(--t3);
  font-size: 10px;
}

/* ---  Carriers & Drivers type badges  --- */
body.kv-incident-page .kv-cd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}
body.kv-incident-page .kv-cd-carrier {
  background: rgba(34,186,255,.1);
  color: var(--blue);
  border: 1px solid rgba(34,186,255,.3);
}
body.kv-incident-page .kv-cd-driver {
  background: rgba(245,158,11,.12);
  color: #B45309;
  border: 1px solid rgba(245,158,11,.35);
}

/* ---  Sensor Tab (Incident Detail v2)  --- */
body.kv-incident-page .kv-sensor-filter-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  margin-bottom: 6px;
  text-transform: capitalize;
  letter-spacing: 0.04em;
}
body.kv-incident-page .kv-sensor-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
  transition: background .15s ease;
}
body.kv-incident-page .kv-sensor-row:hover {
  background: #F0F7FF;
}
body.kv-incident-page .kv-sensor-label {
  width: 100px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t2);
  flex-shrink: 0;
}
body.kv-incident-page .kv-sensor-value {
  width: 100px;
  font-size: 9px;
  text-align: right;
  flex-shrink: 0;
}
body.kv-incident-page .kv-sensor-row .canvasjs-chart-credit { display: none !important; }
body.kv-incident-page .kv-sensor-row .canvasjs-chart-canvas { position: relative; z-index: 1; }
body.kv-incident-page [id^="sensorSpark"] > div { overflow: hidden !important; }
body.kv-incident-page [id^="sensorSpark"] a[href*="canvasjs"] { display: none !important; }

/* Sensor Detail Modal */
body.kv-incident-page .kv-sm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
}
body.kv-incident-page .kv-sm-overlay:not(.ng-hide) {
  display: flex;
}
body.kv-incident-page .kv-sm-dialog {
  background: #fff;
  border-radius: 8px;
  width: 900px;
  max-width: 92vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
}
body.kv-incident-page .kv-sm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
body.kv-incident-page .kv-sm-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
body.kv-incident-page .kv-sm-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
}
body.kv-incident-page .kv-sm-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--t3);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
body.kv-incident-page .kv-sm-close:hover { color: var(--t1); }
body.kv-incident-page .kv-sm-filters {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border2);
}
body.kv-incident-page .kv-sm-filter-group { flex: 1; }
body.kv-incident-page .kv-sm-filter-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-transform: capitalize;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
/* Native date input styling for incident page custom range */
body.kv-incident-page .kv-date-input {
  width: 100%;
  box-sizing: border-box;
}

/* Custom date range picker row */
body.kv-incident-page .kv-custom-range-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border2);
}
body.kv-incident-page .kv-custom-range-field {
  display: flex;
  flex-direction: column;
  flex: 1;
}
body.kv-incident-page .kv-date-input {
  width: 100%;
  box-sizing: border-box;
}
body.kv-incident-page .kv-custom-range-apply {
  flex: 0 0 auto;
  font-size: 9px !important;
  padding: 7px 14px !important;
  align-self: flex-end;
}

body.kv-incident-page .kv-sm-chart-wrap {
  padding: 16px 20px;
 /* background: #F8FAFB;*/
}
body.kv-incident-page .kv-sm-chart-wrap .canvasjs-chart-credit { display: none !important; }
body.kv-incident-page .kv-sm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 20px;
}
body.kv-incident-page .kv-sm-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}
body.kv-incident-page .kv-sm-stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
body.kv-incident-page .kv-sm-stat-red .kv-sm-stat-icon { background: rgba(239,68,68,.1); color: #EF4444; }
body.kv-incident-page .kv-sm-stat-blue .kv-sm-stat-icon { background: rgba(34,186,255,.1); color: #22BAFF; }
body.kv-incident-page .kv-sm-stat-orange .kv-sm-stat-icon { background: rgba(249,115,22,.1); color: #F97316; }
body.kv-incident-page .kv-sm-stat-green .kv-sm-stat-icon { background: rgba(16,185,129,.1); color: #10B981; }
body.kv-incident-page .kv-sm-stat-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
}
body.kv-incident-page .kv-sm-stat-lbl {
  font-size: 9px;
  color: var(--t3);
  font-weight: 500;
}
body.kv-incident-page .kv-sm-stat-time {
  font-size: 8px;
  color: var(--t4);
  font-weight: 400;
}
body.kv-incident-page .kv-sm-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border2);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   MAP VIEW PAGE (standalone /map_view/)
   ═══════════════════════════════════════════════ */
.kv-mapview-page {
  margin: 0;
  padding: 0;
  height: 100vh;
  min-height: 100vh;
  font-family: var(--f);
  background: var(--page);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.kv-mapview-page *, .kv-mapview-page *::before, .kv-mapview-page *::after {
  box-sizing: border-box;
}
.kv-mapview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  min-height: 46px;
  background: var(--navy);
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.kv-mapview-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kv-mapview-brand svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.kv-mapview-brand span {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 0.18em;
}
.kv-mapview-select-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kv-mapview-select-wrap label {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.kv-mapview-select-wrap select {
  height: 32px;
  min-width: 220px;
  padding: 0 28px 0 10px;
  font-family: var(--f);
  font-size: 9px;
  font-weight: 400;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: all .15s ease;
}
.kv-mapview-select-wrap select:hover {
  border-color: rgba(255,255,255,.25);
}
.kv-mapview-select-wrap select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,186,255,.15);
}
.kv-mapview-select-wrap select option {
  background: var(--navy);
  color: #fff;
}
.kv-mapview-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
}
.kv-mapview-body #map {
  flex: 1;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--sh);
  overflow: hidden;
  position: relative;
}
.kv-mapview-body #map img,
.kv-mapview-body #map object {
  border-radius: 8px;
}
.kv-mapview-nomap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.kv-mapview-nomap p {
  font-size: 9px;
  font-weight: 400;
  color: var(--t3);
  text-align: center;
  max-width: 420px;
  line-height: 1.7;
}
.kv-mapview-nomap a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.kv-mapview-nomap a:hover {
  text-decoration: underline;
}
.kv-mapview-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 9px;
  font-weight: 400;
  color: var(--t4);
  border-top: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}
.kv-mapview-footer a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}
.kv-mapview-footer a:hover {
  text-decoration: underline;
}
#map_action_container {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: none;
}

/* ===  Observer Popup Overlay Backdrop  === */
#modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(0,0,0,.5);
}

/* ===  Observer Popup Forms (Filter, Close, Unlock)  === */
/* Hide wrapper divs so only the fixed popup form shows */
#events_filter_container > .user-actions,
#events_action_container > .user-actions {
  float: none;
  display: block;
  margin: 0;
  position: static;
}
/* Remove legacy ::before pseudo-element that injects "Filter Events" text */
.popup-forms.kv-popup-form::before {
  display: none !important;
  content: none !important;
}
.popup-forms.kv-popup-form {
  position: fixed !important;
  z-index: 1001;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 520px;
  max-width: 90vw;
  max-height: 85vh;
  background: #fff;
  border: 0px solid var(--border) !important;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
  padding: 0 !important;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--f);
  min-width: auto !important;
}
.popup-forms.kv-popup-form[style*="display: block"],
.popup-forms.kv-popup-form[style*="display:block"] {
  display: flex !important;
}
/* Head — blue background matching floating popup headers */
.kv-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--blue);
  border-radius: 8px 8px 0 0;
  flex-shrink: 0;
}
.kv-popup-title {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kv-popup-title i {
  color: #fff;
}
.kv-popup-close {
  background: none;
  border: none;
  font-size: 18px;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
  transition: color .12s;
}
.kv-popup-close:hover {
  color: #fff;
}
/* Body */
.kv-popup-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* Fields */
.kv-popup-field label {
  display: block;
  /* Override legacy .popup-forms div label { width: 33.33% !important }
     from emc.css which caps every label in a popup-forms form at a third
     of the column width and causes "Organization Name" to wrap. */
  width: 100% !important;
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-transform: none;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  white-space: nowrap;
}
.kv-popup-field input[type="text"],
.kv-popup-field textarea,
.kv-popup-field select {
  width: 100%;
  font-size: 9px;
  font-family: var(--f);
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--t1);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.kv-popup-field input[type="text"]:focus,
.kv-popup-field textarea:focus,
.kv-popup-field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,186,255,.1);
}
.kv-popup-field textarea {
  resize: vertical;
  min-height: 70px;
}
.kv-popup-field select {
  appearance: auto;
}
/* 2-column row */
.kv-popup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Checkbox field */
.kv-popup-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
}
.kv-popup-checkbox label {
  margin-bottom: 0;
  text-transform: none;
  font-weight: 500;
  color: var(--t1);
  cursor: pointer;
}
.kv-popup-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
  cursor: pointer;
}
/* Static value display */
.kv-popup-static {
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  padding: 7px 10px;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 5px;
}
/* Note/warning */
.kv-popup-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 5px;
  font-size: 9px;
  color: #92400E;
  line-height: 1.5;
}
.kv-popup-note i {
  color: #F59E0B;
  margin-top: 1px;
  flex-shrink: 0;
}
/* Footer */
.kv-popup-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border2);
  flex-shrink: 0;
}

/* ============================================================
   Shipment Map List Page (kv-sml-*)
   ============================================================ */

/* Main Layout — map on top, list below */
/* Shipment map list page — make controller wrapper fill content area */
#content:has(.kv-sml-layout),
.observer-view #content:has(.kv-sml-layout),
.has-sidebar #content:has(.kv-sml-layout) {
  overflow: hidden;
  padding: 5px 8px 0 !important;
}
#content:has(.kv-sml-layout) > [ng-controller] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0 14px 0;
}
#content:has(.kv-sml-layout) > [ng-controller] > .kvgl-page-header {
  margin-bottom: 8px;
  margin-top: 0;
  flex-shrink: 0;
}
#content:has(.kv-sml-layout) > footer {
  display: none;
}
.kv-sml-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Map Section */
.kv-sml-map-section {
  flex: 0 0 40%;
  position: relative;
  background: #e0f2f1;
  border-bottom: 1px solid var(--border);
  min-height: 150px;
  overflow: hidden;
}
.kv-sml-map-container {
  width: 100%;
  height: 100%;
}
.kv-sml-map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 600;
  color: var(--blue);
  font-family: var(--f);
}

/* Tive Alerts list map wrapper (hosts the reusable .kv-sml-map-* controls) */
.kv-tal-map-wrap {
  position: relative;
  width: 100%;
  height: 500px;
}
.kv-tal-map {
  width: 100%;
  height: 100%;
}

/* Draggable resize handle below the trackers/alerts map (double-click resets) */
.kv-tal-resize-handle {
  height: 8px;
  background: #F3F5F8;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 var(--r) var(--r);
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: background .12s ease;
  user-select: none;
}
.kv-tal-resize-handle:hover {
  background: #E3F4FF;
}
.kv-tal-resize-handle .kv-tal-resize-grip {
  width: 36px;
  height: 3px;
  background: #9CA3AF;
  border-radius: 99px;
  transition: background .12s ease;
}
.kv-tal-resize-handle:hover .kv-tal-resize-grip {
  background: var(--blue);
}

/* Map Controls */
.kv-sml-map-controls {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
}
/* Map / Satellite view toggle (top-left of the map) */
.kv-sml-map-type-toggle {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  z-index: 10;
  overflow: hidden;
}
.kv-sml-map-type-btn {
  padding: 6px 14px;
  font-size: 9px;
  font-weight: 700;
  color: var(--t1);
  cursor: pointer;
  font-family: var(--f);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  transition: all .12s ease;
  background: #fff;
  border-right: 1px solid var(--border);
}
.kv-sml-map-type-btn:last-child {
  border-right: none;
}
.kv-sml-map-type-btn:hover {
  background: var(--page);
}
.kv-sml-map-type-btn.active {
  background: var(--blue);
  color: #fff;
}
.kv-sml-map-ctrl-btn {
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  border: 1px solid var(--border);
  transition: all .12s ease;
}
.kv-sml-map-ctrl-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* Resize Handle */
.kv-sml-resize-handle {
  flex: 0 0 8px;
  background: var(--page);
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.kv-sml-resize-bar {
  width: 40px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
}

/* List Section */
.kv-sml-list-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

/* Chip Filters */
.kv-sml-chip-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: #fff;
}
.kv-sml-chips-left {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
}
.kv-sml-chip {
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--page);
  color: var(--t1);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all .12s ease;
  flex-shrink: 0;
  font-family: var(--f);
  border: 1px solid var(--border);
  line-height: 1.2;
}
.kv-sml-chip:hover {
  filter: brightness(0.97);
}
/* Colored variants */
.kv-sml-chip-intransit {
  background: #DDE9FB;
  border-color: #B5CFF1;
  color: #000;
}
.kv-sml-chip-upcoming {
  background: #FFE6CC;
  border-color: #F5BC8C;
  color: #000;
}
.kv-sml-chip-delivered {
  background: #F0DCEB;
  border-color: #D7B3CF;
  color: #000;
}
/* Active state — slightly stronger border + subtle shadow */
.kv-sml-chip.active {
  background: var(--blue);
  color: #000;
  border-color: var(--blue);
}
.kv-sml-chip-intransit.active {
  background: #DDE9FB;
  color: #000;
  border-color: #1E3A8A;
  box-shadow: 0 0 0 1px #1E3A8A inset;
}
.kv-sml-chip-upcoming.active {
  background: #FFE6CC;
  color: #000;
  border-color: #9A4D00;
  box-shadow: 0 0 0 1px #9A4D00 inset;
}
.kv-sml-chip-delivered.active {
  background: #F0DCEB;
  color: #000;
  border-color: #6B2C5A;
  box-shadow: 0 0 0 1px #6B2C5A inset;
}

/* Sort Bar (inline inside chip filters row) */
.kv-sml-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
  background: #fff;
}
.kv-sml-sort-label {
  font-size: 9px;
  color: var(--t4);
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.04em;
  font-family: var(--f);
}
.kv-sml-sort-value {
  font-size: 9px;
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: var(--f);
}
.kv-sml-sort-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  z-index: 100;
  display: none;
  min-width: 160px;
  border: 1px solid var(--border);
}
.kv-sml-sort-dropdown.active {
  display: block;
}
.kv-sml-sort-option {
  padding: 8px 14px;
  font-size: 9px;
  font-weight: 500;
  color: var(--t1);
  cursor: pointer;
  transition: all .12s ease;
  border-bottom: 1px solid var(--page);
  font-family: var(--f);
}
.kv-sml-sort-option:last-child {
  border-bottom: none;
}
.kv-sml-sort-option:hover {
  background: var(--page);
}
.kv-sml-sort-option.selected {
  color: var(--blue);
  font-weight: 700;
  background: #F0F7FF;
}

/* Cards Content */
.kv-sml-cards-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--page);
}

/* Shipment Card */
.kv-sml-card {
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  padding-right: 26px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  cursor: default;
  transition: all .12s ease;
  position: relative;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
}
.kv-sml-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  border-color: var(--blue);
  text-decoration: none;
  color: inherit;
}
.kv-sml-card.highlighted {
  box-shadow: 0 0 0 2px var(--blue);
}
/* In-transit cards pulse to draw attention */
@keyframes kv-sml-card-pulse {
  0%, 100% {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  }
  50% {
    background-color: #DBEAFE;
    box-shadow: 0 0 0 2px rgba(34,186,255,.45), 0 2px 8px rgba(34,186,255,.25);
  }
}
.kv-sml-card.kv-sml-card-blink {
  animation: none !important;
}

/* Card Chevron */
.kv-sml-card-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
}
.kv-sml-card-chevron:hover i {
  color: var(--blue) !important;
}

/* 3-dot Action Menu */
.kv-sml-action-menu {
  position: relative;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--t3);
  transition: all .12s ease;
}
.kv-sml-action-menu:hover {
  background: #F0F7FF;
  color: var(--blue);
}
.kv-sml-action-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  min-width: 180px;
  padding: 4px 0;
  font-family: var(--f);
}
.kv-sml-action-dropdown.active {
  display: block;
}
.kv-sml-action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  text-decoration: none;
  transition: all .12s ease;
  white-space: nowrap;
}
.kv-sml-action-item:hover {
  background: #F0F7FF;
  color: var(--blue);
  text-decoration: none;
}
.kv-sml-action-item i {
  width: 14px;
  text-align: center;
  font-size: 11px;
  color: var(--t3);
}
.kv-sml-action-item:hover i {
  color: var(--blue);
}
.kv-sml-action-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Card Header */
.kv-sml-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.kv-sml-card-info {
  flex: 1;
  min-width: 0;
}
.kv-sml-card-id {
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
  font-family: var(--f);
}
.kv-sml-card-name {
  font-size: 9px;
  font-weight: 500;
  color: var(--t2);
  font-family: var(--f);
}
.kv-sml-card-category {
  font-size: 9px;
  font-weight: 400;
  color: var(--t3);
  font-family: var(--f);
}

/* Status Badge */
.kv-sml-status-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
  text-transform: capitalize;
  font-family: var(--f);
  letter-spacing: 0.02em;
}
.kv-sml-status-in-transit {
  background: #DBEAFE;
  color: #1D4ED8;
}
.kv-sml-status-delivered {
  background: #D1FAE5;
  color: #059669;
}
.kv-sml-status-delayed {
  background: #FEF3C7;
  color: #D97706;
}
.kv-sml-status-pending {
  background: var(--page);
  color: var(--t3);
}
.kv-sml-delayed-badge {
  background: #FEE2E2;
  color: #B91C1C;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
}

/* Alert Badge */
.kv-sml-alert-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--f);
}
.kv-sml-alert-badge.no-alerts {
  background: #D1FAE5;
  color: #059669;
}
.kv-sml-alert-badge.has-alerts {
  background: #FEE2E2;
  color: #DC2626;
}
.kv-sml-alert-badge.ready-badge {
  background: #F3F5F8;
  color: #6B7280;
}

/* Location Section */
.kv-sml-location-section {
  margin-bottom: 6px;
}
.kv-sml-location-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  margin-bottom: 2px;
  font-family: var(--f);
}
.kv-sml-loc-label {
  color: var(--t4);
  font-weight: 600;
  min-width: 45px;
}
.kv-sml-loc-value {
  color: var(--t2);
  font-weight: 400;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* State Row */
.kv-sml-state-row {
  font-size: 9px;
  margin-bottom: 4px;
  font-family: var(--f);
}
.kv-sml-state-label {
  color: var(--t4);
  font-weight: 600;
  margin-right: 4px;
}
.kv-sml-state-value {
  color: var(--t2);
  font-weight: 500;
}

/* Tracker Row */
.kv-sml-tracker-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--t3);
  font-family: var(--f);
}
.kv-sml-tracker-id {
  font-weight: 600;
  color: var(--t2);
}
.kv-sml-reading-ago {
  color: var(--t4);
  font-weight: 400;
}

/* Current Location */
.kv-sml-current-loc {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 9px;
  font-family: var(--f);
  margin-bottom: 4px;
}
.kv-sml-current-loc .kv-sml-loc-label {
  flex-shrink: 0;
}
.kv-sml-current-loc .kv-sml-loc-value {
  color: var(--t2);
}

/* ETA Row */
.kv-sml-eta-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-family: var(--f);
  margin-bottom: 4px;
}
.kv-sml-eta-label {
  color: var(--t4);
  font-weight: 600;
}
.kv-sml-eta-value {
  color: var(--t2);
  font-weight: 500;
}

/* Sensor Pills */
.kv-sml-sensor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--f);
}
.kv-sml-sensor-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t2);
  background: #F3F5F8;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
}
.kv-sml-sensor-pill i {
  font-size: 10px;
}
/* Disabled sensor pill — no data available */
.kv-sml-sensor-disabled {
  opacity: 0.35;
}
.kv-sml-sensor-disabled i {
  filter: grayscale(1);
}

/* ---- Inline Action Bar ---- */
.kv-sml-action-bar {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0 2px;
}
.kv-sml-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  border-radius: 4px;
  font-size: 10px;
  color: var(--t3);
  cursor: pointer;
  transition: all .12s ease;
  text-decoration: none;
}
.kv-sml-act:hover {
  background: #F0F7FF;
  color: var(--blue);
  text-decoration: none;
}
.kv-sml-act i {
  font-size: 10px;
}
.kv-sml-act-toggle:hover {
  background: rgba(239,68,68,.08);
}

/* ---- Compact Card Row Layout ---- */
.kv-sml-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-family: var(--f);
}
/* Marker-style pin header on each card row 1 (matches map marker design) */
.kv-sml-pin-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  flex-shrink: 0;
}
/* Status circle in card row (matches map marker) */
.kv-sml-pin-circle {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  flex-shrink: 0;
}
/* Outline box around icons + name (matches map marker pill) */
.kv-sml-pin-box {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid;
}
/* Bell / clock icons in card row */
.kv-sml-pin-icon {
  font-size: 11px;
  flex-shrink: 0;
}
.kv-sml-pin-icon.kv-icon-red { color: #EF4444; }
.kv-sml-pin-icon.kv-icon-green { color: #10B981; }
.kv-sml-pin-alert {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #EF4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--f);
  flex-shrink: 0;
}
.kv-sml-pin-alert i {
  font-size: 9px;
}
.kv-sml-card-id {
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
  font-family: var(--f);
  text-decoration: none;
}
.kv-sml-card-id:hover {
  color: var(--blue);
  text-decoration: underline;
}
.kv-sml-card-name-inline {
  font-size: 9px;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
/* Org name in brackets after shipment name */
.kv-sml-org-tag {
  font-size: 9px;
  font-weight: 500;
  color: var(--t3);
  font-family: var(--f);
}
/* Start Date / ETA row below route */
.kv-sml-dates-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  font-family: var(--f);
}
.kv-sml-date-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.kv-sml-date-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--t1);
}
.kv-sml-date-val {
  font-size: 9px;
  font-weight: 400;
  color: var(--t2);
}

.kv-sml-cat-tag {
  font-size: 9px;
  font-weight: 500;
  color: var(--t4);
  background: var(--page);
  padding: 1px 6px;
  border-radius: 99px;
}

/* Two-column card layout */
.kv-sml-card-cols {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 0;
  align-items: start;
}

/* Left column: identity header + route */
.kv-sml-col-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Right column: fixed 220px so all cards have equal width */
.kv-sml-col-right {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding-left: 8px;
  border-left: 1px solid var(--border2);
}

/* Row 1 of right col: action bar + alert badge inline */
.kv-sml-row1-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kv-sml-row2 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  font-family: var(--f);
  font-size: 9px;
  align-items: start;
}

/* Route column (left) */
.kv-sml-route-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Meta column (right) — left-aligned inside right column */
.kv-sml-meta-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  text-align: left;
  white-space: nowrap;
}
.kv-sml-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  justify-content: flex-start;
}
.kv-sml-meta-col .kv-sml-sensor-pills {
  margin-top: 2px;
  gap: 4px;
  justify-content: flex-start;
}
.kv-sml-meta-col .kv-sml-sensor-pill {
  padding: 2px 6px;
  font-size: 9px;
  gap: 3px;
}
.kv-sml-meta-col .kv-sml-sensor-pill i {
  font-size: 9px;
}
.kv-sml-route-list {
  position: relative;
}
/* Vertical connector line between origin and destination markers */
.kv-sml-route-list::before {
  content: '';
  position: absolute;
  left: 38px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  border-left: 1px dashed var(--blue);
}
.kv-sml-loc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 9px;
  color: var(--t2);
  line-height: 1.4;
  position: relative;
  z-index: 1;
  min-width: 0;
}
.kv-sml-loc-row + .kv-sml-loc-row {
  margin-top: 6px;
}
.kv-sml-loc-key {
  flex: 0 0 70px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding-top: 1px;
}
.kv-sml-loc-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--t2);
}
.kv-sml-loc-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: #fff;
}
.kv-sml-loc-origin {
  border: 2px solid var(--blue);
  border-radius: 50%;
}
.kv-sml-loc-dest {
  color: var(--blue);
  font-size: 13px;
  background: transparent;
}
/* Pin-shaped From / To icons with S / E letter inside */
.kv-sml-loc-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  flex-shrink: 0;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.kv-sml-loc-pin > span {
  transform: rotate(45deg);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  font-family: var(--f);
  line-height: 1;
}

.kv-sml-meta-lbl {
  font-weight: 600;
  color: var(--t4);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  font-size: 9px;
}
.kv-sml-meta-val {
  font-weight: 500;
  color: var(--t2);
}

/* ---- Slide Panels (Search & Filter) ---- */
.kv-sml-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  display: none;
}
.kv-sml-overlay.active {
  display: block;
}

/* Shipment Map Filter Modal */
.kv-sml-filter-modal {
  width: 560px;
  max-width: 92vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.kv-sml-filter-head {
  background: var(--blue);
  color: #fff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px 8px 0 0;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--f);
}
.kv-sml-filter-head .kv-sml-filter-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kv-sml-filter-head .kv-sml-filter-close {
  cursor: pointer;
  font-size: 13px;
  opacity: .85;
}
.kv-sml-filter-head .kv-sml-filter-close:hover {
  opacity: 1;
}
.kv-sml-filter-modal .kv-sml-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
}
.kv-sml-filter-modal .kv-sml-panel-body input[type="text"],
.kv-sml-filter-modal .kv-sml-panel-body input[type="search"],
.kv-sml-filter-modal .kv-sml-panel-body input[type="number"],
.kv-sml-filter-modal .kv-sml-panel-body input.inp,
.kv-sml-filter-modal .kv-sml-panel-body select,
.kv-sml-filter-modal .kv-sml-panel-body select.inp,
.kv-sml-filter-modal .kv-sml-panel-body textarea,
.kv-sml-filter-modal .kv-sml-panel-body .kv-mpd-multisel-toggle,
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-search-input-wrap {
  background: #fff !important;
  background-color: #fff !important;
}
/* Normalize font-size / height / padding for text inputs (Bootstrap's
   input[type="text"] rule overrides .inp with 14px/20px — force 9px/34px) */
.kv-sml-filter-modal .kv-sml-panel-body input[type="text"],
.kv-sml-filter-modal .kv-sml-panel-body input[type="search"],
.kv-sml-filter-modal .kv-sml-panel-body input[type="number"],
.kv-sml-filter-modal .kv-sml-panel-body input.inp,
.kv-sml-filter-modal .kv-sml-panel-body select,
.kv-sml-filter-modal .kv-sml-panel-body select.inp,
.kv-sml-filter-modal .kv-sml-panel-body textarea.inp {
  font-family: var(--f) !important;
  font-size: 9px !important;
  height: 34px;
  padding: 0 10px;
  margin-bottom: 0;
  line-height: normal;
  color: var(--t1);
}
.kv-sml-filter-modal .kv-sml-panel-body textarea.inp {
  height: auto;
  padding: 8px 10px;
}
.kv-sml-filter-modal .kv-sml-panel-body input::placeholder {
  font-size: 9px;
  color: #C4C9D4;
}
.kv-sml-filter-modal .kv-sml-panel-body input[type="text"],
.kv-sml-filter-modal .kv-sml-panel-body input[type="search"],
.kv-sml-filter-modal .kv-sml-panel-body input[type="number"],
.kv-sml-filter-modal .kv-sml-panel-body input.inp,
.kv-sml-filter-modal .kv-sml-panel-body select,
.kv-sml-filter-modal .kv-sml-panel-body select.inp {
  width: auto !important;
  max-width: 100% !important;
  min-width: 180px;
  display: inline-block;
}
.kv-sml-filter-modal .kv-sml-panel-body select,
.kv-sml-filter-modal .kv-sml-panel-body select.inp {
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100% !important;
}
.kv-sml-filter-modal .kv-sml-panel-body .kv-mpd-multisel {
  width: auto !important;
  min-width: 180px;
  display: inline-block;
}
/* Date inputs (Completed From / To) — smaller */
.kv-sml-filter-modal .kv-sml-panel-body input#sml_date_from,
.kv-sml-filter-modal .kv-sml-panel-body input#sml_date_until {
  flex: 0 0 auto !important;
  width: 180px !important;
  max-width: 180px !important;
}
/* Toggle rows — no background/border, label hugs toggle */
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-toggle-row {
  background: transparent !important;
  border: none !important;
  padding: 6px 0 !important;
  justify-content: flex-start !important;
  gap: 8px;
}
/* Two-column layout: each filter section becomes a 2-col grid */
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  align-items: end;
}
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-section > .kv-sml-filter-title,
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-section > .kv-sml-filter-toggle-row,
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-section > .kv-mpd-multisel {
  grid-column: 1 / -1;
}
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-section > div {
  margin-bottom: 0 !important;
  min-width: 0;
}
/* Inputs/selects inside the 2-col grid should fill their cell */
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-section input[type="text"],
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-section input.inp,
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-section select,
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-section select.inp {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* Uniform label sizing across the filter modal */
.kv-sml-filter-modal .kv-sml-panel-body label,
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-title,
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-toggle-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.04em !important;
  color: var(--t3) !important;
  font-family: var(--f) !important;
  margin-bottom: 6px;
  display: block;
}
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-toggle-row label.kv-toggle {
  margin-bottom: 0;
  display: inline-block;
}
.kv-sml-filter-modal .kv-sml-panel-body .kv-sml-filter-toggle-label {
  margin-bottom: 0;
  display: inline-block;
}

/* Activate / Deactivate confirmation modal */
.kv-sml-confirm-modal {
  width: 440px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.kv-sml-confirm-body {
  padding: 22px 24px !important;
  display: flex;
  align-items: center;
  gap: 16px;
}
.kv-sml-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}
.kv-sml-confirm-icon.is-activate {
  background: rgba(16,185,129,0.12);
  color: #10B981;
}
.kv-sml-confirm-icon.is-deactivate {
  background: rgba(239,68,68,0.12);
  color: #EF4444;
}
.kv-sml-confirm-icon.is-info {
  background: rgba(34,186,255,0.12);
  color: var(--blue);
}
.kv-sml-confirm-text {
  font-size: 11px;
  font-weight: 400;
  color: var(--t1);
  font-family: var(--f);
  line-height: 1.5;
}
.kv-sml-confirm-text strong {
  font-weight: 700;
  color: var(--t1);
}

.kv-sml-search-panel,
.kv-sml-filter-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 12px rgba(0,0,0,.15);
  transition: right .25s ease-in-out;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.kv-sml-search-panel.active,
.kv-sml-filter-panel.active {
  right: 0;
}

.kv-sml-panel-header {
  background: #213142;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: #fff;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--f);
}
.kv-sml-panel-header span {
  cursor: pointer;
}

.kv-sml-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Search Input */
.kv-sml-search-input-wrap {
  display: flex;
  align-items: center;
  background: var(--page);
  border-radius: 5px;
  padding: 8px 10px;
  gap: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.kv-sml-search-input-wrap input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 9px;
  color: var(--t1);
  outline: none;
  font-family: var(--f);
}
.kv-sml-search-input-wrap input::placeholder {
  color: var(--t4);
}

/* Filter Sections inside panels */
.kv-sml-filter-section {
  margin-bottom: 16px;
}
.kv-sml-filter-title {
  font-size: 9px;
  color: var(--t3);
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  font-family: var(--f);
}
.kv-sml-filter-row {
  background: var(--page);
  border-radius: 5px;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border: 1px solid var(--border);
}
.kv-sml-filter-row-label {
  font-size: 9px;
  color: var(--t1);
  font-weight: 600;
  font-family: var(--f);
}
.kv-sml-filter-row-value {
  font-size: 9px;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f);
}

.kv-sml-filter-toggle-row {
  background: var(--page);
  border-radius: 5px;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
}
.kv-sml-filter-toggle-label {
  font-size: 9px;
  color: var(--t1);
  font-weight: 500;
  flex: 1;
  font-family: var(--f);
}

/* Reset Button */
.kv-sml-reset-btn {
  width: 100%;
  padding: 9px;
  border-radius: 5px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s ease;
  background: #fff;
  border: 1.5px solid #EF4444;
  color: #EF4444;
  font-family: var(--f);
}
.kv-sml-reset-btn:hover {
  background: #FEE2E2;
}

/* Numbered pin badge in card — color set via ng-style */
.kv-sml-leg-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--t3);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--f);
  line-height: 1;
}

/* Route color dot on card */
.kv-sml-route-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

/* Map Legend */
.kv-sml-map-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255,255,255,.95);
  border-radius: 5px;
  padding: 8px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  border: 1px solid var(--border);
  z-index: 10;
  font-family: var(--f);
}
.kv-sml-legend-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--t1);
  text-transform: capitalize;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.kv-sml-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 500;
  color: var(--t2);
  margin-bottom: 4px;
}
.kv-sml-legend-item:last-child {
  margin-bottom: 0;
}
.kv-sml-legend-icon {
  display: inline-block;
  flex-shrink: 0;
}
.kv-sml-legend-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  background: #EA4335;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  transform: rotate(-45deg);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  font-family: var(--f);
}
.kv-sml-legend-line-solid {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 3px solid var(--t3);
  flex-shrink: 0;
}
.kv-sml-legend-line-dashed {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px dashed var(--t4);
  flex-shrink: 0;
}

/* Shipment Detail Map — InfoWindow popup styling (disable Google's native inner scroll, use our own) */
.kv-sd-map-section .gm-style .gm-style-iw-c {
  border-radius: 8px !important;
  padding: 10px 6px 8px 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.14) !important;
  max-width: 300px !important;
}
.kv-sd-map-section .gm-style .gm-style-iw-d {
  overflow: hidden !important;
  max-height: none !important;
}
.kv-sd-map-section .gm-style .gm-style-iw-tc::after {
  background: #fff !important;
}
.kv-sd-map-section .gm-style .gm-ui-hover-effect {
  top: 4px !important;
  right: 4px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.06) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.kv-sd-map-section .gm-style .gm-ui-hover-effect > span,
.kv-sd-map-section .gm-style .gm-ui-hover-effect > img {
  display: block !important;
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
  background-color: #213142 !important;
  opacity: 1 !important;
}
.kv-sd-map-section .gm-style .gm-ui-hover-effect:hover {
  background: rgba(0,0,0,.12) !important;
}
/* Custom alert InfoWindow scroll — single scrollbar */
.kv-sd-alert-iw-body {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.kv-sd-alert-iw-body::-webkit-scrollbar {
  width: 6px;
}
.kv-sd-alert-iw-body::-webkit-scrollbar-track {
  background: transparent;
}
.kv-sd-alert-iw-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 3px;
}
.kv-sd-alert-iw-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.35);
}

/* Shipment Map — InfoWindow popup styling */
.kv-sml-map-section .gm-style .gm-style-iw-c {
  border-radius: 8px !important;
  padding: 10px 6px 8px 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.14) !important;
  max-width: 280px !important;
}
.kv-sml-map-section .gm-style .gm-style-iw-d {
  overflow: hidden !important;
  max-height: none !important;
}
.kv-sml-map-section .gm-style .gm-style-iw-tc::after {
  background: #fff !important;
}
.kv-sml-map-section .gm-style .gm-ui-hover-effect {
  top: 4px !important;
  right: 4px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.06) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.kv-sml-map-section .gm-style .gm-ui-hover-effect > span,
.kv-sml-map-section .gm-style .gm-ui-hover-effect > img {
  display: block !important;
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
  background-color: #213142 !important;
  opacity: 1 !important;
}
.kv-sml-map-section .gm-style .gm-ui-hover-effect:hover {
  background: rgba(0,0,0,.12) !important;
}

/* ═══════════════════════════════════════════════════════════
   Shipment Detail v2 (kv-sd-*)
   ═══════════════════════════════════════════════════════════ */

/* Header Bar */
.kv-sd-header {
  background: var(--navy);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: #fff;
  border-radius: var(--r);
  margin-bottom: 0;
}
.kv-sd-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.kv-sd-back-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: all .12s ease;
}
.kv-sd-back-btn:hover {
  background: rgba(255,255,255,.1);
  color: var(--blue);
}
.kv-sd-header-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kv-sd-header-right {
  display: flex;
  gap: 14px;
  align-items: center;
}
.kv-sd-header-icon {
  color: #fff;
  opacity: .8;
  cursor: pointer;
  transition: all .12s ease;
  font-size: 13px;
  text-decoration: none;
}
.kv-sd-header-icon:hover {
  opacity: 1;
  color: var(--blue);
}

/* Map Section */
.kv-sd-map-section {
  height: 280px;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--r) var(--r);
  overflow: hidden;
  background: var(--page);
}
.kv-sd-map-section:fullscreen,
.kv-sd-map-section:-webkit-full-screen,
.kv-sd-map-section:-ms-fullscreen {
  height: 100vh !important;
  width: 100vw !important;
  border-radius: 0;
  border: none;
}
.kv-sd-map {
  width: 100%;
  height: 100%;
}
.kv-sd-map-pin {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 600;
  z-index: 10;
}
.kv-sd-pin-marker {
  color: #10B981;
  font-size: 12px;
}

/* Alert Legend */
.kv-sd-map-legend {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.92);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  z-index: 10;
  border: 1px solid var(--border);
}
.kv-sd-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.kv-sd-legend-pin {
  width: 10px;
  height: 10px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: inline-block;
  border: 1px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.kv-sd-legend-sep {
  width: 1px;
  height: 12px;
  background: var(--border);
  margin: 0 2px;
}
.kv-sd-legend-item i {
  font-size: 10px;
}

/* Legend variant — when placed in the dark navy page header */
.kv-sd-header-legend {
  position: static;
  background: transparent;
  border: none;
  padding: 0;
  margin-right: 10px;
  color: rgba(255,255,255,.85);
  gap: 10px;
}
.kv-sd-header-legend .kv-sd-legend-sep {
  background: rgba(255,255,255,.2);
}
.kv-sd-header-legend .kv-sd-legend-pin {
  border-color: rgba(255,255,255,.3);
}

/* Custom Map Controls */
.kv-sd-map-controls {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}
.kv-sd-map-control-btn {
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  transition: all .12s ease;
}
.kv-sd-map-control-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 4px 12px rgba(34,186,255,.2);
}

/* Legend in page header (compact, fits the white kvgl-page-header bar) */
.kv-sd-ph-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  margin-right: 6px;
}
.kv-sd-ph-legend .kv-sd-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kv-sd-ph-legend .kv-sd-legend-pin {
  width: 9px;
  height: 9px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: inline-block;
  border: 1px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.kv-sd-ph-legend .kv-sd-legend-sep {
  width: 1px;
  height: 12px;
  background: var(--border);
  margin: 0 2px;
}
.kv-sd-ph-legend i {
  font-size: 10px;
}

/* Map / Satellite toggle (top-left of map) */
.kv-sd-map-type-toggle {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  display: inline-flex;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  border: 1px solid rgba(0,0,0,.12);
}
.kv-sd-map-type-btn {
  padding: 6px 14px;
  background: #fff;
  border: none;
  border-right: 1px solid rgba(0,0,0,.12);
  border-radius: 0;
  font-family: var(--f);
  font-size: 11px;
  font-weight: 700;
  color: #0F1923;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all .12s;
}
.kv-sd-map-type-btn:last-child {
  border-right: none;
}
.kv-sd-map-type-btn:hover {
  background: var(--page);
}
.kv-sd-map-type-btn.on {
  background: var(--blue);
  color: #fff;
}

/* Card Container */
.kv-sd-card-container {
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

/* Tabs */
.kv-sd-tabs {
  display: flex;
  background: #fff;
  border-bottom: 1px solid var(--border);
  border-radius: var(--r) var(--r) 0 0;
  flex-shrink: 0;
}
.kv-sd-tab {
  flex: 1;
  padding: 11px 0;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  cursor: pointer;
  position: relative;
  transition: all .12s ease;
}
.kv-sd-tab:hover {
  color: var(--t1);
}
.kv-sd-tab.active {
  color: var(--t1);
}
.kv-sd-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
}

/* Tab Content */
.kv-sd-tab-content {
  flex: 1;
  overflow-y: auto;
  background: var(--page);
}
.kv-sd-tab-panel {
  padding: 14px;
}

/* Detail Cards */
.kv-sd-detail-card {
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.kv-sd-id-large {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 8px;
}
.kv-sd-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 9px;
  color: var(--t3);
}
.kv-sd-status-badge {
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.04em;
}
.kv-sd-status-ready {
  background: #DBEAFE;
  color: #1D4ED8;
}
.kv-sd-status-transit {
  background: #FEF3C7;
  color: #B45309;
}
.kv-sd-status-complete {
  background: #D1FAE5;
  color: #059669;
}

/* Detail Rows */
.kv-sd-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 9px;
  color: var(--t1);
}
.kv-sd-detail-row:last-child {
  margin-bottom: 0;
}
.kv-sd-detail-icon {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  padding-top: 1px;
}
.kv-sd-detail-text {
  flex: 1;
  line-height: 1.5;
}
.kv-sd-detail-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-transform: capitalize;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
/* Inline label/value row for Origin / Destination on the detail card */
.kv-sd-detail-inline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 9px;
  color: var(--t1);
  line-height: 1.5;
}
.kv-sd-detail-inline:last-child {
  margin-bottom: 0;
}
.kv-sd-detail-inline .kv-sd-detail-label {
  flex: 0 0 90px;
  margin-bottom: 0;
  padding-top: 1px;
}
.kv-sd-detail-inline .kv-sd-detail-value {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

/* Section Headers */
.kv-sd-section-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.kv-sd-time-ago {
  font-size: 9px;
  color: var(--t4);
  font-weight: 400;
}

/* State Activity timeline (Details tab on /shipment/detail/<uuid>/).
   Mirrors the legacy /shipment/detail1/<uuid>/ timeline -- vertical
   spine through the dots, blue dot per entry, name / notes / by-line
   stacked beside each dot. Sized to match neighbouring kv-sd-detail
   typography (10px/9px). */
.kv-sd-state-list { position: relative; }
.kv-sd-state-list::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 12px;
  bottom: 8px;
  width: 1px;
  background: var(--border2);
}
.kv-sd-state-item {
  position: relative;
  padding: 6px 0 12px 28px;
}
.kv-sd-state-item:last-child { padding-bottom: 0; }
.kv-sd-state-dot {
  position: absolute;
  left: 9px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(34, 186, 255, .25);
}
.kv-sd-state-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.4;
}
.kv-sd-state-notes {
  font-size: 9px;
  color: var(--t3);
  margin-top: 2px;
  line-height: 1.4;
}
.kv-sd-state-meta {
  font-size: 9px;
  color: var(--t4);
  margin-top: 3px;
  font-weight: 400;
}

/* Sensor Pills */
.kv-sd-sensor-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.kv-sd-sensor-pill {
  padding: 6px 10px;
  border-radius: 99px;
  background: var(--page);
  border: 1px solid var(--border);
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 5px;
}
.kv-sd-current-location {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 9px;
  color: var(--t2);
}

/* Shipment Stops */
/* Route Card */
.kv-sd-route-card {
  padding: 0 !important;
}
.kv-sd-route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.kv-sd-route-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
}
.kv-sd-route-hint {
  font-size: 9px;
  font-weight: 500;
  color: var(--blue);
}

/* Leg Group */
.kv-sd-leg-group {
  border-bottom: 1px solid var(--border);
}
.kv-sd-leg-group:last-child {
  border-bottom: none;
}
.kv-sd-leg-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border2);
  background: #FAFBFC;
}
.kv-sd-leg-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
}
.kv-sd-leg-date {
  font-size: 9px;
  font-weight: 400;
  color: var(--t3);
  flex: 1;
}
.kv-sd-leg-status {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--t3);
  text-transform: capitalize;
  letter-spacing: 0.04em;
}
.kv-sd-leg-status.kv-sd-status-ready {
  color: var(--t3);
  border-color: var(--border);
}
.kv-sd-leg-status.kv-sd-status-transit {
  color: #F59E0B;
  border-color: #F59E0B;
  background: rgba(245, 158, 11, .08);
}
.kv-sd-leg-status.kv-sd-status-complete {
  color: #10B981;
  border-color: #10B981;
  background: rgba(16, 185, 129, .08);
}

/* Route Timeline (scoped to .kv-sd-route-card so it does not leak into the alerts timeline) */
.kv-sd-route-card .kv-sd-timeline {
  padding: 20px 20px 20px 20px;
  position: relative;
}
.kv-sd-route-card .kv-sd-timeline-stop {
  display: flex;
  gap: 14px;
  position: relative;
}
/* Hide the legacy ::after pseudo since we now render an explicit
   .kv-sd-timeline-line element with traversed/pending state. */
.kv-sd-route-card .kv-sd-timeline-stop .kv-sd-timeline-track::after {
  content: none !important;
}
.kv-sd-route-card .kv-sd-timeline-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 24px;
  /* No position:relative -- the .kv-sd-timeline-line below is absolutely
     positioned and needs to escape this 24px-tall track and resolve against
     the taller .kv-sd-timeline-stop (which IS position:relative). */
}
.kv-sd-route-card .kv-sd-timeline-dot {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  background-color: var(--blue);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  line-height: 1;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
}
.kv-sd-route-card .kv-sd-timeline-line {
  display: block !important;
  position: absolute !important;
  /* Center on the 24px-wide track that sits flush left in the stop row.
     Track center = 12px, line is 3px wide -> left = 12 - 1.5 = 10.5px */
  left: 10.5px !important;
  right: auto !important;
  top: 24px !important;
  bottom: 0 !important;
  width: 3px !important;
  margin-left: 0 !important;
  border-radius: 2px;
  /* No background here on purpose -- inline ng-style or the
     .kv-sd-line-traversed / .kv-sd-line-pending modifier supplies it.
     Using !important on background would block the inline style. */
  z-index: 1;
  transform: none !important;
}
/* Override the global ::before bar inside the route card */
.kv-sd-route-card .kv-sd-timeline-line::before {
  content: none !important;
  display: none !important;
}
/* Solid traversed segment - colour set inline via ng-style */
.kv-sd-route-card .kv-sd-timeline-line.kv-sd-line-traversed {
  background: var(--blue);
}
/* Dashed pending segment - colour set inline via ng-style */
.kv-sd-route-card .kv-sd-timeline-line.kv-sd-line-pending {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--blue) 0,
    var(--blue) 4px,
    transparent 4px,
    transparent 9px
  );
  opacity: 0.75;
}
.kv-sd-route-card .kv-sd-timeline-content {
  flex: 1;
  min-width: 0;
  padding-bottom: 15px;
}
.kv-sd-route-card .kv-sd-timeline-stop:last-child .kv-sd-timeline-content {
  padding-bottom: 0;
}
.kv-sd-route-card .kv-sd-timeline-stop:last-child .kv-sd-timeline-track::after {
  display: none;
}
.kv-sd-route-card .kv-sd-timeline-address {
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.5;
  margin-bottom: 8px;
  padding-top: 4px;
}
.kv-sd-route-card .kv-sd-timeline-field {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 0;
  font-size: 9px;
  border-bottom: 1px solid var(--border2);
}
.kv-sd-timeline-field:last-child {
  border-bottom: none;
}
.kv-sd-timeline-field-label {
  color: var(--t3);
  font-weight: 400;
  white-space: nowrap;
}
.kv-sd-timeline-field-value {
  color: var(--t1);
  font-weight: 700;
}
.kv-sd-timeline-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* Horizontal divider above the origin stop of legs 2+ (handover boundary).
   Absolute-positioned so it spans the full row without disturbing the flex
   layout of the stop. */
.kv-sd-route-card .kv-sd-timeline-stop.kv-sd-stop-leg-start {
  margin-top: 20px;
}
.kv-sd-route-card .kv-sd-leg-separator {
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  border-top: 1px solid var(--border);
}

/* Custom Fields */
.kv-sd-custom-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kv-sd-custom-field {
  font-size: 9px;
  color: var(--t1);
}

/* ─── Alerts Tab ─── */
.kv-sd-tracker-selector {
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--border);
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kv-sd-tracker-sel-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
}
.kv-sd-tracker-sel-dropdown {
  font-size: 9px;
  font-weight: 600;
  color: var(--t1);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 8px;
  background: #fff;
}

.kv-sd-alert-timeline {
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--border);
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.kv-sd-timeline-header {
  font-size: 10px;
  font-weight: 500;
  color: var(--t3);
  margin-bottom: 14px;
  text-transform: capitalize;
}

/* Date Groups */
.kv-sd-date-group {
  margin-bottom: 10px;
}
.kv-sd-date-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
  cursor: pointer;
  user-select: none;
}
.kv-sd-date-header .kv-sd-date-arrow {
  font-size: 9px;
  transition: transform .2s ease;
  color: var(--t3);
}
.kv-sd-date-header.collapsed .kv-sd-date-arrow {
  transform: rotate(-90deg);
}
.kv-sd-date-count {
  font-size: 9px;
  font-weight: 400;
  color: var(--t4);
}
.kv-sd-date-items {
  padding-left: 6px;
}

/* Timeline Items */
.kv-sd-timeline-item {
  display: grid;
  grid-template-columns: 40px 18px 1fr;
  gap: 8px;
  padding: 10px 0;
  position: relative;
}
.kv-sd-timeline-time {
  font-size: 9px;
  color: var(--t3);
  font-weight: 500;
  text-align: right;
  padding-top: 2px;
}
.kv-sd-timeline-line {
  position: relative;
  display: flex;
  justify-content: center;
}
.kv-sd-timeline-line::before {
  content: '';
  position: absolute;
  width: 2px;
  background: var(--border);
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.kv-sd-timeline-item:last-child .kv-sd-timeline-line::before {
  display: none;
}
.kv-sd-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background: #EF4444;
  border: 2px solid #fff;
  box-sizing: content-box;
}
.kv-sd-timeline-dot.critical {
  background: #EF4444 !important;
}
.kv-sd-timeline-dot.warning {
  background: #EF4444 !important;
}
.kv-sd-timeline-dot.resolved {
  background: #10B981 !important;
}
.kv-sd-timeline-content {
  padding-bottom: 6px;
}
.kv-sd-alert-severity {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.kv-sd-alert-severity.critical { color: #EF4444; }
.kv-sd-alert-severity.warning  { color: #F59E0B; }
.kv-sd-alert-severity.resolved { color: #10B981; }
.kv-sd-alert-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 6px;
}
.kv-sd-alert-detail-row {
  font-size: 9px;
  margin-bottom: 3px;
  line-height: 1.4;
  color: var(--t2);
}
.kv-sd-alert-detail-lbl {
  color: var(--t3);
  font-weight: 500;
}

/* ─── Trackers Tab ─── */
.kv-sd-tracker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kv-sd-tracker-card {
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--border);
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  cursor: pointer;
  transition: all .12s ease;
}
.kv-sd-tracker-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(34,186,255,.15);
}
.kv-sd-tracker-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.kv-sd-tracker-id {
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kv-sd-tracker-status {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 600;
  text-transform: capitalize;
}
.kv-sd-tracker-status.active {
  background: #D1FAE5;
  color: #059669;
}
.kv-sd-tracker-status.inactive {
  background: #FEE2E2;
  color: #DC2626;
}
.kv-sd-tracker-info-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--t3);
}

/* ─── Sensors Tab ─── */
.kv-sd-sensor-controls {
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--border);
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.kv-sd-temp-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.kv-sd-temp-option {
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s ease;
  background: #fff;
  color: var(--t3);
}
.kv-sd-temp-option.active {
  background: var(--navy);
  color: #fff;
}
.kv-sd-chart-card {
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.kv-sd-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.kv-sd-chart-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kv-sd-chart-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
}
.kv-sd-chart-body {
  min-height: 100px;
}
.kv-sd-chart-placeholder {
  height: 100px;
  background: var(--page);
  border-radius: 5px;
  overflow: hidden;
}
.kv-sd-chart-dates {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--t4);
  margin-top: 6px;
}

/* Mini Bar Chart */
.kv-sd-mini-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 100%;
  padding: 4px 2px 0;
}
.kv-sd-mini-bar {
  flex: 1;
  min-height: 2px;
  background: #EF4444;
  opacity: .7;
  border-radius: 1px 1px 0 0;
  transition: opacity .12s ease;
}
.kv-sd-mini-bar:hover {
  opacity: 1;
}
.kv-sd-mini-bar.kv-sd-bar-blue {
  background: var(--blue);
}
.kv-sd-mini-bar.kv-sd-bar-amber {
  background: #F59E0B;
}
.kv-sd-mini-bar.kv-sd-bar-green {
  background: #10B981;
}

/* ===  Shipment Detail — Alert Scroll + Total Pill  === */
.kv-sd-alert-scroll {
  max-height: 500px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kv-sd-alert-total-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(34,186,255,.1);
  border: 1px solid rgba(34,186,255,.25);
  border-radius: 99px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ===  Shipment Detail — Alert History 2-column layout
       (mirrors incident_detail_v2 .kv-ah-* with shipment-page scope)
   === */
.kv-sd-ah-card {
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
  font-family: var(--f);
}
.kv-sd-ah-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border2);
  font-size: 10px;
  font-weight: 600;
  color: var(--t2);
}
.kv-sd-ah-head-title { flex: 0 0 auto; }
.kv-sd-ah-head-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.kv-sd-ah-filter-field { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.kv-sd-ah-filter-field label {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}
.kv-sd-ah-filter-field select.kv-tracker-select { min-width: 140px; }
.kv-sd-ah-head-filters { align-items: center; }
.kv-sd-ah-filter-btn { padding: 6px 14px; font-size: 9px; }
.kv-sd-ah-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  height: 441px;
}
@media (max-width: 900px) {
  .kv-sd-ah-layout { grid-template-columns: 1fr; height: auto; }
}
.kv-sd-ah-timeline-col {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.kv-sd-ah-timeline-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 6px 0;
}
.kv-sd-ah-date-group { }
.kv-sd-ah-date-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--t2);
  padding: 6px 12px 4px;
  background: var(--page);
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
  user-select: none;
}
.kv-sd-ah-line-wrap {
  position: relative;
  padding: 4px 0;
}
.kv-sd-ah-vline {
  position: absolute;
  left: 69px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.kv-sd-ah-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 5px 10px 5px 8px;
  cursor: pointer;
  transition: background .1s ease;
  position: relative;
}
.kv-sd-ah-item:hover { background: #f0f7ff; }
.kv-sd-ah-item.active { background: #e6f4ff; }
.kv-sd-ah-time {
  font-size: 9px;
  color: var(--t3);
  width: 56px;
  text-align: right;
  padding-top: 2px;
  flex-shrink: 0;
  padding-right: 6px;
  white-space: nowrap;
}
.kv-sd-ah-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid white;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin-top: 1px;
}
.kv-sd-ah-dot-red   { background: #EF4444; box-shadow: 0 0 0 1px #EF4444; }
.kv-sd-ah-dot-amber { background: #F59E0B; box-shadow: 0 0 0 1px #F59E0B; }
.kv-sd-ah-dot-green { background: #10B981; box-shadow: 0 0 0 1px #10B981; }
.kv-sd-ah-desc {
  font-size: 9px;
  color: var(--t1);
  line-height: 1.4;
  padding-left: 8px;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.kv-sd-ah-id {
  display: inline-block;
  background: rgba(34,186,255,.12);
  color: var(--blue);
  border: 1px solid rgba(34,186,255,.35);
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1.5;
}
.kv-sd-ah-id-lbl {
  display: inline-block;
  background: rgba(34,186,255,.05);
  color: rgba(34,186,255,.75);
  border: 1px solid rgba(34,186,255,.45);
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1.5;
  cursor: default;
  pointer-events: none;
}
.kv-sd-ah-sev {
  font-size: 9px;
  font-weight: 700;
}
.kv-sd-ah-sev-red   { color: #EF4444; }
.kv-sd-ah-sev-amber { color: #F59E0B; }
.kv-sd-ah-sev-green { color: #10B981; }
.kv-sd-ah-sev-pill {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 9px;
}
.kv-sd-ah-sev-pill.kv-sd-ah-sev-red   { background: #FEF2F2; border: 1px solid #FECACA; }
.kv-sd-ah-sev-pill.kv-sd-ah-sev-amber { background: #FFFBEB; border: 1px solid #FDE68A; }
.kv-sd-ah-sev-pill.kv-sd-ah-sev-green { background: #ECFDF5; border: 1px solid #A7F3D0; }

/* Detail panel */
.kv-sd-ah-detail-col {
  padding: 14px 18px;
  overflow-y: auto;
  font-family: var(--f);
}
.kv-sd-ah-detail-col.kv-sd-ah-detail-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--t4);
  font-size: 10px;
  text-align: center;
  gap: 6px;
}
.kv-sd-ah-detail-col.kv-sd-ah-detail-empty i { font-size: 18px; }
.kv-sd-ah-section-divider {
  border-top: 1px solid var(--border2);
  margin: 10px 0;
}
.kv-sd-ah-dfield {
  margin-bottom: 5px;
  line-height: 1.5;
}
.kv-sd-ah-dlbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  font-family: var(--f);
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  margin-right: 4px;
}
.kv-sd-ah-dval {
  font-size: 9px;
  font-weight: 500;
  color: var(--t1);
  font-family: var(--f);
  display: inline;
  word-break: break-word;
}
.kv-sd-ah-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.kv-sd-ah-link:hover { text-decoration: underline; }
.kv-sd-ah-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--t3);
  font-size: 10px;
}
.kv-sd-ah-empty i { font-size: 22px; color: var(--t4); margin-bottom: 6px; }
.kv-sd-ah-load-more {
  text-align: center;
  padding: 10px 0 6px;
  color: var(--t3);
  font-size: 10px;
}

/* ===  Sensor Overview & Modal (global — shared by shipment detail + incident)  === */
.kv-sensor-filter-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  margin-bottom: 6px;
  text-transform: capitalize;
  letter-spacing: 0.04em;
}
.kv-sensor-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
  transition: background .15s ease;
}
.kv-sensor-row:hover {
  background: #F0F7FF;
}
.kv-sensor-label {
  width: 100px;
  font-size: 9px;
  font-weight: 600;
  color: var(--t2);
  flex-shrink: 0;
}
.kv-sensor-value {
  width: 100px;
  font-size: 9px;
  text-align: right;
  flex-shrink: 0;
}
.kv-tracker-select {
  font-family: var(--f);
  font-size: 9px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--t1);
  outline: none;
  min-width: 110px;
  cursor: pointer;
}
.kv-tracker-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,186,255,.1);
}
.kv-date-input {
  width: 100%;
  box-sizing: border-box;
}
.kv-custom-range-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border2);
}
.kv-custom-range-field {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.kv-custom-range-apply {
  flex: 0 0 auto;
  font-size: 9px !important;
  padding: 7px 14px !important;
  align-self: flex-end;
}

/* Sensor Detail Modal (global) */
.kv-sm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
}
.kv-sm-overlay:not(.ng-hide) {
  display: flex;
}
.kv-sm-dialog {
  background: #fff;
  border-radius: 8px;
  width: 900px;
  max-width: 92vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
}
.kv-sm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.kv-sm-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.kv-sm-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--t1);
}
.kv-sm-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F3F4F6;
  border: none;
  color: #6B7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: background .15s ease, color .15s ease;
}
.kv-sm-close:hover {
  background: #E5E7EB;
  color: #1F2937;
}
.kv-sm-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,186,255,.15);
}
.kv-sm-filters {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border2);
}
.kv-sm-filter-group { flex: 1; }
.kv-sm-filter-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3);
  text-transform: capitalize;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.kv-sm-chart-wrap {
  padding: 16px 20px;
  /*background: #F8FAFB;*/
}
.kv-sm-chart-wrap .canvasjs-chart-credit { display: none !important; }
.kv-sm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 20px;
}
.kv-sm-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}
.kv-sm-stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.kv-sm-stat-red .kv-sm-stat-icon { background: rgba(239,68,68,.1); color: #EF4444; }
.kv-sm-stat-blue .kv-sm-stat-icon { background: rgba(34,186,255,.1); color: #22BAFF; }
.kv-sm-stat-orange .kv-sm-stat-icon { background: rgba(249,115,22,.1); color: #F97316; }
.kv-sm-stat-green .kv-sm-stat-icon { background: rgba(16,185,129,.1); color: #10B981; }
.kv-sm-stat-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
}
.kv-sm-stat-lbl {
  font-size: 9px;
  color: var(--t3);
  font-weight: 500;
}
.kv-sm-stat-time {
  font-size: 8px;
  color: var(--t4);
  font-weight: 400;
}
.kv-sm-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border2);
  flex-shrink: 0;
}

/* Custom Fields (.kv-cf-*) + Completion Alerts (.kv-cmp-*) blocks REMOVED.
   See kuvrr-global.css sections "4. CUSTOM FIELDS" (.kvgl-cf-*) and
   "5. COMPLETION ALERTS" (.kvgl-cmp-*) — same visual spec, kvgl-* prefix. */
.selectize-dropdown, .selectize-input, .selectize-input input {
  font-size:9px !important;
}
/* ── Toast Notifications (replaces native alert()) ── */
#kv-toast-container {
  position: fixed;
  top: 68px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.kv-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid;
  min-width: 260px;
  max-width: 380px;
  font-family: var(--f, 'Roboto', sans-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  pointer-events: all;
  animation: kvToastIn .2s ease;
}
.kv-toast-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.kv-toast-msg  { flex: 1; white-space: pre-wrap; }
.kv-toast-close { font-size: 15px; cursor: pointer; opacity: .55; flex-shrink: 0; line-height: 1; margin-top: -1px; }
.kv-toast-close:hover { opacity: 1; }
.kv-toast-error   { background: #FEE2E2; border-color: rgba(239,68,68,.35);   color: #991B1B; }
.kv-toast-success { background: #D1FAE5; border-color: rgba(16,185,129,.35);  color: #065F46; }
.kv-toast-warning { background: #FEF3C7; border-color: rgba(245,158,11,.35);  color: #92400E; }
.kv-toast-info    { background: #EFF6FF; border-color: rgba(34,186,255,.35);  color: #1D4ED8; }
@keyframes kvToastIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Mass Notification Sender ─────────────────────────────────────── */
.kv-mn-subtitle {
  font-family: var(--f, 'Roboto', sans-serif);
  font-size: 11px;
  font-weight: 400;
  color: var(--t3, #6B7280);
  margin: -4px 0 14px 0;
}
.kv-mn-step .kv-edit-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kv-mn-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 99px;
  background: var(--blue, #22BAFF);
  color: #FFF;
  font-size: 10px;
  font-weight: 700;
  flex: 0 0 auto;
}
.kv-mn-step-status {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
  color: #10B981;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kv-mn-step-status i { font-size: 11px; }
.kv-mn-step-locked { opacity: .65; }
.kv-mn-step-locked .kv-edit-card-body { position: relative; }
.kv-mn-step-locked-hint {
  background: #FEF3C7;
  border: 1px solid rgba(245,158,11,.4);
  color: #92400E;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kv-mn-step-done .kv-mn-step-num { background: #10B981; }

.kv-dropzone {
  border: 1.5px dashed #C4C9D4;
  border-radius: 8px;
  padding: 36px 20px;
  text-align: center;
  background: #FAFBFC;
  cursor: pointer;
  transition: all .15s ease;
  font-family: var(--f, 'Roboto', sans-serif);
}
.kv-dropzone:hover,
.kv-dropzone-active {
  border-color: var(--blue, #22BAFF);
  background: #F0F7FF;
}
.kv-dropzone-has-file { border-style: solid; border-color: #10B981; background: #ECFDF5; }
.kv-dropzone-icon {
  font-size: 28px;
  color: #9CA3AF;
  margin-bottom: 10px;
  display: block;
}
.kv-dropzone-text {
  font-size: 11px;
  font-weight: 500;
  color: var(--t1, #0F1923);
  margin-bottom: 6px;
}
.kv-dropzone-text a {
  color: var(--blue, #22BAFF);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.kv-dropzone-clear {
  margin-left: 10px;
  color: #EF4444;
  font-size: 9px;
  font-weight: 600;
}
.kv-dropzone-hint {
  font-size: 9px;
  color: var(--t4, #9CA3AF);
  font-weight: 400;
  margin-top: 8px;
  line-height: 1.5;
}

.kv-mn-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 4px 0 14px 0;
}
.kv-mn-summary-cell {
  background: #F0F7FF;
  border: 1px solid #E1E5EA;
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
  font-family: var(--f, 'Roboto', sans-serif);
}
.kv-mn-summary-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy, #213142);
  line-height: 1.2;
}
.kv-mn-summary-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--t3, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.kv-mn-test-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--t2, #1F2937);
  margin: 4px 0 8px 0;
}
@media (max-width: 720px) {
  .kv-mn-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Live Stream / Two-Way Video Call modal (#liveStreamModal)
   Used by both the incident detail page (incident_detail_v2.html)
   and the standalone Video Call list (smarttrack/media_invite.list.html).
   Hoisted from inline styles so both pages render identically.
   ============================================================ */
@keyframes livePulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
@keyframes liveRingPulse { 0%{transform:scale(1);opacity:1;} 50%{transform:scale(1.15);opacity:0.7;} 100%{transform:scale(1);opacity:1;} }
@keyframes liveRingDotPulse { 0%{box-shadow:0 0 0 0 rgba(220,38,38,0.6);} 70%{box-shadow:0 0 0 12px rgba(220,38,38,0);} 0%,100%{} }

#liveStreamModal #liveStreamContent {
    display:flex; flex-direction:column; max-height:calc(100vh - 48px);
    border-radius:10px; overflow:hidden; border:1px solid #2a2a2a;
    background:#000; box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
#liveStreamModal .kv-ls-header {
    position:relative; flex:0 0 auto;
    background:#1a1a1a; border-bottom:1px solid #2a2a2a;
    padding:14px 56px 14px 18px;
    display:flex; align-items:center;
}
#liveStreamModal .kv-ls-title { display:flex; align-items:center; gap:10px; color:#fff; font-size:14px; font-weight:600; font-family:var(--f); }
#liveStreamModal .kv-ls-live-indicator { display:inline-flex; align-items:center; gap:6px; }
#liveStreamModal .kv-ls-live-dot { width:9px; height:9px; background:#dc2626; border-radius:50%; display:inline-block; animation:livePulse 1.5s infinite; }
#liveStreamModal .kv-ls-live-text { color:#dc2626; font-weight:700; font-size:12px; letter-spacing:0.04em; }
#liveStreamModal .kv-ls-name { color:#fff; }
#liveStreamModal .kv-ls-close {
    position:absolute; top:50%; right:14px; transform:translateY(-50%);
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,0.08); border:none; color:#fff;
    font-size:22px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease;
}
#liveStreamModal .kv-ls-close:hover { background:rgba(255,255,255,0.18); }
#liveStreamModal .kv-ls-body {
    background:#000; flex:1 1 auto; min-height:520px;
    position:relative; padding:0 0 18px 0;
}
#liveStreamModal .kv-ls-state {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    text-align:center; color:#fff; z-index:1;
}
#liveStreamModal .kv-ls-player { width:100%; height:100%; min-height:520px; }
#live-stream-player .player { width:100% !important; height:520px !important; }
#live-stream-player .agora_video_player { width:100% !important; height:100% !important; object-fit:contain !important; }

#liveStreamModal .kv-ls-watermark {
    /* left/top/right are recomputed by _positionLiveStreamWatermark() so the
       logo + timestamp sit on the rendered video edges (object-fit:contain
       letterboxes when the source aspect differs from the container). */
    position:absolute; top:10px; left:10px; right:10px; z-index:6;
    display:flex; align-items:center; justify-content:space-between;
    pointer-events:none;
}
#liveStreamModal .kv-ls-watermark-logo {
    height:26px; width:auto;
    background:rgba(0,0,0,0.45); padding:3px 8px; border-radius:5px;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
#liveStreamModal .kv-ls-watermark-time {
    font-family:var(--f); font-size:11px; font-weight:600; color:#fff;
    background:rgba(0,0,0,0.55); padding:5px 10px; border-radius:5px;
    letter-spacing:0.04em; white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,0.6);
}

#liveStreamModal .kv-ls-bookmark-popover {
    position:absolute; left:50%; bottom:78px; transform:translateX(-50%);
    z-index:30;
    background:rgba(15,25,35,0.94); border:1px solid rgba(34,186,255,0.55);
    border-radius:8px; padding:8px 10px;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
    max-width:560px; width:calc(100% - 32px);
    font-family:var(--f);
}
#liveStreamModal .kv-ls-bookmark-row {
    display:flex; align-items:center; gap:8px;
}
#liveStreamModal .kv-ls-bookmark-icon {
    color:#ef4444; font-size:14px;
}
#liveStreamModal .kv-ls-bookmark-when {
    font-size:11px; font-weight:700; color:#fff;
    background:rgba(34,186,255,0.20); padding:3px 8px; border-radius:99px;
    min-width:48px; text-align:center;
}
#liveStreamModal .kv-ls-bookmark-input {
    flex:1 1 auto; min-width:0;
    background:rgba(255,255,255,0.12); color:#fff;
    border:1px solid rgba(255,255,255,0.18); border-radius:5px;
    padding:6px 10px; font-size:11px; font-family:var(--f);
    outline:none;
}
#liveStreamModal .kv-ls-bookmark-input:focus {
    border-color:var(--blue); box-shadow:0 0 0 2px rgba(34,186,255,0.25);
}
#liveStreamModal .kv-ls-bookmark-input::placeholder { color:rgba(255,255,255,0.45); }
#liveStreamModal .kv-ls-bookmark-save {
    background:var(--blue); color:#fff; border:none; border-radius:5px;
    padding:6px 14px; font-size:10px; font-weight:700; cursor:pointer;
    font-family:var(--f); letter-spacing:0.03em;
}
#liveStreamModal .kv-ls-bookmark-save:hover { background:#4AC8FF; }
#liveStreamModal .kv-ls-bookmark-save:disabled { opacity:0.55; cursor:not-allowed; }
#liveStreamModal .kv-ls-bookmark-cancel {
    background:transparent; border:none; color:rgba(255,255,255,0.75);
    font-size:18px; line-height:1; cursor:pointer; padding:2px 6px;
}
#liveStreamModal .kv-ls-bookmark-cancel:hover { color:#fff; }
.kv-mi-bm-link:hover { background:rgba(34,186,255,0.08) !important; }
.kv-mi-bm-link.active { background:rgba(34,186,255,0.18) !important; }

/* ============================================================
   Submitted Media modal — redesign
   ============================================================ */
.kv-invite-submissions-modal { max-width:980px !important; width:96vw !important; }
.kv-invite-submissions-modal .kv-modal-body { padding:16px 18px; }

/* Call summary strip at the top of the modal body */
.kv-mi-summary {
    background:linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
    border:1px solid #c7e3f8;
    border-radius:10px;
    padding:12px 16px;
    margin-bottom:14px;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    font-family:var(--f);
}
.kv-mi-summary-icon {
    width:36px; height:36px; border-radius:50%;
    background:var(--blue); color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:15px; flex:0 0 auto;
}
.kv-mi-summary-main { flex:1 1 200px; min-width:200px; }
.kv-mi-summary-title {
    font-size:13px; font-weight:700; color:#111827;
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.kv-mi-summary-sub {
    font-size:11px; color:#6B7280; margin-top:3px;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.kv-mi-summary-sub i { color:#9CA3AF; margin-right:3px; }
.kv-mi-summary-chip {
    display:inline-flex; align-items:center; gap:4px;
    font-size:9px; font-weight:700; letter-spacing:0.04em;
    padding:2px 8px; border-radius:99px;
}
.kv-mi-summary-chip.twoway { background:rgba(34,186,255,0.18); color:#0f6fa3; }
.kv-mi-summary-chip.oneway { background:rgba(107,114,128,0.15); color:#374151; }

/* Tighter category pills */
.kv-mi-cat-bar {
    display:flex; gap:6px;
    border-bottom:1px solid #E1E5EA;
    padding:0 0 10px;
    margin-bottom:14px;
    flex-wrap:wrap;
}
.kv-mi-cat-tab {
    background:transparent; color:#213142;
    border:1px solid #E1E5EA; border-radius:99px;
    padding:4px 11px;
    font-size:10px; font-weight:700;
    cursor:pointer; font-family:var(--f);
    display:inline-flex; align-items:center; gap:5px;
    letter-spacing:0.03em;
    transition:all .15s ease;
}
.kv-mi-cat-tab:hover { border-color:var(--blue); color:var(--blue); }
.kv-mi-cat-tab.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.kv-mi-cat-tab i { font-size:10px; }
.kv-mi-cat-tab .kv-mi-cat-count {
    background:#F0F7FF; color:#213142;
    padding:1px 6px; border-radius:99px;
    font-size:9px; font-weight:700;
}
.kv-mi-cat-tab.active .kv-mi-cat-count { background:rgba(255,255,255,0.25); color:#fff; }

/* Submission cards — horizontal layout on wide screens, stacked on narrow */
.kv-mi-grid { display:flex; flex-direction:column; gap:14px; }
.kv-mi-card {
    background:#fff; border:1px solid #E1E5EA; border-radius:10px;
    overflow:hidden;
    display:grid; grid-template-columns:minmax(0, 360px) minmax(0, 1fr);
    font-family:var(--f);
    transition:box-shadow .15s ease;
}
.kv-mi-card:hover { box-shadow:0 4px 14px rgba(0,0,0,0.06); }
@media (max-width: 720px) {
    .kv-mi-card { grid-template-columns:1fr; }
}
.kv-mi-card-media {
    background:#000; display:flex; align-items:center; justify-content:center;
    min-height:200px;
}
.kv-mi-card-media video,
.kv-mi-card-media img {
    width:100%; height:100%; max-height:280px;
    object-fit:contain; display:block;
}
.kv-mi-card-media .kv-mi-audio-wrap {
    width:100%; padding:20px 16px; text-align:center; color:#fff;
}
.kv-mi-card-media .kv-mi-audio-wrap i {
    font-size:32px; color:#22baff; margin-bottom:8px; display:block;
}
.kv-mi-card-media .kv-mi-audio-wrap audio { width:100%; margin-top:8px; }
.kv-mi-card-media .kv-mi-file-fallback {
    color:#fff; display:flex; flex-direction:column; align-items:center; gap:8px;
    font-size:11px;
}
.kv-mi-card-media .kv-mi-file-fallback i {
    font-size:38px; color:#22baff;
}
/* Recording player overlay: brand logo (top-left) + ticking timestamp
   (top-right) drawn on the player at playback time, so the logo + timestamp
   show in review without any server-side burn-in. Scoped tighter than the base
   .kv-mi-card-media img rule so the logo isn't stretched to full width. */
.kv-mi-card-media .kv-mi-vid-wrap {
    position:relative; width:100%;
    display:flex; align-items:center; justify-content:center;
}
.kv-mi-card-media .kv-mi-vid-wrap video {
    width:100%; height:100%; max-height:280px; object-fit:contain; display:block;
}
.kv-mi-card-media .kv-mi-vid-logo {
    position:absolute; top:8px; left:8px; z-index:2;
    width:auto; height:22px; max-height:22px; object-fit:contain;
    pointer-events:none; opacity:.92;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.kv-mi-card-media .kv-mi-vid-ts {
    position:absolute; top:8px; right:8px; z-index:2;
    background:rgba(0,0,0,.6); color:#fff;
    font:600 11px/1.2 var(--f, Arial, sans-serif); letter-spacing:.02em;
    padding:3px 8px; border-radius:4px;
    pointer-events:none; white-space:nowrap;
}

.kv-mi-card-body {
    padding:12px 14px;
    display:flex; flex-direction:column; gap:8px;
    min-width:0;
}
.kv-mi-card-title {
    font-size:13px; font-weight:700; color:#111827;
    display:flex; align-items:center; gap:6px;
}
.kv-mi-card-title i { color:#22baff; font-size:12px; }
.kv-mi-card-meta {
    display:flex; gap:10px; flex-wrap:wrap;
    font-size:10px; color:#6B7280;
}
.kv-mi-card-meta span { display:inline-flex; align-items:center; gap:4px; }
.kv-mi-card-meta i { color:#9CA3AF; font-size:10px; }
.kv-mi-card-note {
    background:#f0f7ff; border-left:3px solid #22baff;
    padding:6px 10px; border-radius:4px;
    font-size:11px; color:#213142;
}
.kv-mi-card-note i { color:#22baff; margin-right:4px; }
.kv-mi-card-loc {
    background:#f0fdf4; border-left:3px solid #28a745;
    padding:6px 10px; border-radius:4px;
    font-size:11px; color:#213142;
}
.kv-mi-card-loc i.fa-map-marker { color:#dc2626; margin-right:4px; }
.kv-mi-card-loc a {
    color:#22baff; font-size:10px; margin-left:6px; text-decoration:none;
}
.kv-mi-card-fname {
    font-family:Consolas, Monaco, monospace;
    font-size:10px; color:#9CA3AF;
    word-break:break-all;
    background:#f8f9fa; padding:4px 8px; border-radius:4px;
    border:1px solid #ECEEF2;
}
.kv-mi-card-bookmarks {
    background:#fef3c7; border-left:3px solid #f59e0b;
    padding:8px 10px; border-radius:4px;
}
.kv-mi-card-bookmarks-head {
    font-size:10px; font-weight:700; color:#92400e;
    text-transform:uppercase; letter-spacing:0.04em;
    margin-bottom:5px;
}
.kv-mi-card-bookmarks-head i { color:#ef4444; margin-right:5px; }

#liveStreamModal .kv-ls-bookmark-toast {
    position:absolute; left:50%; bottom:140px; transform:translateX(-50%);
    z-index:31;
    background:rgba(16,185,129,0.95); color:#fff;
    padding:6px 14px; border-radius:99px;
    font-family:var(--f); font-size:10px; font-weight:700; letter-spacing:0.04em;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
    pointer-events:none;
}

#liveStreamModal .kv-ls-local-player {
    position:absolute; top:18px; right:18px; z-index:50;
    width:160px; height:100px;
    background:#1a1a1a; border:2px solid rgba(34,186,255,0.7);
    border-radius:8px; overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
    cursor:move;
}
#liveStreamModal .kv-ls-local-player .agora_video_player {
    width:100% !important; height:100% !important; object-fit:cover !important;
}
#liveStreamModal .kv-ls-local-label {
    position:absolute; bottom:4px; left:6px; z-index:8;
    font-family:var(--f); font-size:9px; font-weight:700; color:#fff;
    background:rgba(0,0,0,0.55); padding:2px 6px; border-radius:99px;
    display:inline-flex; align-items:center; gap:4px;
}
#liveStreamModal .kv-ls-local-label i { font-size:9px; color:var(--blue); }
#liveStreamModal .kv-ls-local-camoff {
    position:absolute; inset:0; z-index:7;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#111; gap:5px;
    border-radius:6px;
}
#liveStreamModal .kv-ls-local-camoff i {
    font-size:20px; color:rgba(255,255,255,0.3);
}
#liveStreamModal .kv-ls-local-camoff span {
    font-family:var(--f); font-size:9px; font-weight:600;
    color:rgba(255,255,255,0.35); text-transform:uppercase; letter-spacing:0.05em;
}

#liveStreamModal .kv-ls-timer {
    font-family:var(--f); font-size:11px; font-weight:600; color:#fff;
    background:rgba(255,255,255,0.08); padding:3px 10px; border-radius:99px;
    margin-left:6px; letter-spacing:0.04em;
}
#liveStreamModal .kv-ls-meta {
    position:absolute; top:50%; right:56px; transform:translateY(-50%);
    display:flex; align-items:center; gap:8px;
}
#liveStreamModal .kv-ls-quality {
    display:inline-flex; align-items:flex-end; gap:2px; height:14px;
}
#liveStreamModal .kv-ls-q-bar {
    width:3px; background:rgba(255,255,255,0.25); border-radius:1px;
    transition:background .15s ease, height .15s ease;
}
#liveStreamModal .kv-ls-q-bar:nth-child(1) { height:4px; }
#liveStreamModal .kv-ls-q-bar:nth-child(2) { height:7px; }
#liveStreamModal .kv-ls-q-bar:nth-child(3) { height:10px; }
#liveStreamModal .kv-ls-q-bar:nth-child(4) { height:13px; }
#liveStreamModal .kv-ls-quality.q-good .kv-ls-q-bar { background:#10B981; }
#liveStreamModal .kv-ls-quality.q-fair .kv-ls-q-bar:nth-child(-n+3) { background:#F59E0B; }
#liveStreamModal .kv-ls-quality.q-poor .kv-ls-q-bar:nth-child(-n+1) { background:#EF4444; }

#liveStreamModal .kv-ls-two-way-controls {
    position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:5;
    display:flex; gap:10px; align-items:center;
    background:rgba(0,0,0,0.6); padding:10px 16px; border-radius:99px;
    backdrop-filter:blur(6px);
}
#liveStreamModal .kv-ls-two-way-only {
    display:flex; gap:10px; align-items:center;
}

/* Sticky in-modal notice for browser-blocked features (HTTPS missing,
   permission denied, device busy, autoplay blocked, etc.). Sits at the top of
   the modal body so it can't be missed; persists until dismissed or resolved. */
#liveStreamModal .kv-ls-block-notice {
    position:absolute; top:14px; left:14px; right:14px; z-index:6;
    display:flex; gap:12px; align-items:flex-start;
    background:rgba(254, 226, 226, 0.97);
    border:1px solid rgba(239, 68, 68, 0.45);
    color:#7F1D1D;
    border-radius:8px;
    padding:11px 14px;
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
    font-family:var(--f);
}
#liveStreamModal .kv-ls-block-notice-icon {
    font-size:18px; color:#DC2626; flex-shrink:0; margin-top:2px;
}
#liveStreamModal .kv-ls-block-notice-body { flex:1; min-width:0; }
#liveStreamModal .kv-ls-block-notice-title {
    font-size:11px; font-weight:700; letter-spacing:0.04em;
    text-transform:uppercase; color:#991B1B; margin-bottom:4px;
}
#liveStreamModal .kv-ls-block-notice-msg {
    font-size:12px; font-weight:500; line-height:1.4; color:#7F1D1D;
}
#liveStreamModal .kv-ls-block-notice-hint {
    font-size:11px; font-weight:400; line-height:1.4; color:#991B1B;
    margin-top:6px; opacity:0.85;
}
#liveStreamModal .kv-ls-block-notice-close {
    background:transparent; border:none; color:#7F1D1D;
    font-size:20px; line-height:1; padding:0 4px; cursor:pointer;
    flex-shrink:0; opacity:0.6;
}
#liveStreamModal .kv-ls-block-notice-close:hover { opacity:1; }

#liveStreamModal .kv-ls-ctrl-btn {
    min-width:48px; height:48px; padding:4px 10px;
    border-radius:24px;
    background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.18);
    color:#fff; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    font-family:var(--f);
    transition:all .12s ease;
}
#liveStreamModal .kv-ls-ctrl-btn:hover { background:rgba(255,255,255,0.24); }
#liveStreamModal .kv-ls-ctrl-btn:disabled { opacity:0.45; cursor:not-allowed; }
#liveStreamModal .kv-ls-ctrl-btn.off {
    background:#EF4444; border-color:#EF4444;
}
#liveStreamModal .kv-ls-ctrl-btn i { font-size:14px; }
#liveStreamModal .kv-ls-ctrl-lbl {
    font-size:9px; font-weight:600; line-height:1; letter-spacing:0.02em;
}
#liveStreamModal .kv-ls-ctrl-end {
    background:#EF4444; border-color:#EF4444;
    min-width:64px;
}
#liveStreamModal .kv-ls-ctrl-end:hover { background:#F87171; border-color:#F87171; }

#liveStreamModal.kv-ls-fullscreen .modal-dialog {
    max-width:100% !important; width:100% !important;
    margin:0 !important; height:100vh !important;
}
#liveStreamModal.kv-ls-fullscreen .modal-content { height:100vh; border-radius:0; }
#liveStreamModal.kv-ls-fullscreen .kv-ls-body { min-height:calc(100vh - 60px); }
#liveStreamModal.kv-ls-fullscreen .kv-ls-player { min-height:calc(100vh - 60px); }
#liveStreamModal.kv-ls-fullscreen #live-stream-player .player { height:calc(100vh - 60px) !important; }

/* ────────────────────────────────────────────────
   Invite Details & Activity popup (kv-modal variant)
   Wider container + scrollable body so the long activity
   timeline doesn't overflow off-screen.
   ──────────────────────────────────────────────── */
.kv-modal.kv-invite-detail-modal {
    width: 640px;
    max-width: 92vw;
    max-height: 86vh;
    font-family: var(--f);
}
.kv-modal.kv-invite-detail-modal .kv-modal-head {
    background: var(--navy, #213142);
}
.kv-modal.kv-invite-detail-modal .kv-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
    background: var(--page, #F3F5F8);
}
.kv-modal.kv-invite-detail-modal .kv-id-section {
    margin-bottom: 12px;
}
/* Activity log timeline */
.kv-modal.kv-invite-detail-modal .kv-id-timeline {
    position: relative;
    padding-left: 26px;
    font-family: var(--f);
}
.kv-modal.kv-invite-detail-modal .kv-id-timeline::before {
    content: '';
    position: absolute;
    left: 9px; top: 4px; bottom: 4px;
    width: 2px;
    background: var(--border, #E1E5EA);
}
.kv-modal.kv-invite-detail-modal .kv-id-tl-row {
    position: relative;
    padding: 6px 0 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.kv-modal.kv-invite-detail-modal .kv-id-tl-dot {
    position: absolute;
    left: -22px; top: 9px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--t3, #6B7280);
    display: flex; align-items: center; justify-content: center;
}
.kv-modal.kv-invite-detail-modal .kv-id-tl-dot i { font-size: 9px; }
.kv-modal.kv-invite-detail-modal .kv-id-tl-desc {
    font-family: var(--f);
    font-size: 9px;
    font-weight: 500;
    color: var(--t1, #0F1923);
}
.kv-modal.kv-invite-detail-modal .kv-id-tl-time {
    font-family: var(--f);
    font-size: 9px;
    font-weight: 400;
    color: var(--t3, #6B7280);
    white-space: nowrap;
}
.kv-modal.kv-invite-detail-modal .kv-id-empty,
.kv-modal.kv-invite-detail-modal .kv-id-error {
    text-align: center;
    padding: 16px;
    font-family: var(--f);
    font-size: 9px;
    color: var(--t3, #6B7280);
}
.kv-modal.kv-invite-detail-modal .kv-id-error { color: #EF4444; }
.kv-modal.kv-invite-detail-modal .kv-id-loader {
    text-align: center;
    padding: 16px;
}
.kv-modal.kv-invite-detail-modal .kv-id-loader i { color: var(--blue, #22BAFF); font-size: 18px; }
/* Device chips */
.kv-modal.kv-invite-detail-modal .kv-id-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px;
}
.kv-modal.kv-invite-detail-modal .kv-id-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 99px;
    font-family: var(--f);
    font-size: 9px;
    font-weight: 500;
    background: var(--page, #F3F5F8);
    color: var(--t2, #1F2937);
    border: 1px solid var(--border, #E1E5EA);
}
.kv-modal.kv-invite-detail-modal .kv-id-ua {
    font-family: var(--f);
    font-size: 9px;
    color: var(--t3, #6B7280);
    word-break: break-all;
    padding: 6px 8px;
    background: var(--page, #F3F5F8);
    border-radius: 5px;
    border: 1px solid var(--border2, #ECEEF2);
}
/* Status pill inside the field value */
.kv-modal.kv-invite-detail-modal .kv-id-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--f);
    font-size: 9px;
    font-weight: 600;
}
/* "View Submitted Media" inline link */
.kv-modal.kv-invite-detail-modal .kv-id-link {
    color: var(--blue, #22BAFF);
    font-family: var(--f);
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}
.kv-modal.kv-invite-detail-modal .kv-id-link:hover { text-decoration: underline; }

/* ────────────────────────────────────────────────
   Submitted Media popup (kv-modal variant) — wider
   so the grid of media tiles fits side-by-side.
   ──────────────────────────────────────────────── */
.kv-modal.kv-invite-submissions-modal {
    width: 760px;
    max-width: 92vw;
    max-height: 86vh;
    font-family: var(--f);
}
.kv-modal.kv-invite-submissions-modal .kv-modal-head {
    background: var(--navy, #213142);
}
.kv-modal.kv-invite-submissions-modal .kv-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px;
}

/* Fullscreen sensor-detail modal. Both the standalone shipment-detail page
   and the incident-detail-v2 page share .kv-sm-dialog, so the .kv-sm-dialog-fs
   modifier covers both. The chart wrap is bumped to consume the freed
   vertical space so users actually get a usable zoomed-out view. */
.kv-sm-dialog-fs,
body.kv-incident-page .kv-sm-dialog-fs {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh;
    max-height: 100vh !important;
    border-radius: 0 !important;
}
.kv-sm-dialog-fs .kv-sm-chart-wrap > div,
body.kv-incident-page .kv-sm-dialog-fs .kv-sm-chart-wrap > div {
    height: calc(100vh - 300px) !important;
    min-height: 400px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   C&C Mobile App Config (Mock) — split builder + live phone preview
   Page: organization/app_cc_config.mock.html  (kv-ccfg-* / kv-phone / kv-m*)
   ═══════════════════════════════════════════════════════════════════════════ */
.kv-ccfg-wrap {
  display: grid;
  grid-template-columns: minmax(0,1fr) 372px;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
}
@media (max-width: 1100px) { .kv-ccfg-wrap { grid-template-columns: 1fr; } }

/* ── Builder (left) ── */
.kv-ccfg-builder { display: flex; flex-direction: column; gap: 12px; }

.kv-ccfg-sec {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh);
  overflow: hidden;
}
.kv-ccfg-sec.is-off { opacity: .62; }

.kv-ccfg-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border2);
  background: #FBFCFE;
}
.kv-ccfg-sec.is-off .kv-ccfg-sec-head { background: #fff; }

.kv-ccfg-title-inp {
  flex: 1;
  min-width: 0;
  font-family: var(--f);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 4px 8px;
  background: transparent;
  outline: none;
  transition: all .12s ease;
}
.kv-ccfg-title-inp:hover { border-color: var(--border); }
.kv-ccfg-title-inp:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(34,186,255,.1); }

.kv-ccfg-accent {
  font-family: var(--f);
  font-size: 9px;
  font-weight: 600;
  color: var(--t2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 7px;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.kv-ccfg-accent-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.kv-ccfg-collapse {
  border: none; background: transparent; cursor: pointer;
  color: var(--t3); font-size: 12px; padding: 4px;
  transition: transform .15s ease;
}
.kv-ccfg-sec.is-collapsed .kv-ccfg-collapse { transform: rotate(-90deg); }

.kv-ccfg-sec-sub {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border2);
}
.kv-ccfg-sec-sub label {
  font-size: 9px; font-weight: 600; color: var(--t3);
  text-transform: uppercase; letter-spacing: .04em;
  flex: 0 0 auto;
}
.kv-ccfg-link-inp {
  font-family: var(--f); font-size: 9px; color: var(--blue); font-weight: 600;
  border: 1px solid var(--border); border-radius: 5px;
  padding: 5px 8px; max-width: 160px; outline: none;
}
.kv-ccfg-link-inp:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34,186,255,.1); }

.kv-ccfg-sec.is-collapsed .kv-ccfg-sec-sub,
.kv-ccfg-sec.is-collapsed .kv-ccfg-tiles { display: none; }

.kv-ccfg-tiles { padding: 6px 8px; }
.kv-ccfg-tile-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 6px;
  transition: background .12s ease;
}
.kv-ccfg-tile-row:hover { background: #F0F7FF; }
.kv-ccfg-tile-ic {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: #EAF6FF; color: #046BD4; font-size: 12px;
}
/* Action-bar SOS swatch: red badge with fitted "SOS" text (mirrors the phone
   preview's elevated SOS button). */
.kv-ccfg-tile-ic.is-sos { background: #FF6E72; color: #fff; border-radius: 50%; }
.kv-ccfg-tile-ic .kv-sos-txt { font: 800 8px/1 var(--f); letter-spacing: .3px; }
.kv-ccfg-tile-lbl {
  flex: 1; min-width: 0;
  font-family: var(--f); font-size: 9px; color: var(--t1);
  border: 1px solid transparent; border-radius: 5px;
  padding: 4px 7px; background: transparent; outline: none;
  transition: all .12s ease;
}
.kv-ccfg-tile-lbl:hover { border-color: var(--border); }
.kv-ccfg-tile-lbl:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(34,186,255,.1); }
.kv-ccfg-tile-key { font-size: 8px; color: var(--t4); flex: 0 0 auto; font-family: monospace; }

/* Per-item "helper text" (end-user subtitle) input in the builder rows. */
.kv-ccfg-tile-helper {
  flex: 1; min-width: 0;
  font-family: var(--f); font-size: 9px; font-style: italic; color: var(--t3);
  border: 1px solid transparent; border-radius: 5px;
  padding: 4px 7px; background: transparent; outline: none;
  transition: all .12s ease;
}
.kv-ccfg-tile-helper::placeholder { color: var(--t4); font-style: italic; }
.kv-ccfg-tile-helper:hover { border-color: var(--border); }
.kv-ccfg-tile-helper:focus { border-color: var(--blue); background: #fff; font-style: normal; box-shadow: 0 0 0 3px rgba(34,186,255,.1); }
.kv-ccfg-tile-curated .kv-ccfg-tile-helper { background: transparent; border-color: transparent; cursor: default; }

/* Helper-text subtitle under labels in the phone preview. */
.kv-mtile-sub, .kv-np-tile-sub { display: block; font-size: 9px; font-weight: 400; color: var(--t3); line-height: 1.1; margin-top: 1px; text-align: center; }
.kv-mbar-sub, .kv-np-nav-sub { display: block; font-size: 8px; font-weight: 400; color: var(--t3); line-height: 1; margin-top: 1px; }
.kv-dw-sub-lbl { display: block; }
.kv-dw-help { display: block; font-size: 10px; font-weight: 400; color: var(--t3); margin-top: 1px; }

/* ── Toggle switch (builder) ── */
.kv-ccfg-switch { position: relative; display: inline-block; width: 30px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.kv-ccfg-switch input { opacity: 0; width: 0; height: 0; }
.kv-ccfg-slider {
  position: absolute; inset: 0; background: #CBD2DB; border-radius: 99px; transition: .18s;
}
.kv-ccfg-slider::before {
  content: ""; position: absolute; height: 12px; width: 12px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: .18s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.kv-ccfg-switch input:checked + .kv-ccfg-slider { background: var(--blue); }
.kv-ccfg-switch input:checked + .kv-ccfg-slider::before { transform: translateX(14px); }

/* ── Phone preview (right) ── */
.kv-ccfg-preview-pane { position: sticky; top: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kv-ccfg-preview-cap { font-size: 9px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: .08em; }

.kv-phone {
  width: 340px; height: 700px;
  background: #0C1520;
  border-radius: 38px;
  padding: 12px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.04) inset;
  position: relative;
}
.kv-phone::before {
  content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 22px; background: #0C1520; border-radius: 0 0 14px 14px; z-index: 3;
}
.kv-phone-screen {
  width: 100%; height: 100%;
  background: #E9ECF1;
  border-radius: 28px;
  overflow: hidden;
  padding: 0;
  position: relative;
  display: flex; flex-direction: column;
}
.kv-phone-screen::-webkit-scrollbar { width: 0; }

/* Scrollable middle (the icon cards) + pinned bottom action bar -- shared by
   both preview variants: only .kv-phone-scroll scrolls, .kv-phone-foot stays. */
.kv-phone-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 12px 14px; }
.kv-phone-scroll::-webkit-scrollbar { width: 0; }
.kv-phone-foot { flex-shrink: 0; }
.kv-phone.is-classic .kv-phone-foot { padding: 4px 12px 12px; }

/* ── View switch (Classic / New) ───────────────────────────────────────── */
.kv-ccfg-view-switch {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--page); border: 1px solid var(--border); border-radius: 99px;
}
.kv-ccfg-view-btn {
  font: 600 9px/1 var(--f); color: var(--t3);
  border: 0; background: transparent; cursor: pointer;
  padding: 5px 14px; border-radius: 99px; letter-spacing: .03em;
  text-transform: uppercase; transition: all .12s ease;
}
.kv-ccfg-view-btn:hover { color: var(--navy); }
.kv-ccfg-view-btn.is-active { background: var(--blue); color: #fff; box-shadow: 0 1px 3px rgba(34,186,255,.35); }

.kv-msec {
  background: #F6F8FA;
  border-radius: 14px;
  padding: 12px 14px 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.kv-msec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid #E1E5EA;
}
.kv-msec-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.kv-msec-link { font-size: 11px; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: .02em; }

/* AV ALERTS runtime building (controller) chip in the phone preview -- matches
   the reference design's .bldg-chip. */
.kv-mbldg, .kv-np-bldg {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(34, 186, 255, .13); color: #046BD4;
  border: 1px solid rgba(34, 186, 255, .25); border-radius: 11px;
  padding: 6px 10px; margin: 0 0 12px;
  font-size: 12px; font-weight: 600; max-width: 100%;
}
.kv-np-bldg { margin: 0 8px 12px; }
.kv-mbldg > span, .kv-np-bldg > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-mbldg i.fa-building, .kv-np-bldg i.fa-building { font-size: 13px; }
.kv-mbldg i.fa-chevron-down, .kv-np-bldg i.fa-chevron-down { font-size: 10px; opacity: .7; margin-left: auto; }

.kv-mtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 6px; }
.kv-mtile { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.kv-mtile-ic {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #046BD4;
  background: #fff; border: 1.5px solid #CFE6F6;
}
.kv-mtile-lbl { font-size: 11px; font-weight: 500; color: var(--navy); line-height: 1.1; }

/* Action bar */
.kv-mbar {
  display: flex; align-items: flex-end; justify-content: space-around;
  background: #fff; border-radius: 20px; padding: 10px 8px;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06); margin-top: 4px;
}
.kv-mbar-item { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.kv-mbar-ic { font-size: 18px; color: #1F6FB2; }
.kv-mbar-lbl { font-size: 10px; font-weight: 500; color: var(--navy); }
.kv-mbar-item.is-sos .kv-mbar-ic {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  margin-top: -22px; box-shadow: 0 6px 14px rgba(239,68,68,.45);
}
.kv-mbar-item.is-sos .kv-mbar-lbl { color: var(--red); font-weight: 700; }
/* "SOS" text inside the elevated red circle (in place of an icon glyph). */
.kv-sos-txt { font: 800 15px/1 var(--f); letter-spacing: .5px; color: inherit; }

.kv-phone-empty { text-align: center; color: var(--t4); font-size: 11px; padding: 60px 20px; }

/* ══ New preview template (V1 prototype) — .kv-phone.is-new ══════════════ */
.kv-phone.is-new .kv-phone-screen { background: #F2F4F7; }

/* iOS status bar */
.kv-np-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 2px; flex-shrink: 0;
  font: 600 12px/1 var(--f); color: var(--navy);
}
.kv-np-status-ic { display: flex; gap: 5px; align-items: center; font-size: 11px; }

/* App header: avatar · wordmark · bell */
.kv-np-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 6px; flex-shrink: 0; position: relative;
}
.kv-np-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--f); box-shadow: 0 2px 8px rgba(33,49,66,.25);
}
.kv-np-wordmark {
  position: absolute; left: 50%; transform: translateX(-50%);
  font: 700 22px/1 var(--f); color: var(--navy); letter-spacing: -.5px;
}
.kv-np-wordmark span { color: var(--blue); }
.kv-np-bell { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 20px; }
.kv-np-bell-dot { position: absolute; top: 4px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: #FF6E72; border: 2px solid #F2F4F7; }

/* User status line */
.kv-np-userline { display: flex; align-items: center; gap: 6px; padding: 0 22px 10px; flex-shrink: 0; }
.kv-np-dot { width: 7px; height: 7px; border-radius: 50%; background: #01CB73; }
.kv-np-userline-txt { font: 500 12px/1 var(--f); color: #01CB73; }
.kv-np-userline-name { font: 400 12px/1 var(--f); color: var(--t4); }

/* Scroll region */
.kv-np-scroll { display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 14px; }

/* Section cards */
.kv-np-sec {
  background: #fff; border-radius: 22px; overflow: hidden;
  border: 1px solid #E8ECF0; box-shadow: 0 2px 10px rgba(33,49,66,.08);
  flex-shrink: 0;   /* don't shrink inside the flex-column scroll (clips tile labels); let the area scroll instead */
}
.kv-np-sec-head { padding: 14px 18px 10px; display: flex; align-items: center; justify-content: space-between; }
.kv-np-sec-title { font: 700 12px/1 var(--f); color: var(--navy); letter-spacing: .02em; }
.kv-np-sec-link { font: 600 10px/1 var(--f); color: var(--blue); display: flex; align-items: center; gap: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kv-np-sec-link i { font-size: 9px; transition: transform .25s ease; }
/* Collapsed by default: show one row (3 tiles); the link expands the rest. */
.kv-np-sec:not(.is-expanded) .kv-np-tile:nth-child(n+4) { display: none; }
.kv-np-sec.is-expanded .kv-np-sec-link i { transform: rotate(180deg); }
.kv-np-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 8px 16px; }
.kv-np-tile { padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.kv-np-tile-ic {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(34,186,255,.13);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #046BD4;
}
.kv-np-tile-ic img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.kv-np-tile-lbl { font: 500 11px/1.15 var(--f); color: var(--navy); }

/* Floating bottom nav (pinned) */
.kv-np-foot { padding: 8px 16px 16px; }
.kv-np-nav {
  background: rgba(255,255,255,.98);
  border-radius: 32px; border: 1px solid #E8ECF0;
  box-shadow: 0 8px 28px rgba(33,49,66,.16), 0 2px 8px rgba(33,49,66,.08);
  display: flex; align-items: center; justify-content: space-around; padding: 12px 8px;
}
.kv-np-nav-item { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.kv-np-nav-ic { font-size: 22px; color: var(--navy); }
.kv-np-nav-lbl { font: 500 11px/1 var(--f); color: var(--navy); }
.kv-np-nav-item.is-sos { margin-top: -34px; }
.kv-np-nav-item.is-sos .kv-np-nav-ic {
  width: 60px; height: 60px; border-radius: 50%;
  background: #FF6E72; color: #fff; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: 0 6px 20px rgba(255,110,114,.5);
}
.kv-np-nav-item.is-sos .kv-np-nav-lbl { color: #FF6E72; font-weight: 700; }

/* ══ Config area tabs: Dashboard Icons / Hamburger Menu ═════════════════ */
.kv-ccfg-tabs { display: flex; gap: 6px; margin: 12px 0 0; border-bottom: 1px solid var(--border); }
.kv-ccfg-tab {
  font: 600 11px/1 var(--f); color: var(--t3);
  background: transparent; border: 1px solid transparent; border-bottom: 0; cursor: pointer;
  padding: 9px 16px; border-radius: 8px 8px 0 0; display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: -1px; transition: all .12s ease;
}
.kv-ccfg-tab i { font-size: 12px; }
.kv-ccfg-tab:hover { color: var(--navy); background: var(--page); }
.kv-ccfg-tab.is-active {
  color: var(--blue); background: #fff; border-color: var(--border); border-bottom-color: #fff;
}

/* ── Hamburger menu builder bits ──────────────────────────────────────── */
.kv-ccfg-menu-hint {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font: 400 10px/1.4 var(--f); color: #0c87b8;
  background: #eafaff; border: 1px solid #bfe9fb; border-radius: 6px; padding: 8px 12px;
}
.kv-ccfg-menu-badge {
  font: 600 8.5px/1 var(--f); color: var(--t3); background: var(--page);
  border: 1px solid var(--border); border-radius: 99px; padding: 3px 8px;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; margin-left: auto;
}
.kv-ccfg-menu-row .kv-ccfg-tile-lbl { flex: 1; }
.kv-ccfg-menu-sub-dot {
  flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); opacity: .55; margin: 0 4px 0 2px;
}

/* Locked (per-org) builder: enable/disable + reorder only. Hide the structural
   controls that change WHAT exists (add / remove / org-sync / icon / accent);
   inputs+selects are made readonly / disabled in JS so only the toggle switches
   stay interactive. The drag grip stays visible so sections, tiles, action-bar
   items and menu rows can still be reordered. */
.kv-ccfg-locked .kv-ccfg-add,
.kv-ccfg-locked .kv-ccfg-remove,
.kv-ccfg-locked .kv-ccfg-sync,
.kv-ccfg-locked .kv-ccfg-icon-sel,
.kv-ccfg-locked .kv-ccfg-accent { display: none !important; }
/* readonly identity fields read as static text, not inputs */
.kv-ccfg-locked .kv-ccfg-title-inp,
.kv-ccfg-locked .kv-ccfg-tile-lbl,
.kv-ccfg-locked .kv-ccfg-link-inp {
  cursor: default; background: transparent; border-color: transparent; padding-left: 0;
}

/* ══ Hamburger menu (drawer) preview ═══════════════════════════════════ */
.kv-dw { display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden; }
.kv-dw-head {
  background: linear-gradient(135deg, #213142, #2a3d52); color: #fff;
  padding: 30px 20px 18px; flex-shrink: 0;
}
.kv-dw-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kv-dw-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 700 17px/1 var(--f);
  border: 2px solid rgba(255,255,255,.2);
}
.kv-dw-close { color: rgba(255,255,255,.7); font-size: 18px; }
.kv-dw-name { font: 700 15px/1.2 var(--f); }
.kv-dw-email { font: 400 11px/1.3 var(--f); color: rgba(255,255,255,.65); }
.kv-dw-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0 16px; }
.kv-dw-body::-webkit-scrollbar { width: 0; }
.kv-dw-group:not(:last-child) { border-bottom: 5px solid #f0f2f6; }
.kv-dw-row {
  padding: 13px 18px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.kv-dw-label { font: 600 13px/1.2 var(--f); color: var(--navy); }
.kv-dw-chev { font-size: 11px; color: var(--blue); transition: transform .25s ease; }
.kv-dw-group.is-expanded .kv-dw-chev { transform: rotate(180deg); }
.kv-dw-subs { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: #fafbfd; }
.kv-dw-group.is-expanded .kv-dw-subs { max-height: 600px; }
.kv-dw-sub {
  padding: 10px 18px 10px 32px; font: 400 11.5px/1.3 var(--f); color: #555;
  border-top: 1px solid #f0f2f6; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.kv-dw-logout {
  margin: 14px 18px 0; padding: 12px; border-radius: 12px;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--red); font: 600 13px/1 var(--f); cursor: pointer;
}

/* ── C&C config builder: grips / add / remove / icon picker / drag states ── */
.kv-ccfg-grip { flex: 0 0 auto; cursor: grab; color: var(--t5); font-size: 11px; padding: 2px 1px; }
.kv-ccfg-grip:hover { color: var(--t3); }
.kv-ccfg-grip:active { cursor: grabbing; }
.kv-ccfg-grip-sec { font-size: 12px; }

.kv-ccfg-icon-sel {
  flex: 0 0 auto; max-width: 116px;
  font-family: var(--f); font-size: 9px; color: var(--t2);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 4px 5px; background: #fff; cursor: pointer; outline: none;
  text-transform: capitalize;
}
.kv-ccfg-icon-sel:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34,186,255,.1); }

/* Per-icon color picker (Dashboard tiles + Hamburger menu items). The select's
   own text is tinted to the chosen color (set inline) as a swatch hint. */
.kv-ccfg-color-sel {
  flex: 0 0 auto; max-width: 96px;
  font-family: var(--f); font-size: 9px; font-weight: 600; color: var(--t2);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 4px 5px; background: #fff; cursor: pointer; outline: none;
}
.kv-ccfg-color-sel:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34,186,255,.1); }
.kv-ccfg-locked .kv-ccfg-color-sel { display: none !important; }

.kv-ccfg-remove {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  color: var(--t4); font-size: 11px; padding: 4px 6px; border-radius: 5px;
  transition: all .12s ease;
}
.kv-ccfg-remove:hover { color: var(--red); background: var(--red-bg); }

.kv-ccfg-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 4px; padding: 7px;
  border: 1px dashed var(--border); border-radius: 6px; background: transparent;
  color: var(--blue); font: 700 9px var(--f); cursor: pointer;
  transition: all .12s ease;
}
.kv-ccfg-add:hover { border-color: var(--blue); background: #F0F7FF; }
.kv-ccfg-add-sec { margin: 0; padding: 9px; }

/* drag affordances */
.kv-ccfg-row-dragging { opacity: .4; }
.kv-ccfg-tile-row.kv-drag-over { box-shadow: inset 0 2px 0 0 var(--blue); background: #F0F7FF; }
.kv-ccfg-sec.kv-drag-over { box-shadow: 0 0 0 2px var(--blue); }
.kv-ccfg-sec[draggable="true"] { cursor: grabbing; }

/* ── C&C config: AV ALERTS "seeded from AV Alarms" note + Sync button ── */
.kv-ccfg-src-note {
  font-size: 8.5px; font-weight: 600; color: var(--amber);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.kv-ccfg-src-note i { margin-right: 3px; }
.kv-ccfg-sync {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 9px var(--f); color: var(--blue);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 4px 9px; background: #fff; cursor: pointer;
  transition: all .12s ease; white-space: nowrap;
}
.kv-ccfg-sync:hover { border-color: var(--blue); background: #F0F7FF; }

/* ── C&C config: AV ALERTS "Default building" (controller) selector ── */
.kv-ccfg-av-ctrl { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.kv-ccfg-av-ctrl > label {
  font-size: 8.5px; font-weight: 600; color: var(--t3);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.kv-ccfg-av-ctrl > label i { margin-right: 3px; color: var(--blue); }
.kv-ccfg-av-sel {
  font-family: var(--f); font-size: 9px; font-weight: 600; color: var(--t1);
  border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; outline: none;
  background: #fff; max-width: 180px;
}
.kv-ccfg-av-sel:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34, 186, 255, .1); }

/* ── C&C config: per-section max-icons cap (the "max N icons" control) ── */
.kv-ccfg-cap { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.kv-ccfg-cap-inp {
  width: 52px; font-family: var(--f); font-size: 9px; font-weight: 600; color: var(--t1);
  border: 1px solid var(--border); border-radius: 5px; padding: 5px 6px; outline: none;
  text-align: center;
}
.kv-ccfg-cap-inp:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34,186,255,.1); }

/* Curated (Quick Action) tile: icon + name come from the source, so the row is
   read-only apart from the on/off toggle + remove. A small tag shows the source. */
.kv-ccfg-tile-curated .kv-ccfg-tile-lbl { background: transparent; border-color: transparent; padding-left: 0; cursor: default; }
.kv-ccfg-tile-curated .kv-ccfg-tile-key {
  font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--blue); background: rgba(34,186,255,.12); border-radius: 99px; padding: 2px 7px;
}

/* Menu-row optional icon (lets the item become a Quick Action candidate) */
.kv-ccfg-menu-ic { width: 22px; height: 22px; font-size: 12px; color: var(--t2); }
.kv-ccfg-noicon { color: var(--border); }

/* Per-org unlock exceptions: the Quick Action picker button + the max-icons cap
   input stay usable even though the rest of the per-org builder is locked. */
.kv-ccfg-locked .kv-ccfg-add.kv-ccfg-unlock { display: flex !important; }
.kv-ccfg-locked .kv-ccfg-cap-inp.kv-ccfg-unlock {
  background: #fff !important; border-color: var(--border) !important; padding-left: 6px !important; cursor: text;
}

/* Mobile-preview overflow chip when a section has more enabled tiles than its
   max_icons cap ("+N" -> reachable via the section's link on the app). */
.kv-mtile-more {
  display: flex; align-items: center; justify-content: center;
  color: var(--t3); font: 700 11px var(--f);
}
.kv-mtile.kv-mtile-more .kv-mtile-ic,
.kv-np-tile.kv-mtile-more { background: transparent; }
.kv-mtile.kv-mtile-more, .kv-np-tile.kv-mtile-more { opacity: .7; }

/* ── C&C config: Quick Action picker modal ── */
.kv-modal.kv-qa-modal { width: 520px; max-height: 80vh; }
.kv-qa-modal .kv-modal-body { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.kv-qa-note {
  font-size: 9px; color: var(--t3); line-height: 1.5;
  padding: 12px 18px; border-bottom: 1px solid var(--border2); flex: 0 0 auto;
}
.kv-qa-note b { color: var(--blue); }
.kv-qa-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-bottom: 1px solid var(--border2); flex: 0 0 auto;
  color: var(--t3);
}
.kv-qa-search > i { font-size: 11px; flex: 0 0 auto; }
.kv-qa-search-inp {
  flex: 1 1 auto; font-family: var(--f); font-size: 10px; color: var(--t1);
  border: none; outline: none; background: transparent; padding: 2px 0;
}
.kv-qa-search-inp::placeholder { color: var(--t4); }
.kv-qa-search-x {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  color: var(--t4); font-size: 16px; line-height: 1; padding: 0 2px;
}
.kv-qa-search-x:hover { color: var(--t2); }
.kv-qa-noresults { padding: 22px 18px; font-size: 9px; color: var(--t3); text-align: center; }
.kv-qa-list { overflow-y: auto; padding: 6px 0; flex: 1 1 auto; min-height: 0; }
.kv-qa-group { padding: 2px 0 6px; }
.kv-qa-group-h {
  font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--t3); padding: 8px 18px 4px;
}
.kv-qa-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 18px; cursor: pointer; transition: background .12s ease;
}
.kv-qa-item:hover { background: #F0F7FF; }
.kv-qa-item input { accent-color: var(--blue); width: 14px; height: 14px; flex: 0 0 auto; cursor: pointer; }
.kv-qa-item input:disabled { cursor: not-allowed; }
.kv-qa-item input:disabled ~ .kv-qa-lbl,
.kv-qa-item input:disabled ~ .kv-qa-ic { opacity: .4; }
.kv-qa-ic {
  width: 24px; height: 24px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border-radius: 5px; background: #F0F7FF; color: var(--navy); font-size: 12px;
}
.kv-qa-ic img { width: 100%; height: 100%; object-fit: contain; }
/* SOS candidate swatch in the picker: red badge with fitted "SOS" text. */
.kv-qa-ic.is-sos { background: #FF6E72; color: #fff; border-radius: 50%; }
.kv-qa-ic .kv-sos-txt { font: 800 7px/1 var(--f); letter-spacing: .2px; }
.kv-qa-lbl { font-size: 10px; font-weight: 500; color: var(--t1); flex: 1 1 auto; }
.kv-qa-empty { padding: 24px 18px; font-size: 9px; color: var(--t3); text-align: center; line-height: 1.5; }
.kv-qa-count { font-size: 9px; font-weight: 600; color: var(--t3); margin-right: auto; }
.kv-qa-count.kv-qa-count-cap { color: var(--amber); }

/* ── App Config: draft/publish status chip ── */
.kv-ccfg-status { display: inline-flex; align-items: center; gap: 5px; }
.kv-ccfg-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.kv-ccfg-st-pub { background: #D1FAE5; color: #047857; }
.kv-ccfg-st-draft { background: #FEF3C7; color: #B45309; }
.kv-ccfg-st-none { background: var(--page); color: var(--t3); }

/* ── App Config: version history modal ── */
.kv-modal.kv-hist-modal { width: 520px; max-height: 80vh; }
.kv-hist-modal .kv-modal-body { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.kv-hist-modal .kv-qa-note { padding: 12px 18px; }
.kv-hist-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 4px 0; }
.kv-hist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-bottom: 1px solid var(--border2);
}
.kv-hist-row:last-child { border-bottom: none; }
.kv-hist-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.kv-hist-ver { font: 700 10px var(--f); color: var(--navy); flex: 0 0 auto; }
.kv-hist-meta { font-size: 9px; color: var(--t3); }
.kv-hist-note { font-size: 9px; color: var(--t2); width: 100%; }
.kv-hist-restore { flex: 0 0 auto; padding: 5px 12px; }

/* ── App Config: View JSON modal ── */
.kv-modal.kv-json-modal { width: 600px; max-height: 82vh; }
.kv-json-modal .kv-modal-body { padding: 0; display: flex; min-height: 0; overflow: hidden; }
.kv-json-pre {
  margin: 0; flex: 1 1 auto; overflow: auto; min-height: 0;
  padding: 14px 18px; background: var(--page);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.5; color: var(--t1); white-space: pre;
}

/* ── C&C config: read-only (local-admin) view ── */
.kv-ccfg-ro-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 0;
  padding: 9px 14px;
  background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 8px;
  font-size: 9px; font-weight: 600; color: #B45309;
}
.kv-ccfg-ro-banner i { font-size: 11px; }
/* Master-data variant of the banner: blue/info instead of amber/warning. */
.kv-ccfg-ro-banner.kv-ccfg-master-banner {
  background: #eafaff; border-color: #bfe9fb; color: #0c87b8;
}
.kv-ccfg-wrap.kv-ccfg-readonly { grid-template-columns: 1fr; justify-items: center; }

/* Navy chip used by the master-data header tag. */
.kv-chip.kv-chip-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.kv-ccfg-wrap.kv-ccfg-readonly .kv-ccfg-builder { display: none; }
.kv-ccfg-wrap.kv-ccfg-readonly .kv-ccfg-preview-pane { position: static; }

/* ============================================================================
 * Keyword Detection config (per-org SOS / Walk Safe keyword spotting)
 * ========================================================================== */
.kv-kwcfg-wrap { padding: 14px 0; }
.kv-kwcfg-intro {
  font-size: 11px; color: var(--t3); line-height: 1.5;
  margin: 0 0 12px; max-width: 760px;
}
.kv-kwcfg-vendor {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 14px; margin: 0 0 14px;
  background: var(--page); border: 1px solid var(--border); border-radius: 5px;
}
.kv-kwcfg-vendor-lbl {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--t3);
}
.kv-kwcfg-vendor-note {
  flex: 1 1 100%; margin: 0; font-size: 10px; color: var(--t3); line-height: 1.5;
}
.kv-kwcfg-vendor-note .fa { color: var(--blue); margin-right: 4px; }
.kv-kwcfg-table-host { width: 100%; }
.kv-kwcfg-table { width: 100%; }
.kv-kwcfg-table td { vertical-align: middle; }
.kv-kwcfg-table td strong { font-size: 11px; color: var(--t1); }
.kv-kwcfg-wrap.kv-kwcfg-readonly .kv-checkbox-cell .kv-toggle { opacity: .6; }

/* ── Super admin: add-keyword control ── */
.kv-kwcfg-add { margin: 10px 0 14px; }
.kv-kwcfg-add-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.kv-kwcfg-add-form .inp { height: 30px; }
.kv-kwcfg-add-form #kwcfgAddLabel { min-width: 240px; flex: 1 1 240px; max-width: 360px; }
.kv-kwcfg-add-form #kwcfgAddKey { width: 160px; }
.kv-kwcfg-add-err { font-size: 9px; color: var(--red); font-weight: 600; }
.kv-kwcfg-add-hint { font-size: 9px; color: var(--t3); margin: 4px 0 0; }

/* ============================================================
   Event Actions Card -- incident-detail bottom tab
   Industry-standard "log + activity feed" layout:
   a composer card on top, an action-history feed below.
   ============================================================ */
.kv-eac { display: flex; flex-direction: column; gap: 14px; padding: 2px; }

/* ---- Composer ---- */
.kv-eac-composer {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    overflow: hidden;
}
.kv-eac-composer-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: var(--navy);
    color: #fff;
    font-size: 10px; font-weight: 700;
}
.kv-eac-composer-head i { color: var(--blue); font-size: 11px; }
.kv-eac-edit-flag {
    margin-left: auto;
    font-size: 9px; font-weight: 700;
    background: var(--amber); color: #4a2c00;
    padding: 2px 9px; border-radius: 99px;
}
.kv-eac-composer-body { padding: 14px; }
.kv-eac-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.kv-eac-field:last-child { margin-bottom: 0; }

/* Composer labels + inputs are styled explicitly here -- do NOT reuse the
   .kv-form-label (right-aligned, two-column form) or .kv-form-input (which is a
   wrapper that styles its children, not the element itself). */
.kv-eac-label {
    display: block; text-align: left;
    font-size: 9px; font-weight: 600; text-transform: none;
    letter-spacing: .04em; color: var(--t3); margin: 0;
}
.kv-eac-input {
    width: 100%; box-sizing: border-box;
    font-family: var(--f); font-size: 11px; color: var(--t1);
    border: 1px solid var(--border); border-radius: 6px;
    background: #fff; transition: border-color .15s, box-shadow .15s;
}
select.kv-eac-input { height: 38px; padding: 0 12px; cursor: pointer; }
textarea.kv-eac-input { min-height: 84px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.kv-eac-input:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(34,186,255,.12);
}
.kv-eac-input::placeholder { color: var(--t4); }
/* keep the native file button out of the layout -- the dropzone label is the UI */
.kv-eac-dropzone input[type="file"],
.kv-eac-file-hidden { display: none !important; }

/* file drop zone */
.kv-eac-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    border: 1.5px dashed var(--border);
    border-radius: 6px;
    background: var(--page);
    padding: 16px 12px;
    cursor: pointer;
    text-align: center;
    transition: all .15s ease;
}
.kv-eac-dropzone:hover { border-color: var(--blue); background: #F0F9FF; }
.kv-eac-dropzone i { font-size: 18px; color: var(--blue); margin-bottom: 2px; }
.kv-eac-file-hidden { display: none; }
.kv-eac-dz-main { font-size: 10px; font-weight: 600; color: var(--t2); }
.kv-eac-dz-sub  { font-size: 9px; color: var(--t4); }
.kv-eac-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kv-eac-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9px; font-weight: 500; color: var(--t2);
    background: #E0F2FE; border: 1px solid rgba(34,186,255,.35);
    border-radius: 99px; padding: 3px 9px;
}
.kv-eac-chip i { color: var(--blue); font-size: 9px; }

.kv-eac-composer-foot {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border2);
}
.kv-eac-spacer { flex: 1 1 auto; }
.kv-eac-req { font-size: 9px; color: var(--t3); }
.kv-eac-req i { color: var(--blue); margin-right: 3px; }

/* ---- Action history feed ---- */
.kv-eac-feed { display: flex; flex-direction: column; }
.kv-eac-feed-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600; color: var(--t2);
    margin: 2px 2px 10px;
}
.kv-eac-feed-head i { color: var(--blue); }
.kv-eac-count {
    font-size: 9px; font-weight: 700; color: #fff;
    background: var(--blue); border-radius: 99px;
    padding: 1px 8px; min-width: 18px; text-align: center;
}
.kv-eac-item {
    display: flex; gap: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.kv-eac-avatar {
    flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--blue);
    background: rgba(34,186,255,.16);
    border: 1.5px solid rgba(34,186,255,.3);
}
.kv-eac-item-main { flex: 1 1 auto; min-width: 0; }
.kv-eac-item-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.kv-eac-author { font-size: 10px; font-weight: 700; color: var(--t1); }
.kv-eac-time { font-size: 9px; color: var(--t3); }
.kv-eac-time i { margin-right: 3px; }
.kv-eac-item-act { margin-left: auto; display: inline-flex; gap: 12px; }
.kv-eac-item-act a { color: var(--blue); font-size: 10px; }
.kv-eac-item-act a.kv-eac-del { color: var(--red); }
.kv-eac-notes {
    font-size: 9px; color: var(--t1); white-space: pre-wrap;
    margin-top: 6px; line-height: 1.55;
}
.kv-eac-files { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.kv-eac-fchip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 9px; font-weight: 500; color: var(--t2);
    background: var(--page); border: 1px solid var(--border);
    border-radius: 5px; padding: 4px 9px;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: all .12s ease;
}
.kv-eac-fchip:hover { border-color: var(--blue); color: var(--blue); background: #F0F9FF; }
.kv-eac-fchip i { color: var(--blue); font-size: 11px; flex: 0 0 auto; }
.kv-eac-edited { font-size: 9px; color: var(--t4); margin-top: 6px; font-style: italic; }
.kv-eac-edited i { margin-right: 3px; }

/* org-level list page reuses the feed item; its own 8px item margin handles
   spacing, so drop the container gap to avoid double spacing. */
.kv-eac-orglist { gap: 0; }
.kv-eac-orglist .kv-eac-item:last-child { margin-bottom: 0; }

/* =====================================================================
   APPEARANCE / THEME  (added Jun 2026)
   Per-user Light/Dark/System/Custom theme. The user-edit Appearance card
   uses the .kv-theme-* option list + custom schedule. App-wide dark mode is
   driven by html[data-theme="dark"], set before first paint by the seed
   script in shared/layout.html. See CLAUDE.md "User Theme Preference".
   ===================================================================== */

/* ── Appearance card: iOS-style stacked option list ── */
.kv-theme-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 440px;
}
.kv-theme-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  font-family: var(--f);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.kv-theme-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.kv-theme-option-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--t1);
}
.kv-theme-option-check {
  margin-left: auto;
  color: var(--green);
  font-size: 12px;
  opacity: 0;
  transition: opacity .15s ease;
}
.kv-theme-option:hover { border-color: var(--blue); }
.kv-theme-option.is-selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(34,186,255,.18);
}
.kv-theme-option.is-selected .kv-theme-option-check { opacity: 1; }

/* ── Custom schedule (two time inputs) ── */
.kv-theme-schedule-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.kv-theme-schedule-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kv-theme-schedule-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--t3);
}
.kv-theme-schedule-row input[type="time"] {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  font-family: var(--f);
  color: var(--t1);
  background: var(--white);
  box-sizing: border-box;
}
.kv-theme-schedule-row input[type="time"]:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,186,255,.1);
}

/* =====================================================================
   DARK THEME  -  html[data-theme="dark"]
   Most of the UI uses var(--...) tokens, so overriding the surface/text
   tokens flips the bulk of it. Below the token block are targeted fixes for
   high-traffic surfaces that use hardcoded hex instead of tokens, plus the
   handful of headings that use --navy as TEXT (which must lighten on dark;
   --navy itself stays dark because it is also a background for the topbar
   and table headers). Remaining page-local hardcoded colors are an
   iterative follow-up.
   ===================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;            /* native form controls / scrollbars render dark */

  --page:    #0B121C;            /* app background                     */
  --white:   #121C28;            /* card / panel surface               */
  --border:  #26323F;            /* primary borders                    */
  --border2: #1E2937;            /* secondary borders / separators     */

  --t1: #EAEEF3;                 /* primary text                       */
  --t2: #C2CCD8;                 /* secondary text                     */
  --t3: #93A1B2;                 /* labels / hints                     */
  --t4: #6B7787;                 /* disabled / subtle                  */
  --t5: #3A4654;                 /* faint dividers                     */

  --sh: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
}

/* App shell */
html[data-theme="dark"] body { background: var(--page); color: var(--t2); }

/* Cards / panels / page header that use hardcoded #fff */
html[data-theme="dark"] .kv-list-card,
html[data-theme="dark"] .kvgl-page-header { background: var(--white); }

/* Headings that use --navy as a TEXT color (invisible on dark) */
html[data-theme="dark"] .kv-edit-card-head { color: var(--t1); }

/* Form inputs (hardcoded white bg) */
html[data-theme="dark"] .kv-edit-input input[type="text"],
html[data-theme="dark"] .kv-edit-input input[type="email"],
html[data-theme="dark"] .kv-edit-input input[type="password"],
html[data-theme="dark"] .kv-edit-input input[type="number"],
html[data-theme="dark"] .kv-edit-input select,
html[data-theme="dark"] .kv-edit-input textarea,
html[data-theme="dark"] .kv-filter-field input,
html[data-theme="dark"] .kv-filter-field select {
  background: #0E1722;
  color: var(--t1);
  border-color: var(--border);
}

/* Data table rows (hardcoded alternating / hover colors) */
html[data-theme="dark"] .kv-data-table tbody td {
  color: var(--t1);
  border-bottom-color: var(--border2);
  background: var(--white);
}
html[data-theme="dark"] .kv-data-table tbody tr:nth-child(even) td { background: #0E1722; }
html[data-theme="dark"] .kv-data-table tbody tr:hover td { background: #16344C !important; }

/* Results bar */
html[data-theme="dark"] .kv-results-bar { background: var(--white); color: var(--t2); }

/* Modals / popups (hardcoded white surfaces) */
html[data-theme="dark"] .kv-modal,
html[data-theme="dark"] .kv-call-window { background: var(--white); color: var(--t1); }

/* Protocol contact cards inside the incident-detail Protocol popup */
#protocol-steps .proto-contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
#protocol-steps .proto-contact-card {
    background: #fff;
    border: 1px solid #22BAFF;
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
#protocol-steps .proto-contact-name {
    font-size: 11px;
    font-weight: 700;
    color: #1B2A3B;
    margin-bottom: 2px;
    word-break: break-word;
}
#protocol-steps .proto-contact-detail {
    font-size: 9px;
    color: #5A6475;
    line-height: 1.6;
    word-break: break-word;
}

/* Notification-group user picker: server-paginated list footer */
.kv-user-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px 2px;
    font-family: var(--f);
    font-size: 9px;
    color: var(--t3);
}
.kv-user-pager-info { font-weight: 600; color: var(--t2); }
.kv-user-pager-nav { display: flex; align-items: center; gap: 8px; }
.kv-user-pager-page { font-weight: 600; color: var(--t2); white-space: nowrap; }
.kv-user-pager .kv-btn-sm { padding: 4px 12px; font-size: 9px; }
.kv-user-pager .kv-btn[disabled],
.kv-user-pager .kv-btn:disabled { opacity: .45; cursor: default; }

/* ============================================================
   Recipient picker (notification group create/edit)
   Tabbed "selected list + search-and-add" membership control
   ============================================================ */
.kv-rp-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}
.kv-rp-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    font-family: var(--f);
    font-size: 10px;
    font-weight: 600;
    color: var(--t3);
    cursor: pointer;
    margin-bottom: -1px;
    transition: all .12s ease;
}
.kv-rp-tab:hover { color: var(--t2); }
.kv-rp-tab.active { color: var(--navy); border-bottom-color: var(--blue); }
.kv-rp-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--page);
    color: var(--t3);
    font-size: 9px;
    font-weight: 700;
}
.kv-rp-tab.active .kv-rp-tab-badge { background: var(--blue); color: #fff; }

.kv-rp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 760px) { .kv-rp { grid-template-columns: 1fr; } }

.kv-rp-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 260px;
}
.kv-rp-add { background: var(--tabs-bg, #F0F7FF); }
.kv-rp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border2);
}
.kv-rp-panel-title {
    font-family: var(--f);
    font-size: 10px;
    font-weight: 700;
    color: var(--navy);
}
.kv-rp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--blue);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--f);
}

.kv-rp-searchbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border2);
}
.kv-rp-search-ico {
    flex: 0 0 auto;
    color: var(--t3);
    font-size: 11px;
    line-height: 1;
}
.kv-rp-search-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-family: var(--f);
    font-size: 10.5px;
    color: var(--t1);
    background: #fff;
}
.kv-rp-search-input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(34,186,255,.1);
}
.kv-rp-role {
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-family: var(--f);
    font-size: 10px;
    color: var(--t2);
    background: #fff;
    max-width: 150px;
}

.kv-rp-scroll {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
    padding: 4px;
}
.kv-rp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    transition: background .1s ease;
}
.kv-rp-item + .kv-rp-item { border-top: 1px solid var(--border2); }
.kv-rp-item:hover { background: rgba(34,186,255,.06); }
.kv-rp-item-main { min-width: 0; }
.kv-rp-item-name {
    font-family: var(--f);
    font-size: 10px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kv-rp-item-sub {
    font-family: var(--f);
    font-size: 9px;
    color: var(--t3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kv-rp-remove {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--t4);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all .1s ease;
}
.kv-rp-remove:hover { background: rgba(239,68,68,.12); color: var(--red); }
.kv-rp-add-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--blue);
    border-radius: 5px;
    background: #fff;
    color: var(--blue);
    font-family: var(--f);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all .1s ease;
}
.kv-rp-add-btn:hover { background: var(--blue); color: #fff; }
.kv-rp-empty {
    padding: 18px 12px;
    text-align: center;
    font-family: var(--f);
    font-size: 9.5px;
    color: var(--t4);
}
.kv-rp-more {
    padding: 8px;
    border-top: 1px solid var(--border2);
    text-align: center;
}
.kv-notif-saved-flash {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--green);
    font-family: var(--f);
    font-size: 10px;
    font-weight: 600;
}