/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

:host {
  --km-navy: #0b1e3d;
  --km-navy-mid: #163260;
  --km-teal: #0e7e6b;
  --km-teal-l: #e0f4f0;
  --km-teal-m: #1aaf96;
  --km-amber: #d97706;
  --km-amber-l: #fef3c7;
  --km-red: #c0392b;
  --km-red-l: #fdecea;
  --km-orange: #ea580c;
  --km-orange-l: #fff0e6;
  --km-green: #15803d;
  --km-green-l: #dcfce7;
  --km-blue: #1d4ed8;
  --km-blue-l: #eff6ff;
  --km-g50: #f8fafc;
  --km-g100: #f1f5f9;
  --km-g200: #e2e8f0;
  --km-g300: #cbd5e1;
  --km-g400: #94a3b8;
  --km-g500: #64748b;
  --km-g600: #475569;
  --km-g700: #334155;
  --km-g800: #1e293b;
  --km-g900: #0f172a;

  display: block;
  font-family:
    'DM Sans',
    system-ui,
    -apple-system,
    sans-serif;
  background: var(--km-g50);
  color: var(--km-g800);
  font-size: 14px;
  line-height: 1.5;
}

.km-root {
  position: relative;
}

/* Inner tabs */
.km-inner-nav {
  background: var(--km-g100);
  border-bottom: 1px solid var(--km-g200);
  padding: 0 24px;
  display: flex;
  gap: 0;
  overflow-x: auto;
}

.km-itab {
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--km-g500);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  font-family: inherit;

  &:hover {
    color: var(--km-g800);
  }

  &.active {
    color: var(--km-teal);
    border-bottom-color: var(--km-teal);
    font-weight: 600;
    background: #fff;
  }
}

.km-cnt {
  background: var(--km-teal-l);
  color: var(--km-teal);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;

  &--red {
    background: var(--km-red-l);
    color: var(--km-red);
  }

  &--amb {
    background: var(--km-amber-l);
    color: var(--km-amber);
  }
}

.km-main {
  padding: 20px 24px;
  max-width: 1400px;
}

.km-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.km-page-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--km-g900);
}

.km-actions {
  display: flex;
  gap: 8px;
}

/* Cards */
.km-card {
  background: #fff;
  border: 1px solid var(--km-g200);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

.km-ch {
  padding: 13px 18px;
  border-bottom: 1px solid var(--km-g100);
  display: flex;
  align-items: center;
  gap: 10px;
}

.km-ct {
  font-size: 13px;
  font-weight: 600;
  color: var(--km-g800);
}

.km-ch-hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--km-g500);
}

.km-cb {
  padding: 18px;
}

.km-cb-flush {
  padding: 0;
}

.km-ci {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.km-ci-t {
  background: var(--km-teal-l);
  color: var(--km-teal);
}

.km-ci-a {
  background: var(--km-amber-l);
  color: var(--km-amber);
}

.km-ci-r {
  background: var(--km-red-l);
  color: var(--km-red);
}

.km-ci-b {
  background: var(--km-blue-l);
  color: var(--km-blue);
}

.km-ci-g {
  background: var(--km-green-l);
  color: var(--km-green);
}

/* Badges */
.km-b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}

.km-b-gr {
  background: var(--km-green-l);
  color: var(--km-green);
}

.km-b-am {
  background: var(--km-amber-l);
  color: var(--km-amber);
}

.km-b-re {
  background: var(--km-red-l);
  color: var(--km-red);
}

.km-b-or {
  background: var(--km-orange-l);
  color: var(--km-orange);
}

.km-b-bl {
  background: var(--km-blue-l);
  color: var(--km-blue);
}

.km-b-te {
  background: var(--km-teal-l);
  color: var(--km-teal);
}

.km-b-gy {
  background: var(--km-g100);
  color: var(--km-g600);
}

.km-b-nv {
  background: #e8edf5;
  color: var(--km-navy);
}

.km-ml-auto {
  margin-left: auto;
}

.km-ml-12 {
  margin-left: 12px;
}

/* Buttons */
.km-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid;
  font-family: inherit;
  transition: all 0.15s;
}

.km-btn-t {
  background: var(--km-teal);
  border-color: var(--km-teal);
  color: #fff;

  &:hover {
    opacity: 0.9;
  }
}

.km-btn-ot {
  background: #fff;
  border-color: var(--km-teal);
  color: var(--km-teal);

  &:hover {
    background: var(--km-teal-l);
  }
}

.km-btn-n {
  background: var(--km-navy);
  border-color: var(--km-navy);
  color: #fff;
}

.km-btn-a {
  background: var(--km-amber);
  border-color: var(--km-amber);
  color: #fff;
}

.km-btn-r {
  background: var(--km-red);
  border-color: var(--km-red);
  color: #fff;
}

.km-btn-g {
  background: #fff;
  border-color: var(--km-g300);
  color: var(--km-g600);

  &:hover {
    background: var(--km-g50);
  }
}

.km-w {
  width: 100%;
}

/* Stat row */
.km-stat-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.km-stat {
  background: #fff;
  border: 1px solid var(--km-g200);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
  cursor: pointer;
  transition: all 0.15s;

  &:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  }
}

.km-stat-n {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 3px;
}

.km-stat-l {
  font-size: 12px;
  color: var(--km-g500);
}

.km-stat-t {
  font-size: 11px;
  margin-top: 5px;
}

/* Filters */
.km-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.km-fsel,
.km-finp {
  padding: 7px 12px;
  border: 1px solid var(--km-g200);
  border-radius: 8px;
  font-size: 12px;
  color: var(--km-g700);
  background: #fff;
  font-family: inherit;

  &:focus {
    outline: none;
    border-color: var(--km-teal);
  }
}

.km-finp {
  flex: 1;
  min-width: 180px;
}

.km-ta {
  resize: none;
}

/* Tables */
.km-tbl {
  width: 100%;
  border-collapse: collapse;

  th {
    text-align: left;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--km-g500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--km-g50);
    border-bottom: 1px solid var(--km-g200);
  }

  td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--km-g100);
    font-size: 13px;
    vertical-align: middle;
  }

  tr:last-child td {
    border-bottom: none;
  }

  tbody tr:hover td {
    background: var(--km-g50);
    cursor: pointer;
  }
}

.km-an {
  font-weight: 500;
  color: var(--km-g900);
}

.km-ai {
  font-size: 11px;
  color: var(--km-g400);
  font-family: 'DM Mono', monospace;
}

.km-num {
  color: var(--km-g400);
}

.km-small {
  font-size: 11px;
}

.km-mono {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
}

.km-red {
  color: var(--km-red);
}

/* State pills */
.km-sp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.km-sp-ac {
  background: var(--km-green-l);
  color: var(--km-green);
}

.km-sp-fr {
  background: var(--km-amber-l);
  color: var(--km-amber);
}

.km-sp-in {
  background: var(--km-orange-l);
  color: var(--km-orange);
}

.km-sp-do {
  background: var(--km-red-l);
  color: var(--km-red);
}

.km-sp-al {
  background: #fef9c3;
  color: #92400e;
}

/* Progress bar */
.km-pbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.km-pbar-bg {
  flex: 1;
  height: 5px;
  background: var(--km-g200);
  border-radius: 3px;
  overflow: hidden;
}

.km-pbar-fill {
  height: 100%;
  border-radius: 3px;
}

.km-pbar-n {
  font-size: 12px;
  font-weight: 600;
  color: var(--km-amber);
  min-width: 28px;
}

/* Reference cell */
.km-ref {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  background: var(--km-g100);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--km-g600);
}

/* Delivery badges */
.km-del {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
}

.km-d-ok {
  background: var(--km-green-l);
  color: var(--km-green);
}

.km-d-pe {
  background: var(--km-amber-l);
  color: var(--km-amber);
}

.km-d-fa {
  background: var(--km-red-l);
  color: var(--km-red);
}

.km-d-tr {
  background: var(--km-blue-l);
  color: var(--km-blue);
}

/* Pagination */
.km-pagination {
  padding: 11px 14px;
  border-top: 1px solid var(--km-g100);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Notification scheduler grid */
.km-notif-grid {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 14px;
}

.km-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Notice timeline */
.km-ntl {
  display: flex;
  flex-direction: column;
}

.km-nt {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--km-g100);
}

.km-nt-last {
  border-bottom: none;
  padding-bottom: 0;
}

.km-nd-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.km-nd {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid;
  flex-shrink: 0;
}

.km-nd1 {
  background: var(--km-blue-l);
  border-color: #93c5fd;
  color: var(--km-blue);
}

.km-nd2 {
  background: var(--km-amber-l);
  border-color: #fcd34d;
  color: var(--km-amber);
}

.km-nd3 {
  background: var(--km-orange-l);
  border-color: #fdba74;
  color: var(--km-orange);
}

.km-ndf {
  background: var(--km-red-l);
  border-color: #fca5a5;
  color: var(--km-red);
}

.km-ndi {
  background: #fee2e2;
  border-color: #f87171;
  color: #991b1b;
}

.km-ndd {
  background: var(--km-g100);
  border-color: var(--km-g300);
  color: var(--km-g500);
}

.km-nl {
  width: 1px;
  flex: 1;
  background: var(--km-g200);
  margin-top: 4px;
}

.km-nh {
  font-size: 13px;
  font-weight: 600;
  color: var(--km-g800);
}

.km-warn {
  color: var(--km-amber);
}

.km-warn-o {
  color: var(--km-orange);
}

.km-warn-d {
  color: var(--km-g600);
}

.km-ns {
  font-size: 11px;
  color: var(--km-g500);
  margin-top: 1px;
  margin-bottom: 5px;
}

.km-ok {
  color: var(--km-green);
  font-weight: 600;
}

.km-pending {
  color: var(--km-amber);
  font-weight: 600;
}

.km-fail {
  color: var(--km-red);
  font-weight: 600;
}

.km-ntags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.km-cp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid;
}

.km-cp-sms {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #93c5fd;
}

.km-cp-mail {
  background: #f0fdf4;
  color: #15803d;
  border-color: #86efac;
}

.km-cp-ivr {
  background: #faf5ff;
  color: #7c3aed;
  border-color: #c4b5fd;
}

/* Escalation ladder: a rung waiting on an earlier channel is dimmed so the one actionable
   dispatch is unmistakable. */
.km-nt-locked {
  opacity: 0.55;
}

.km-locked {
  color: #94a3b8;
  font-weight: 500;
}

.km-nnotice {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.km-nchdetail {
  color: #64748b;
  font-size: 11px;
}

/* The one live channel is outlined; completed ones stay green, waiting ones recede. */
.km-channel-live {
  border-color: var(--km-amber, #f59e0b) !important;
  background: #fffbeb !important;
  box-shadow: 0 0 0 2px rgb(245 158 11 / 18%);
}

.km-channel-off {
  opacity: 0.5;
}

.km-channel-s {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
}

/* Sequence cards are read-only, so they must not invite a click the way the old toggles did. */
.km-channels .km-channel {
  cursor: default;
}

.km-cp-post {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fdba74;
}

.km-cp-vis {
  background: var(--km-teal-l);
  color: var(--km-teal);
  border-color: #5eead4;
}

.km-cp-vid {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #a78bfa;
}

.km-row-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Channels grid */
.km-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.km-channel {
  border: 1px solid var(--km-g200);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
}

.km-channel-on {
  border-color: var(--km-teal);
  background: var(--km-teal-l);
}

.km-channel-i {
  font-size: 16px;
  margin-bottom: 3px;
}

.km-channel-n {
  font-size: 11px;
  font-weight: 600;
}

.km-channel-d {
  font-size: 10px;
  color: var(--km-g500);
}

/* Meta items */
.km-mi {
  background: var(--km-g50);
  border: 1px solid var(--km-g100);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.km-ml {
  font-size: 10px;
  font-weight: 600;
  color: var(--km-g400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.km-mv {
  font-size: 13px;
  font-weight: 600;
  color: var(--km-g800);
}

/* Account status cards */
.km-sc-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.km-sc {
  border: 1.5px solid;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s;

  &:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  }
}

.km-sc-ac {
  border-color: #86efac;
  background: var(--km-green-l);

  .km-sc-l,
  .km-sc-d {
    color: #166534;
  }

  .km-sc-n {
    color: var(--km-green);
  }
}

.km-sc-fr {
  border-color: #fcd34d;
  background: var(--km-amber-l);

  .km-sc-l,
  .km-sc-d {
    color: #92400e;
  }

  .km-sc-n {
    color: var(--km-amber);
  }
}

.km-sc-in {
  border-color: #fdba74;
  background: var(--km-orange-l);

  .km-sc-l,
  .km-sc-d {
    color: #7c2d12;
  }

  .km-sc-n {
    color: var(--km-orange);
  }
}

.km-sc-do {
  border-color: #fca5a5;
  background: var(--km-red-l);

  .km-sc-l,
  .km-sc-d {
    color: #7f1d1d;
  }

  .km-sc-n {
    color: var(--km-red);
  }
}

.km-sc-al {
  border-color: #fde047;
  background: #fef9c3;

  .km-sc-l,
  .km-sc-d {
    color: #713f12;
  }

  .km-sc-n {
    color: #92400e;
  }
}

.km-sc-l {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.km-sc-n {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 2px;
}

.km-sc-d {
  font-size: 11px;
}

/* 2-col layout */
.km-r2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.km-mt {
  margin-top: 14px;
}

.km-mb {
  margin-bottom: 14px;
}

/* Rules */
.km-rule {
  padding: 11px 16px;
  border-bottom: 1px solid var(--km-g100);
}

.km-rule-last {
  border-bottom: none;
}

.km-rule-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.km-rule-t {
  font-weight: 600;
  font-size: 13px;
}

.km-rule-d {
  font-size: 12px;
  color: var(--km-g500);
}

.km-rule-tags {
  margin-top: 5px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* Manual override warning */
.km-warn-box {
  margin-top: 10px;
  padding: 10px;
  background: var(--km-amber-l);
  border-radius: 8px;
  border: 1px solid #fcd34d;
  font-size: 11px;
}

.km-warn-t {
  font-weight: 700;
  color: var(--km-amber);
}

/* MODAL */
.km-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 45%);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.km-modal {
  background: #fff;
  border-radius: 16px;
  width: 900px;
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgb(0 0 0 / 20%);
}

.km-mh {
  padding: 18px 22px;
  border-bottom: 1px solid var(--km-g200);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.km-mh-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--km-teal), var(--km-navy-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.km-mh-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--km-g900);
}

.km-mh-meta {
  font-size: 12px;
  color: var(--km-g500);
  margin-top: 1px;
}

.km-mclose {
  width: 30px;
  height: 30px;
  border: 1px solid var(--km-g200);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: var(--km-g500);
  margin-left: auto;
  flex-shrink: 0;

  &:hover {
    background: var(--km-g100);
  }
}

.km-mbody {
  overflow-y: auto;
  flex: 1;
  padding: 20px 22px;
}

.km-mtab-bar {
  display: flex;
  gap: 2px;
  background: var(--km-g100);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 18px;
}

.km-mtab {
  flex: 1;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--km-g500);
  border: none;
  background: transparent;
  font-family: inherit;

  &.active {
    background: #fff;
    color: var(--km-g900);
    border: 0.5px solid var(--km-g200);
    font-weight: 600;
  }
}

.km-slbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--km-g400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

/* Stepper */
.km-prog-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 18px;
}

.km-ps {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;

  &:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--km-g200);
    z-index: 0;
  }
}

.km-ps-done::after {
  background: var(--km-teal);
}

.km-ps-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--km-g300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--km-g400);
  z-index: 1;
  position: relative;
}

.km-ps-done .km-ps-dot {
  background: var(--km-teal);
  border-color: var(--km-teal);
  color: #fff;
}

.km-ps-current .km-ps-dot {
  background: #fff;
  border-color: var(--km-amber);
  color: var(--km-amber);
}

.km-ps-danger .km-ps-dot {
  background: #fff;
  border-color: var(--km-red);
  color: var(--km-red);
}

.km-ps-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--km-g500);
  text-align: center;
  max-width: 70px;
}

.km-ps-done .km-ps-label {
  color: var(--km-teal);
}

.km-ps-current .km-ps-label {
  color: var(--km-amber);
  font-weight: 600;
}

.km-ps-danger .km-ps-label {
  color: var(--km-red);
  font-weight: 600;
}

/* Next action banner */
.km-next-banner {
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 12px;
}

.km-nb-alert {
  background: var(--km-amber-l);
  border-color: #fcd34d;
}

.km-nb-urgent {
  background: var(--km-orange-l);
  border-color: #fdba74;
}

.km-nb-freeze {
  background: var(--km-amber-l);
  border-color: #fcd34d;
}

.km-nb-inop {
  background: var(--km-orange-l);
  border-color: #fdba74;
}

.km-nb-dormant {
  background: var(--km-red-l);
  border-color: #fca5a5;
}

.km-nb-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.km-nb-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}

.km-nb-sub {
  font-size: 12px;
}

/* Modal stat strip */
.km-mstat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.km-mstat {
  background: var(--km-g50);
  border: 1px solid var(--km-g100);
  border-radius: 8px;
  padding: 12px;
}

.km-mstat-n {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--km-teal);
}

.km-mstat-l {
  font-size: 11px;
  color: var(--km-g500);
}

/* Modal meta grid */
.km-mg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.km-mi-span {
  grid-column: span 2;
}

/* Modal timeline */
.km-mtl {
  display: flex;
  flex-direction: column;
}

.km-mti {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--km-g100);

  &:last-child {
    border-bottom: none;
  }
}

.km-mti-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid;
  flex-shrink: 0;
}

.km-mti-done {
  background: var(--km-green-l);
  border-color: var(--km-green);
  color: var(--km-green);
}

.km-mti-pend {
  background: var(--km-amber-l);
  border-color: var(--km-amber);
  color: var(--km-amber);
}

.km-mti-text {
  font-size: 13px;
  font-weight: 500;
}

.km-done {
  color: var(--km-g700);
}

.km-pend {
  color: var(--km-amber);
}

.km-mti-sub {
  font-size: 11px;
  color: var(--km-g400);
  margin-top: 2px;
}

.km-pending-row {
  text-align: center;
  color: var(--km-amber);
  font-size: 12px;
  padding: 12px;
  background: #fffbeb;
}

/* Empty state */
.km-empty {
  text-align: center;
  padding: 40px;
  color: var(--km-g400);
}

.km-empty-i {
  font-size: 28px;
  margin-bottom: 8px;
}

.km-empty-s {
  font-size: 12px;
  margin-top: 4px;
}

/* Evidence */
.km-map {
  background: var(--km-g100);
  border: 1px solid var(--km-g200);
  border-radius: 8px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--km-g500);
  margin-bottom: 14px;
}

.km-photo {
  background: var(--km-g100);
  border: 1px solid var(--km-g200);
  border-radius: 8px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--km-g500);
  margin-bottom: 14px;
}

.km-notes {
  background: var(--km-g50);
  border: 1px solid var(--km-g200);
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  color: var(--km-g700);
  line-height: 1.6;
}

/* Action panel */
.km-action-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.km-action-row {
  background: var(--km-g50);
  border: 1px solid var(--km-g200);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.km-action-t {
  font-size: 13px;
  font-weight: 600;
}

.km-action-d {
  font-size: 12px;
  color: var(--km-g500);
}

/* Toast */
.km-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--km-g900);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 1300;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.25s;
  pointer-events: none;

  &.show {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (width <= 900px) {
  .km-stat-row,
  .km-sc-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .km-r2,
  .km-notif-grid {
    grid-template-columns: 1fr;
  }

  .km-mstat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .km-prog-steps {
    flex-wrap: wrap;
    gap: 10px;
  }

  .km-ps::after {
    display: none;
  }
}

/* Home Visit Schedule Dialog */
.hv-modal {
  width: 520px;
}

.hv-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
}

.hv-addr {
  background: #f8fafc;
  border: 1px solid var(--km-g200);
  border-radius: 10px;
  padding: 12px 14px;
}

.hv-addr-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 4px;
}

.hv-addr-name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
}

.hv-addr-text {
  font-size: 13px;
  color: #334155;
  line-height: 1.4;
}

.hv-addr-branch {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.hv-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hv-label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}

.hv-req {
  color: #dc2626;
  margin-left: 2px;
}

.hv-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--km-g200);
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
  font-family: inherit;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.hv-input:focus {
  outline: none;
  border-color: var(--km-teal);
  box-shadow: 0 0 0 3px rgb(20 184 166 / 15%);
}

.hv-textarea {
  resize: vertical;
  min-height: 60px;
}

/* Inline note under a field. The default (neutral) form states that nothing is transmitted;
   the -send and -error variants call out the two cases the officer must not misread. */
.hv-hint {
  font-size: 11px;
  line-height: 1.45;
  color: var(--km-g500);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.hv-hint-send {
  color: #0f766e;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 4px;
  padding: 6px 8px;
  font-weight: 500;
}

.hv-hint-error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 6px 8px;
  font-weight: 500;
}

/* Delivery outcome chip on a contact-log row. A logged attempt and a delivered notice are
   different facts, so they never share a colour. */
.km-sent-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: baseline;
}

.km-sent-ok {
  background: #e6f4ea;
  color: #137333;
}

.km-sent-fail {
  background: #fef2f2;
  color: #b91c1c;
}

.hv-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--km-g200);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.km-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Video KYC Dialog */
.vkyc-ic {
  color: var(--km-teal);
  margin-right: 6px;
  font-size: 12px;
}

.vkyc-chans {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.vkyc-chan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  user-select: none;
}

.vkyc-chan input {
  accent-color: var(--km-teal);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.vkyc-hint {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.vkyc-link {
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 9px 12px;
  font-family: 'Roboto Mono', 'DM Mono', monospace;
  font-size: 12px;
  color: #0f172a;
  word-break: break-all;
}

/* KYC Exceptions Styles */
.km-ci-e {
  background: var(--km-amber-l) !important;
  color: var(--km-amber) !important;
}

.contact-logs-list {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
  }
}