/* NikoHealth mock UI. Values follow the captured NikoHealth v2 styles. */
:root {
  --primary: #16aeff;
  --primary-hover: #64bff0;
  --navy: #2a3f54;
  --text: #333333;
  --text-muted: #606060;
  --label: #606060;
  --light-label: #8a8a8a;
  --page-bg: #f0f3f7;
  --crumb-bg: #dfe5ec;
  --border: #e4e7eb;
  --line: #cccccc;
  --green: #4caf50;
  --active-green: #3fae29;
  --orange: #ff6d00;
  --red: #e53935;
  --shadow: 0 1px 3px rgba(10, 10, 10, 0.15);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  color: var(--text);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; }
.svg-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svg-icon svg { width: 100%; height: 100%; fill: currentColor; }
.hidden { display: none !important; }

/* ---------- loading ---------- */
.app-loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }

/* ---------- top menu ---------- */
.top-menu {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 70px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: #ffffff;
  border-top: 2px solid var(--primary);
  box-shadow: 0 2px 6px rgba(42, 63, 84, 0.08);
}
.top-menu nav { display: flex; align-items: stretch; }
.main-logo { display: flex; align-items: center; margin: 0 40px 0 30px; }
.menu-items-container { display: flex; height: 100%; }
.menu-item { position: relative; display: flex; align-items: center; height: 100%; margin: 0 6px 0 0; padding: 4px 12px 0; }
.menu-item a { display: flex; align-items: center; font-weight: 500; text-transform: uppercase; white-space: nowrap; color: var(--navy); font-size: 14px; }
.menu-item .svg-icon { width: 24px; height: 24px; margin: 0 10px 0 0; color: var(--navy); }
.menu-item.active a, .menu-item.active .svg-icon, .menu-item:hover a, .menu-item:hover .svg-icon { color: var(--primary); }
.menu-item::after { content: ""; position: absolute; bottom: 0; left: 0; display: none; width: 100%; height: 4px; background: linear-gradient(94.77deg, #3daff4 13.59%, #015694 102.2%); }
.menu-item:hover::after { display: block; }
.top-actions { display: flex; align-items: center; gap: 26px; padding-right: 30px; color: var(--navy); }
.top-actions .svg-icon { width: 24px; height: 24px; cursor: pointer; }
.top-actions .avatar { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; opacity: 0.35; }
.user-menu { position: absolute; top: 62px; right: 20px; min-width: 200px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.18); border-radius: 4px; padding: 8px 0; z-index: 200; }
.user-menu .user-name { padding: 8px 18px; font-weight: 500; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.user-menu button { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 8px 18px; font-size: 14px; cursor: pointer; }
.user-menu button:hover { background: #f5f7fa; }
.demo-ribbon { position: fixed; bottom: 6px; right: 10px; z-index: 300; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: #9aa6b2; }

.main-app-container { display: flex; align-items: stretch; padding-top: 70px; height: 100vh; width: 100%; }
.main-app-view { flex-grow: 1; width: 100%; overflow-y: auto; background: var(--page-bg); }

/* ---------- breadcrumbs ---------- */
.breadcrumbs { background: var(--crumb-bg); padding: 11px 20px; font-size: 11px; line-height: 16px; color: #000; min-height: 40px; display: flex; align-items: center; }
.breadcrumbs a { color: var(--primary); }
.breadcrumbs .sep { margin: 0 4px; color: #000; }

/* ---------- common widgets ---------- */
.card { background: #fff; border-radius: 3px; box-shadow: var(--shadow); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 3px; cursor: pointer; font-size: 14px; line-height: 20px; padding: 8px 16px; background: #eef1f4; color: var(--text); white-space: nowrap; }
.btn .svg-icon { width: 18px; height: 18px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-raised { background: #f8f8f8; box-shadow: var(--shadow); color: var(--text); }
.btn-flat { background: #eef1f4; font-weight: 500; }
.btn-outline { background: #fff; border: 1px solid var(--navy); color: #000; padding: 7px 8px; }
.icon-btn { border: 0; background: none; padding: 4px; cursor: pointer; color: var(--navy); display: inline-flex; }
.icon-btn .svg-icon { width: 20px; height: 20px; }

.field { position: relative; display: flex; flex-direction: column; }
.field input, .field select {
  border: 0;
  border-bottom: 1px solid #b8bec6;
  background: transparent;
  font: inherit;
  font-size: 14px;
  padding: 6px 2px 5px;
  outline: none;
  color: var(--text);
}
.field input::placeholder { color: var(--text-muted); }
.field input:focus, .field select:focus { border-bottom: 2px solid var(--primary); padding-bottom: 4px; }
.field .clear-field { position: absolute; right: 2px; bottom: 6px; cursor: pointer; color: #999; font-size: 16px; line-height: 1; }
.box-input { border: 1px solid #d5dae0; border-radius: 3px; padding: 8px 10px; font: inherit; font-size: 16px; color: var(--text); background: #fff; outline: none; }
.box-input:focus { border-color: var(--primary); }

.label { font-size: 11px; line-height: 14px; color: var(--label); margin-bottom: 4px; }
.value { font-size: 16px; line-height: 20px; color: var(--text); word-break: break-word; }
.value.bold { font-weight: 700; }
.status-chip { display: inline-block; font-size: 11px; line-height: 16px; font-weight: 500; color: #fff; padding: 0 8px; border-radius: 2px; min-width: 50px; text-align: center; }
.status-chip.active { background: #8bc34a; }
.status-chip.green { background: var(--active-green); font-size: 12px; line-height: 18px; padding: 0 9px; }
.status-chip.inactive { background: #9e9e9e; }
.status-chip.primary { background: var(--primary); min-width: 90px; }
.status-chip.review { background: var(--orange); min-width: 90px; }
.status-chip.new { background: var(--active-green); min-width: 100px; padding: 2px 8px; }
.status-chip.outline-review { background: #fff; color: #9e9e9e; border: 1px solid #9e9e9e; }
.type-chip { display: inline-block; background: #eef1f4; font-size: 11px; line-height: 18px; font-weight: 500; padding: 0 6px; border-radius: 3px; }

.no-content { display: flex; align-items: center; justify-content: center; gap: 16px; color: #c2c7cc; font-size: 24px; font-weight: 300; line-height: 32px; padding: 60px 20px; text-align: left; }
.no-content .svg-icon { width: 280px; height: 280px; color: #e3e6ea; }
.no-content.small { justify-content: flex-start; font-size: 14px; line-height: 20px; padding: 14px 0; gap: 14px; }
.no-content.small .svg-icon { width: 44px; height: 44px; }
.no-content.medium { font-size: 16px; padding: 20px 0; justify-content: flex-start; gap: 16px; }
.no-content.medium .svg-icon { width: 46px; height: 46px; }

.section-title { display: flex; align-items: center; gap: 8px; color: var(--primary); font-size: 12px; font-weight: 500; text-transform: uppercase; cursor: pointer; user-select: none; }
.section-title::after { content: ""; flex: 1; height: 1px; background: #e8ebef; margin-left: 8px; }
.section-title .chev { width: 13px; height: 13px; border-radius: 2px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; }
.section-title .chev::before { content: "\25B2"; transform: scaleX(1.2); }
.section-title.collapsed .chev::before { content: "\25BC"; }

/* ---------- dashboard ---------- */
.dashboard { padding: 30px 20px; display: flex; flex-direction: column; gap: 30px; }
.dash-top { display: flex; align-items: center; gap: 70px; }
.quick-search { width: 556px; padding: 34px 20px 22px; }
.stat-list { display: flex; align-items: center; flex: 1; justify-content: space-around; }
.stat { display: flex; align-items: center; gap: 12px; padding: 0 24px; border-right: 1px solid #dde2e8; cursor: pointer; }
.stat:last-child { border-right: 0; }
.stat .stat-icon { width: 52px; height: 52px; border-radius: 50%; border: 3px solid #b7c0ca; color: #b7c0ca; display: flex; align-items: center; justify-content: center; }
.stat .stat-icon .svg-icon { width: 28px; height: 28px; }
.stat .num { font-size: 44px; color: var(--primary); font-weight: 400; line-height: 1; }
.stat .cap { font-size: 15px; line-height: 20px; color: var(--navy); font-weight: 500; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15px; color: var(--navy); text-transform: uppercase; }
.comm-body { display: flex; min-height: 510px; }
.comm-users { width: 300px; border-right: 1px solid var(--border); padding: 20px; }
.comm-user { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.comm-user img { width: 38px; height: 38px; border-radius: 50%; }
.comm-main { flex: 1; display: flex; flex-direction: column; }
.comm-main .no-content { flex: 1; }
.comm-input { display: flex; align-items: center; gap: 20px; padding: 20px 25px; border-top: 1px solid var(--border); }
.comm-input .field { flex: 1; }
.news-cols { display: grid; grid-template-columns: repeat(3, 1fr); padding: 20px; gap: 0; }
.news-col { padding: 0 20px; border-right: 1px solid #dde2e8; }
.news-col:first-child { padding-left: 0; }
.news-col:last-child { border-right: 0; }
.news-date { font-size: 11px; color: var(--light-label); }
.news-head { color: var(--primary); font-weight: 500; text-transform: uppercase; font-size: 16px; margin: 4px 0 8px; }
.news-text { color: var(--text); line-height: 20px; }

/* ---------- patient list ---------- */
.wizard { min-height: calc(100vh - 110px); padding: 20px; position: relative; }
.plus-fab { position: absolute; top: -20px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; font-size: 26px; line-height: 38px; cursor: pointer; box-shadow: var(--shadow); z-index: 5; }
.plus-fab:hover { background: var(--primary-hover); }
.filters-card { display: flex; align-items: flex-end; padding: 16px 20px 14px; margin-bottom: 20px; }
.filters-card .field { margin-right: 25px; }
.filters-card .field input::placeholder { color: var(--text); }
.filter-btn { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 18px; border: 0; border-radius: 3px; background: #eef1f4; font-weight: 500; font-size: 14px; cursor: pointer; margin-left: auto; margin-right: 30px; }
.filter-btn .svg-icon { width: 18px; height: 18px; }
.select-all-block { display: flex; align-items: center; gap: 15px; white-space: nowrap; }
.select-all-block .svg-icon { width: 20px; height: 20px; color: #000; }
.grid-header { display: flex; align-items: stretch; margin: 7px 0 7px; padding: 10px 0; }
.grid-header-item { padding: 2px 9px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.grid-header-item:first-child { padding-left: 20px; }
.grid-header-item .svg-icon { width: 18px; height: 18px; color: #7d8a97; }
.grid-header-item.sortable { cursor: pointer; }
.grid-header-item .sort-arrow { font-size: 10px; color: var(--navy); }
.grid-row { display: flex; align-items: stretch; margin-bottom: 7px; line-height: 18px; background: #fff; border-radius: 3px; box-shadow: var(--shadow); cursor: pointer; min-height: 100px; position: relative; }
.grid-row:hover { box-shadow: 0 2px 8px rgba(10,10,10,.2); }
.grid-cell { padding: 20px 9px; display: flex; align-items: center; font-size: 16px; line-height: 18px; color: #545454; border-right: 1px solid #f0f1f3; }
.grid-cell:first-child { padding-left: 20px; }
.grid-cell:last-child { border-right: 0; }
.grid-cell .muted { color: #a0a0a0; font-size: 14px; }
.grid-cell.small { font-size: 14px; color: #8a8a8a; flex-direction: column; align-items: flex-start; justify-content: center; }
.w50 { width: 50px; flex-shrink: 0; } .w110 { width: 110px; flex-shrink: 0; } .w130 { width: 130px; flex-shrink: 0; }
.w180 { width: 180px; flex-shrink: 0; } .w200 { width: 200px; flex-shrink: 0; } .w250 { width: 250px; flex-shrink: 0; }
.w100 { width: 100px; flex-shrink: 0; } .w90 { width: 90px; flex-shrink: 0; }
.grow { flex: 1 1 auto; min-width: 120px; }
.cb { width: 18px; height: 18px; border: 2px solid #8a939c; border-radius: 2px; appearance: none; margin: 0; cursor: pointer; background: #fff; }
.cb:checked { background: var(--primary); border-color: var(--primary); }
.info-dot { display: inline-flex; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; background: #c9ced4; color: #fff; font-size: 11px; font-style: italic; font-weight: 700; align-items: center; justify-content: center; }
.row-chevron { width: 20px; height: 20px; color: #6b7785; }
.list-footer { text-align: center; color: var(--text-muted); padding: 16px; }

/* ---------- patient view ---------- */
.patient-page { display: flex; flex-direction: column; min-height: 100%; }
.patient-head { display: flex; align-items: stretch; background: var(--crumb-bg); min-height: 48px; }
.patient-head .breadcrumbs { width: 300px; flex-shrink: 0; border-right: 1px solid #cfd6de; min-height: 48px; }
.tabs-bar { flex: 1; display: flex; align-items: center; overflow: hidden; }
.tabs-scroll { border: 0; background: none; padding: 0 12px; cursor: pointer; color: var(--navy); font-size: 18px; }
.tabs-scroll:disabled { color: #b5bec8; cursor: default; }
.tabs { display: flex; overflow: hidden; scroll-behavior: smooth; flex: 1; }
.tabs a { padding: 14px 10px; font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--navy); white-space: nowrap; position: relative; }
.tabs a.active { color: var(--primary); }
.tabs a .tab-badge { display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.quick-actions-btn { width: 34px; height: 34px; margin: 7px 20px 7px 10px; border: 0; border-radius: 3px; background: var(--primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quick-actions-btn .svg-icon { width: 20px; height: 20px; }
.quick-menu { position: absolute; top: 54px; right: 20px; width: 244px; background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.2); padding: 8px 0; z-index: 50; }
.quick-menu button { display: flex; align-items: center; gap: 16px; width: 100%; border: 0; background: none; padding: 9px 26px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; text-align: left; }
.quick-menu button:hover { background: #f5f7fa; }
.quick-menu button .svg-icon { width: 18px; height: 18px; color: var(--navy); }
.quick-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 8px; }

.patient-body { display: flex; flex: 1; align-items: stretch; background: #fff; }
.patient-sidebar { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; position: relative; }
.patient-sidebar .sidebar-scroll { flex: 1; padding: 14px 20px 20px; }
.patient-card { display: flex; gap: 20px; }
.patient-card .photo { width: 96px; height: 96px; border-radius: 50%; background: #e4e7ea url("../assets/avatar.jpg") center / cover no-repeat; flex-shrink: 0; }
.patient-card .name { font-size: 18px; line-height: 22px; font-weight: 500; color: #000; margin-top: 2px; }
.patient-card .dob { font-size: 14px; margin-top: 6px; }
.patient-card .dob i { color: var(--text-muted); }
.patient-card .pid { font-size: 14px; margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.patient-card .pid .svg-icon { width: 18px; height: 18px; color: #9aa4ae; cursor: pointer; }
.patient-card .status-line { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.patient-card .status-line .svg-icon { width: 20px; height: 20px; color: #3d4f63; cursor: pointer; }
.gender-icon { width: 16px; height: 16px; color: var(--primary); margin: 14px 0 0; display: block; }
.side-section { margin-top: 26px; }
.side-section .side-title { display: flex; align-items: center; font-size: 12px; font-weight: 500; text-transform: uppercase; color: #000; cursor: pointer; }
.side-section .side-title::after { content: ""; flex: 1; height: 1px; background: #e8ebef; margin: 0 8px; }
.side-section .side-title .caret { order: 2; color: #9aa4ae; font-size: 12px; }
.side-section.collapsed .side-body { display: none; }
.side-body { padding-top: 12px; }
.side-row { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.side-row .ring, .side-ins .ring { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #c9d0d7; color: #b3bcc6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.side-row .ring .svg-icon, .side-ins .ring .svg-icon { width: 20px; height: 20px; }
.side-row .label { margin-bottom: 2px; }
.side-row .value { font-size: 14px; line-height: 20px; }
.side-row .value a { text-decoration: underline; }
.side-ins { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.side-ins .grow { min-width: 0; }
.side-ins .ins-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sidebar-collapse { height: 40px; background: var(--crumb-bg); display: flex; align-items: center; justify-content: flex-end; padding-right: 20px; color: #8795a4; font-size: 18px; }

.patient-content { flex: 1; min-width: 0; padding: 20px 15px; position: relative; }

/* demographics */
.demo-top { display: flex; align-items: flex-start; gap: 0; margin-bottom: 30px; }
.demo-top .col { padding-right: 30px; margin-right: 10px; border-right: 1px solid #eef0f2; min-width: 190px; }
.demo-top .col:nth-child(1) { width: 345px; }
.demo-top .col:last-of-type { border-right: 0; }
.demo-top .value i { font-style: italic; }
.demo-top .btn { margin-left: auto; }
.info-grid { display: grid; grid-template-columns: 145px 1fr; column-gap: 0; }
.kv { padding: 0 10px 16px 0; border-right: 1px solid #eef0f2; margin-right: 10px; }
.kv:last-child { border-right: 0; }
.kv-row { display: flex; }
.kv-row > .kv { flex: 1; }
.demo-sections { display: flex; gap: 0; }
.demo-main { flex: 1; min-width: 0; }
.demo-contacts { width: 270px; flex-shrink: 0; padding-left: 15px; border-left: 1px solid #eef0f2; }
.show-map { font-size: 16px; }
.collapsed-sections .section-title { margin: 22px 0; }

/* medical records */
.mr-block { margin-bottom: 30px; }
.mr-add { display: flex; align-items: flex-end; gap: 30px; margin: 40px 0 22px; }
.mr-add .field { flex: 1; }
.mr-add .field input::placeholder { color: var(--text-muted); font-size: 14px; }
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th { background: #f0f3f7; text-align: left; font-size: 11px; font-weight: 500; color: #000; padding: 9px 10px; }
.simple-table td { padding: 14px 10px; font-size: 14px; border-bottom: 1px solid #f2f3f5; }
.trash { color: #e53935; }

/* insurance */
.pill-tabs { display: flex; gap: 10px; margin: 0 0 0 10px; }
.pill-tabs button { border: 0; border-radius: 16px; padding: 6px 15px; font-size: 14px; background: #eef1f4; color: var(--text); cursor: pointer; }
.pill-tabs button.active { background: var(--primary); color: #fff; }
.ins-toolbar { display: flex; justify-content: flex-end; gap: 10px; margin: 0 5px 14px; padding-bottom: 14px; border-bottom: 1px solid #eef0f2; }
.ins-row { display: flex; align-items: flex-start; padding: 20px 30px 20px 30px; border-bottom: 1px solid #eef0f2; position: relative; }
.ins-row .badges { width: 110px; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.ins-row .col { padding: 0 10px 0 10px; border-right: 1px solid #eef0f2; min-height: 96px; }
.ins-row .col:last-of-type { border-right: 0; }
.ins-row .c-name { width: 145px; } .ins-row .c-plan { width: 180px; } .ins-row .c-policy { width: 180px; }
.ins-row .c-created, .ins-row .c-mod { width: 138px; } .ins-row .c-ver { width: 140px; }
.ins-row .value a { color: var(--primary); }
.ins-row .benefits { display: flex; align-items: center; gap: 20px; align-self: center; margin-left: 12px; }
.ins-row .benefits .svg-icon { width: 22px; height: 22px; color: #8795a4; }
.row-actions { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: none; gap: 4px; }
.ins-row:hover .row-actions { display: flex; }

.ins-edit { padding: 30px 20px; }
.ins-edit .card { margin-bottom: 30px; }
.ins-edit .card-head { background: var(--crumb-bg); padding: 16px 20px; color: #4d6177; font-size: 16px; font-weight: 500; text-transform: uppercase; border-radius: 3px 3px 0 0; }
.ins-edit .card-head .bar { color: var(--primary); margin: 0 8px; }
.ins-edit .card-body { padding: 20px 20px 10px; }
.ins-edit .sub-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #000; display: flex; align-items: center; margin: 10px 0 20px; }
.ins-edit .sub-title::after { content: ""; flex: 1; height: 1px; background: #e8ebef; margin-left: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px 25px; margin: 0 15px 30px; }
.form-split { display: flex; }
.form-split .form-grid { flex: 1; }
.form-side { width: 380px; border-left: 1px solid #eef0f2; padding-left: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 25px; align-content: start; }
.ro-field .label { font-size: 11px; }
.ro-field .ro-value { font-size: 16px; border-bottom: 1px solid #b8bec6; padding: 4px 0 4px; min-height: 29px; }
.ro-field.placeholder .ro-value { color: var(--text-muted); }
.ins-edit .actions { display: flex; justify-content: flex-end; gap: 12px; padding: 0 0 20px; }

/* documents */
.doc-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 20px; border-bottom: 1px solid var(--border); }
.doc-toolbar .label-inline { font-size: 12px; color: #000; }
.doc-toolbar .box-input { width: 356px; }
.doc-toolbar .spacer { flex: 1; }
.patient-content.flush { padding: 12px 0 0; }
.doc-grid-head { display: flex; align-items: center; background: #f5f7f9; border-bottom: 1px solid var(--border); padding: 12px 20px; font-size: 14px; font-weight: 500; color: #000; }
.doc-row { display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: 14px; }
.doc-row:hover { background: #f8fafc; }
.doc-row .doc-name { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.doc-row .doc-name .svg-icon { width: 18px; height: 18px; color: #555; }
.doc-row .updated { font-size: 12px; color: var(--text-muted); }
.doc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 280px 0 40px; color: var(--text-muted); font-size: 16px; gap: 30px; }
.doc-empty .svg-icon { width: 150px; height: 140px; color: #dde3ea; }

.add-docs { display: flex; min-height: calc(100vh - 110px); background: #f7f8fa; }
.add-docs .left { width: 400px; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.add-docs .left-tabs { display: flex; border-bottom: 1px solid var(--border); }
.add-docs .left-tabs div { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 14px 0; font-size: 14px; font-weight: 500; color: #5a6470; }
.add-docs .left-tabs div.active { color: #000; border-bottom: 2px solid var(--primary); }
.dropzone { margin: 8px; border: 2px dashed #d9dee4; border-radius: 6px; background: #f1f3f6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #333; cursor: pointer; }
.dropzone.big { flex: 1; }
.dropzone.small { padding: 18px 0; }
.dropzone.drag { border-color: var(--primary); background: #e8f6ff; }
.dropzone .svg-icon { width: 22px; height: 22px; color: var(--primary); }
.dropzone .link { color: var(--primary); font-weight: 500; }
.dropzone .types { font-size: 11px; color: #9aa4ae; }
.uploaded-head { display: flex; justify-content: space-between; padding: 18px 24px 12px; color: #5a6470; font-size: 14px; }
.uploaded-file { display: flex; align-items: center; gap: 14px; margin: 0 8px 6px; padding: 12px 20px; border-radius: 4px; cursor: pointer; }
.uploaded-file.selected { background: #eef1f6; }
.uploaded-file > .svg-icon { width: 22px; height: 22px; color: #333; }
.uploaded-file .fname { font-size: 14px; }
.uploaded-file .fsize { font-size: 11px; color: #9aa4ae; }
.uploaded-file .x { margin-left: auto; border: 0; background: none; font-size: 22px; cursor: pointer; }
.add-docs .right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.add-docs .right-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; color: var(--text-muted); font-size: 16px; }
.doc-form { padding: 14px 20px; }
.doc-form h2 { margin: 0 0 18px; font-size: 20px; font-weight: 500; color: #000; }
.doc-form .row { display: flex; gap: 20px; }
.doc-form .label { color: #000; }
.doc-form select.box-input { width: 300px; }
.doc-form .notes { flex: 1; position: relative; }
.doc-form .notes .box-input { width: 100%; }
.doc-form .notes .count { position: absolute; right: 8px; top: 30px; color: var(--text-muted); }
.preview { flex: 1; margin: 0 20px; border: 1px solid var(--border); background: #d7d7d7; min-height: 400px; }
.preview iframe, .preview img { width: 100%; height: 100%; min-height: 560px; border: 0; background: #fff; }
.save-bar { display: flex; justify-content: flex-end; gap: 12px; padding: 12px; border-top: 1px solid var(--border); background: #fff; }
.save-bar .btn { min-width: 100px; padding: 10px 20px; font-size: 16px; }

/* orders */
.orders-filters { display: flex; align-items: flex-end; gap: 20px; padding: 0 10px 18px; border-bottom: 1px solid #eef0f2; margin-bottom: 20px; }
.order-card { display: flex; gap: 0; padding: 0 10px 20px; }
.order-state { width: 120px; padding-right: 20px; border-right: 1px solid #eef0f2; }
.order-steps { margin-top: 36px; display: flex; flex-direction: column; gap: 30px; font-size: 11px; color: #9aa4ae; }
.order-steps div { display: flex; align-items: center; gap: 10px; }
.order-steps .dot { width: 20px; height: 20px; border-radius: 50%; background: #c9d0d7; }
.order-steps .current { color: #000; }
.order-steps .current .dot { background: #fff; border: 3px solid #2a3f54; }
.order-main { flex: 1; min-width: 0; padding: 0 20px; border-right: 1px solid #eef0f2; }
.order-meta { width: 220px; padding-left: 30px; }
.order-items .item { display: flex; align-items: flex-start; gap: 0; padding: 14px 0; }
.order-items .item img { width: 60px; margin: 6px 40px 0 26px; }
.order-items .item .kv { flex: 1 1 0; min-width: 0; }
.order-items .item .kv:first-of-type { flex: 1.3 1 0; }

/* notes */
.notes-toolbar { display: flex; gap: 10px; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
.note { padding: 16px 0 18px; border-bottom: 1px solid var(--border); margin-right: 15px; }
.note-head { display: flex; align-items: center; gap: 10px; }
.note-avatar { width: 32px; height: 32px; border-radius: 50%; background: #2a3f9f; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.note-author { font-size: 16px; font-weight: 500; }
.note-subject { background: #eef1f4; font-size: 12px; padding: 4px 10px; border-radius: 3px; color: #2a3f54; }
.note-time { margin-left: auto; font-size: 12px; color: var(--text-muted); margin-right: 38px; }
.note-body { margin: 12px 0 0 51px; font-size: 14px; white-space: pre-wrap; }
.note-composer { border: 1px solid var(--border); border-radius: 3px; margin: 14px 15px 0 0; padding: 10px; background: #fafbfc; }
.note-composer textarea { width: 100%; border: 0; background: transparent; font: inherit; font-size: 16px; resize: none; outline: none; min-height: 40px; }
.note-composer .row { display: flex; gap: 10px; align-items: center; }
.note-composer select { width: 180px; }
.note-composer .send { margin-left: auto; }

/* generic placeholder pages */
.placeholder-page { padding: 20px; }
.placeholder-page .card { min-height: 480px; display: flex; align-items: center; justify-content: center; }

/* modal + toast */
.modal-backdrop { position: fixed; inset: 0; background: rgba(26,30,33,.55); z-index: 400; display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: 4px; width: min(1000px, 92vw); height: min(86vh, 900px); display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border); font-weight: 500; }
.modal-body { flex: 1; min-height: 0; }
.modal-body iframe, .modal-body img { width: 100%; height: 100%; border: 0; object-fit: contain; }
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: #323232; color: #fff; padding: 12px 22px; border-radius: 4px; z-index: 500; font-size: 14px; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.toast.error { background: #c62828; }

.add-docs .left-tabs .svg-icon { width: 16px; height: 16px; }

/* edit demographics */
.edit-demographics { padding: 0 10px 30px; }
.edit-demographics .edit-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 18px; }
.edit-demographics h2 { margin: 0; font-size: 20px; font-weight: 500; color: #000; }
.edit-demographics .section-title { margin: 8px 0 18px; }
.edit-demographics .form-grid { grid-template-columns: repeat(6, 1fr); margin: 0 0 24px; }
.edit-field .label { margin-bottom: 2px; }
.edit-field input, .edit-field select { font-size: 16px; }
.edit-field .field-error { font-size: 11px; color: #d9534f; min-height: 13px; }
.edit-field.has-error input, .edit-field.has-error select { border-bottom: 2px solid #d9534f; }
.edit-field.has-error .label { color: #d9534f; }
.check-line { display: flex; align-items: center; gap: 10px; margin: -8px 0 24px; font-size: 14px; }
.edit-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.edit-actions .btn { min-width: 100px; padding: 10px 20px; font-size: 16px; }

/* ---------- shared list pages (orders, invoices, tasks, documents) ---------- */
.breadcrumbs.with-tabs { position: relative; }
.crumb-tabs { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 22px; }
.crumb-tabs a { font-size: 14px; font-weight: 500; text-transform: uppercase; color: #8795a4; white-space: nowrap; }
.crumb-tabs a.active { color: var(--primary); }
.filters-card .spacer { flex: 1; }
.reset-filters { font-size: 20px; color: #8795a4; margin-right: 22px; cursor: pointer; align-self: center; }
.grid-row.compact { min-height: 56px; }
.grid-row.compact .grid-cell { padding: 10px 9px; font-size: 14px; color: #333; }
.grid-row.compact .grid-cell:first-child { padding-left: 20px; }
.grid-row.slim { min-height: 50px; }
.grid-cell.strong { font-weight: 700; color: #000; }
.grid-cell.small.dark { color: #333; }
.two-line .muted-line { color: inherit; }
.muted-line { color: var(--text-muted); font-size: 12px; }
.ellipsis { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.w80 { width: 80px; flex-shrink: 0; } .w120 { width: 120px; flex-shrink: 0; } .w160 { width: 160px; flex-shrink: 0; }
.w170 { width: 170px; flex-shrink: 0; } .w220 { width: 220px; flex-shrink: 0; } .w280 { width: 280px; flex-shrink: 0; }
.w300 { width: 300px; flex-shrink: 0; }
.status-chip.danger { background: var(--red); }
.status-chip.slim { min-width: 56px; }
.status-chip.wide { min-width: 100px; }
.doc-empty.compact { padding: 120px 0 40px; gap: 10px; }
.doc-empty.compact b { font-size: 16px; color: #555; }
.tag-chip { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 8px; border-radius: 12px; background: #e6f5ff; color: #0f76bd; font-size: 12px; white-space: nowrap; }
.tag-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 14px; }
.tag-picker label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tag-picker .btn { margin-left: auto; }
.fax-view { display: flex; flex-direction: column; height: 100%; }
.fax-view iframe { flex: 1; width: 100%; border: 0; min-height: 0; }
.fax-view .edit-actions { padding: 10px 18px; }
.modal.small { height: auto; width: min(880px, 92vw); }
.upload-dialog { padding: 18px 20px 12px; }
.dropzone.wide { flex-direction: row; gap: 18px; padding: 44px 0; background: #fff; }
.dropzone.wide .svg-icon { width: 32px; height: 32px; color: #9aa4ae; }
.dropzone .muted { color: #b0b8c1; font-size: 15px; }
.picked-file { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-size: 14px; }
.upload-meta { padding: 4px 0 10px; }
.upload-meta .tag-picker { border: 0; padding: 12px 0; }
.task-detail { padding: 18px 22px; display: flex; flex-direction: column; gap: 18px; }
.task-detail .kv { border: 0; }

/* inbox */
.inbox-page { background: #fff; min-height: calc(100vh - 110px); }
.inbox-filters { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.inbox-filters > div { display: flex; flex-direction: column; gap: 4px; }
.inbox-filters .box-input { width: 210px; font-size: 16px; padding: 7px 9px; }
.inbox-filters .label-inline { font-size: 12px; color: #000; }
.inbox-row .c-name { width: 223px; } .inbox-row .c-date { width: 223px; } .inbox-row .c-sender { width: 223px; }
.inbox-row .c-loc { width: 223px; } .inbox-row .c-alias { width: 223px; } .inbox-row .c-pages { width: 100px; }
.inbox-row .c-tags { flex: 1; }
.inbox-row { cursor: pointer; }

/* detail pages (order, invoice) */
.patient-card .photo.doc-photo { display: flex; align-items: center; justify-content: center; background: #e4e7ea; }
.doc-photo .svg-icon { width: 50px; height: 50px; color: #8f9aa6; }
.copy-inline .svg-icon { width: 18px; height: 18px; color: #9aa4ae; vertical-align: middle; }
.name-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.name-line a { font-size: 14px; }
.info-banner { border: 1px solid #f5c542; background: #fffdf3; padding: 10px 14px; margin: -8px 0 26px; font-size: 14px; border-radius: 2px; }
.order-info-grid { display: grid; grid-template-columns: 170px 290px 1fr 280px; margin: 16px 0 10px; }
.order-info-grid.six { grid-template-columns: 300px 150px 150px 200px 270px 1fr; }
.order-info-grid .kv { padding: 0 10px 12px 0; }
.flag { color: #f5c542; font-size: 22px; }
.patient-content .kv > .value { font-size: 16px; }
.bill-to { border: 1px solid var(--border); border-radius: 3px; padding: 10px 12px; margin: 14px 0 12px; }
.bill-to .label { display: flex; justify-content: space-between; }
.bill-to .value { font-size: 18px; }
.hold-chip { display: inline-block; border: 1px solid #333; border-radius: 14px; padding: 2px 10px; font-size: 13px; margin-bottom: 6px; }
.notice-card { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; box-shadow: var(--shadow); margin-bottom: 30px; font-size: 14px; }
.notice-card .notice-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.notice-card .view-all { margin-left: auto; font-size: 16px; }
.totals { background: #f5f7f9; margin-bottom: 24px; border-radius: 3px; }
.totals-main { display: flex; align-items: center; padding: 16px 18px; background: #eef1f5; }
.totals .caret-circle { width: 20px; height: 20px; border-radius: 50%; background: #3d4f63; color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-right: 22px; font-size: 12px; }
.totals .tot { flex: 1; padding-right: 10px; border-right: 1px solid #dde2e8; margin-right: 16px; }
.totals .tot .label { font-size: 14px; color: #000; }
.totals .tot .value { display: flex; align-items: center; gap: 6px; font-size: 22px; }
.totals .tot .value .svg-icon { width: 20px; height: 20px; color: #2a3f54; }
.totals .tot.balance .value { color: var(--primary); }
.totals .adjust { padding: 10px 36px; font-size: 16px; }
.totals-sub { display: flex; gap: 60px; padding: 10px 60px; font-size: 12px; color: #555; }
.totals.compact { border: 1px solid var(--border); margin: 20px 0 30px; }
.totals.compact .totals-main { background: #fff; }
.totals.compact .tot { display: flex; align-items: center; gap: 8px; }
.totals.compact .tot .value { font-size: 14px; }
.totals.compact .adjust { padding: 6px 16px; }
.inv-options { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr 1.4fr; gap: 0 10px; margin-bottom: 14px; }
.inv-options .kv { padding-bottom: 14px; }
.dx-chips { margin: 8px 0 34px; }
.dx-chip { display: inline-block; background: #eef1f4; border-radius: 16px; padding: 6px 12px; font-size: 14px; }
.dark-chip { background: #2a3f54; color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 2px; text-transform: none; }
.sl-grid { display: grid; grid-template-columns: 245px 100px 120px 250px 280px 1fr; margin: 18px 0 6px; }
.top-actions a { color: inherit; display: inline-flex; }
.doc-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.doc-name .svg-icon { width: 18px; height: 18px; color: #555; flex-shrink: 0; }
/* Even 223px columns, as on the real inbox; every cell is one line. */
.inbox-row > div:not(.w50) { padding-right: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row .c-name, .inbox-row .c-date, .inbox-row .c-sender, .inbox-row .c-loc, .inbox-row .c-alias { width: 223px; flex-shrink: 0; }
.inbox-row .c-pages { width: 100px; flex-shrink: 0; }
.inbox-row .c-tags { flex: 1; }
.inbox-row .c-name .doc-name { display: flex; }
.inbox-row .c-name .doc-name span, .inbox-row .c-name .doc-name { overflow: hidden; text-overflow: ellipsis; }
.doc-row.inbox-row { min-height: 49px; padding-top: 0; padding-bottom: 0; }

/* Mock-only reset screen */
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #c62828; }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }
.reset-page { padding: 20px 30px; max-width: 900px; }
.reset-page .card-head { background: var(--crumb-bg); padding: 16px 20px; color: #4d6177; font-size: 16px; font-weight: 500; text-transform: uppercase; border-radius: 3px 3px 0 0; }
.reset-page .card-body { padding: 20px; }
.reset-page p { margin: 0 0 12px; line-height: 1.5; }
.reset-summary { font-weight: 500; }
.reset-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14px; }
.reset-table th { text-align: left; color: var(--light-label); font-weight: 500; text-transform: uppercase; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.reset-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.reset-table .num { text-align: right; width: 110px; font-variant-numeric: tabular-nums; }
.reset-table .delta { color: var(--light-label); width: 150px; }
.reset-table tr.changed td { background: #fff8e1; }
.reset-table tr.changed .delta { color: var(--orange); font-weight: 500; }
.modal.modal-compact { width: min(560px, 92vw); height: auto; }
.reset-confirm { padding: 18px 20px; line-height: 1.5; }
.reset-confirm ul { margin: 0 0 16px; padding-left: 20px; }
.reset-confirm li { margin-bottom: 6px; }
.reset-confirm label { display: block; margin-bottom: 6px; }
.reset-confirm .box-input { width: 100%; box-sizing: border-box; }
.reset-confirm .edit-actions, .reset-page .edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Loaders: NikoHealth's <app-loading> with Kendo's "pulsing-2" loader (values from the live bundle). */
.k-loader { position: relative; display: block; color: var(--primary); }
.k-loader-lg { padding: 8px; }
.k-loader-canvas { display: flex; position: relative; align-items: center; width: 48px; height: 24px; }
.k-loader-segment { position: absolute; width: 16px; height: 16px; border-radius: 50%; background-color: currentcolor; }
.k-loader-pulsing-2 .k-loader-segment:nth-child(1) { left: 0; transform: scale(1.5); transform-origin: 0 50%; animation: pulsing-2-segment 1s ease -0.5s infinite; }
.k-loader-pulsing-2 .k-loader-segment:nth-child(2) { right: 0; transform-origin: 100% 50%; animation: pulsing-2-segment 1s ease 0s infinite; }
@keyframes pulsing-2-segment { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
.loading { display: flex; position: absolute; z-index: 998; inset: 0; flex-direction: column; align-items: center; justify-content: center; }
.loading.full-screen { position: fixed; }
.loading::before { content: ""; z-index: 1000; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.5); }
.loading.transparent::before { background-color: transparent; }
.loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; right: 0; left: 0; position: relative; z-index: 2005; }
.loading-host { position: relative; }
.loading-host > .loading { z-index: 6; }
.loading-host > .loading .loading-container { position: sticky; top: calc(50vh - 20px); bottom: calc(50vh - 20px); margin: 15px 0; }
.loading-host.empty-while-loading { min-height: calc(100vh - 230px); }

/* Inbox grid: header and rows span the full scroll width; unread rows are bold across every cell. */
.inbox-grid { overflow-x: auto; }
.inbox-grid-inner { width: max-content; min-width: 100%; }
.inbox-row .c-tags { min-width: 200px; }
.inbox-row.unread > div { font-weight: 500; color: #000; }
.inbox-row.unread .doc-name span { font-weight: 700; }
.fax-view .edit-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Task Details page */
.speed-dial { position: absolute; top: 90px; right: 16px; z-index: 50; display: flex; align-items: flex-start; gap: 8px; }
.speed-dial .plus-fab { position: static; }
.speed-dial.open .plus-fab { background: var(--primary-hover); }
.speed-dial.open .plus-fab span { display: inline-block; transform: rotate(45deg); }
.dial-actions { display: none; flex-direction: column; gap: 3px; }
.speed-dial.open .dial-actions { display: flex; }
.dial-action { display: flex; align-items: center; gap: 12px; width: 200px; height: 38px; padding: 0 12px; border: 0; border-radius: 19px; background: var(--primary); color: #fff; font: inherit; font-size: 14px; cursor: pointer; box-shadow: var(--shadow); }
.dial-action:hover { background: var(--primary-hover); }
.dial-icon { width: 22px; text-align: center; font-size: 18px; }
.task-page { display: flex; background: #fff; min-height: calc(100vh - 110px); padding: 40px 50px 20px; gap: 30px; }
.task-left { flex: 1; padding-right: 30px; border-right: 1px solid var(--border); }
.task-right { flex: 1; display: flex; flex-direction: column; min-height: calc(100vh - 170px); }
.task-section-title { display: flex; align-items: center; font-size: 12px; font-weight: 500; text-transform: uppercase; color: #000; margin: 0 0 18px; }
.task-section-title::after { content: ""; flex: 1; height: 1px; background: #e8ebef; margin-left: 16px; }
.task-left .task-section-title:not(:first-child) { margin-top: 40px; }
.task-title { font-size: 20px; font-weight: 700; margin: 36px 0 18px; color: #000; }
.task-meta { display: flex; gap: 48px; align-items: center; font-size: 14px; margin-bottom: 20px; }
.task-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.task-meta .svg-icon { width: 16px; height: 16px; color: #8a96a3; }
.task-meta .meta-item { color: #333; font-size: 14px; }
.dial-icon .svg-icon { width: 18px; height: 18px; color: #fff; vertical-align: middle; }
.task-status.open { color: var(--active-green); }
.task-status.done { color: var(--text-muted); }
.task-description { font-size: 14px; margin-bottom: 20px; white-space: pre-wrap; }
.task-created { font-size: 11px; color: #000; }
.task-created .muted, .task-meta .muted { color: var(--light-label); }
.task-links { display: flex; gap: 40px; align-items: center; margin-bottom: 30px; }
.task-link { display: flex; gap: 10px; align-items: flex-start; min-width: 140px; }
.task-link .ring { width: 32px; height: 32px; border: 2px solid #c3cbd4; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.task-link .ring .svg-icon { width: 18px; height: 18px; color: #8a96a3; }
.task-link .label { font-size: 11px; color: var(--label); margin-bottom: 4px; }
.task-link .value { font-size: 16px; }
.task-link a { font-size: 16px; color: var(--primary); text-decoration: none; }
.assign-me { color: var(--light-label); font-size: 14px; cursor: pointer; }
.assign-me:hover { color: var(--primary); }
.note-search { display: flex; align-items: center; border-bottom: 1px solid #c8ced5; margin-bottom: 10px; }
.note-search input { flex: 1; border: 0; outline: none; font: inherit; font-size: 14px; padding: 8px 0; }
.note-search .svg-icon { width: 16px; height: 16px; color: #b5bdc6; }
.task-notes { flex: 1; overflow-y: auto; }
.task-notes .no-content { height: 100%; min-height: 360px; }
.task-composer { margin: 14px 0 0; background: #f0f3f7; border-color: #c8ced5; }
.task-composer .muted { color: #333; font-size: 14px; }
.task-composer textarea { font-style: italic; font-size: 14px; }
.task-edit label { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--label); }

/* Billing tabs: extra column widths and the inline filter row (Prescriptions, Authorizations, CMNs). */
.w60 { width: 60px; flex-shrink: 0; } .w70 { width: 70px; flex-shrink: 0; } .w140 { width: 140px; flex-shrink: 0; }
.w150 { width: 150px; flex-shrink: 0; } .w240 { width: 240px; flex-shrink: 0; } .w260 { width: 260px; flex-shrink: 0; }
.grid-header.flush { margin-bottom: 0; }
.grid-row.filter-row { min-height: 60px; cursor: default; margin-bottom: 7px; padding-right: 44px; }
.grid-row.filter-row:hover { box-shadow: var(--shadow); }
.grid-row.filter-row .grid-cell { padding: 10px 9px; border-right: 0; }
.grid-row.filter-row .field { width: 100%; }
.grid-row.filter-row .field input, .grid-row.filter-row .field select { font-size: 14px; }
.reset-filters.inline { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); margin: 0; color: var(--primary); }
.cell-stack { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.cell-stack .sub { font-size: 14px; color: #8a8a8a; }
.money-plus { color: var(--active-green); }
.money-minus { color: var(--red); }
.reason-code { display: inline-block; padding: 1px 6px; border-radius: 3px; background: #fdecea; color: var(--red); font-size: 12px; font-weight: 500; margin-right: 6px; }

/* Patient Documents rows: hover icon buttons at the end of the Document column, and the row menu. */
.doc-row:hover { background: #f5f7f9; }
.doc-row .doc-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.doc-row .doc-main .doc-name { min-width: 0; }
.doc-row .doc-main .doc-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-actions { display: inline-flex; visibility: hidden; gap: 8px; margin-left: auto; padding-right: 20px; }
.doc-row:hover .doc-actions { visibility: visible; }
.square-btn { width: 34px; height: 34px; border: 0; border-radius: 4px; background: #e8ecf0; color: #333; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.square-btn:hover { background: #dce2e8; }
.doc-kebab { width: 40px; display: flex; justify-content: center; }
.kebab-btn { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; font-size: 20px; font-weight: 700; color: #333; cursor: pointer; line-height: 1; }
.kebab-btn:hover { background: #e8ecf0; }
.row-menu { position: fixed; z-index: 500; min-width: 165px; padding: 6px 0; background: #fff; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.row-menu button { display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 16px; border: 0; background: none; font: inherit; font-size: 14px; color: #1a1e21; cursor: pointer; text-align: left; }
.row-menu button:hover { background: #f2f4f6; }
.row-menu button.danger { color: #f44336; }

/* Insurance > Authorizations and the Prescription tab: two-line record cards. */
.auth-row, .rx-row { display: flex; align-items: flex-start; padding: 16px 20px 14px 30px; border-bottom: 1px solid #eef0f2; position: relative; }
.auth-row:hover, .rx-row:hover { background: #f5f7f9; }
.auth-status { width: 120px; padding-top: 4px; flex-shrink: 0; }
.auth-status .status-chip { width: 90px; }
/* 8 columns: Auth No | Type | HCPCS | Modifiers | From | To | Units | Created; the second line spans them. */
.auth-grid { flex: 1; display: grid; grid-template-columns: 150px 90px 100px 170px 120px 120px 115px minmax(170px, 1fr); row-gap: 14px; min-width: 0; margin-right: 70px; }
.auth-cell, .rx-cell { padding: 0 10px; border-right: 1px solid #eef0f2; min-width: 0; }
.auth-cell .label, .rx-cell .label { font-size: 11px; color: var(--label); margin-bottom: 4px; }
.auth-cell .value, .rx-cell .value { font-size: 16px; color: #1a1e21; overflow-wrap: anywhere; }
.auth-cell .by { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.auth-cell.stamp { border-right: 0; }
.auth-cell.span2, .rx-cell.span2 { grid-column: span 2; }
.auth-actions, .rx-actions { display: flex; align-items: center; gap: 6px; align-self: center; }
.auth-actions { visibility: hidden; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
.auth-row:hover .auth-actions { visibility: visible; }
.icon-btn.danger { color: #f44336; }
.icon-btn.danger .svg-icon { color: #f44336; }
.rx-index { width: 40px; padding-top: 18px; font-size: 16px; flex-shrink: 0; }
.rx-grid { flex: 1; display: grid; grid-template-columns: 230px 240px 290px 120px 1fr; row-gap: 18px; min-width: 0; }
.rx-cell.wide { grid-column: span 1; }
.rx-grid > .rx-cell:nth-child(5), .rx-grid > .rx-cell:nth-child(8) { border-right: 0; }
.rx-actions { align-self: flex-start; padding-top: 8px; gap: 14px; }
.rx-actions .status-chip { width: 50px; }
/* Pencil always shows; the red delete appears on hover (as on NikoHealth). */
.rx-actions .icon-btn.danger { visibility: hidden; }
.rx-row:hover .rx-actions .icon-btn.danger { visibility: visible; }

/* New / Edit Authorization dialog */
.modal.auth-modal { width: min(750px, 94vw); }
.auth-form { padding: 16px 20px 18px; }
.auth-form .row { display: grid; gap: 30px; margin-bottom: 18px; }
.auth-form .row.two { grid-template-columns: 1fr 1fr; }
.auth-form .row.four { grid-template-columns: repeat(4, 1fr); }
.auth-form .field input, .auth-form .field select, .auth-form .field-select { width: 100%; box-sizing: border-box; }
.auth-form .field-select { border: 0; border-bottom: 1px solid #c8ced5; font: inherit; font-size: 15px; padding: 6px 0; background: none; }
.auth-kind { background: #f7f8fa; border: 1px solid #eef0f2; border-radius: 4px; padding: 14px 16px; margin-bottom: 18px; }
.auth-kind .kind-row { display: flex; gap: 18px; align-items: center; margin-bottom: 12px; font-size: 14px; }
.auth-kind .kind-row label { display: inline-flex; gap: 6px; align-items: center; }
.mini-label { display: block; font-size: 11px; color: var(--label); margin-bottom: 6px; }
.mods { display: flex; gap: 10px; }
.mods input { width: 70px; border: 0; border-bottom: 1px dashed #c8ced5; font: inherit; padding: 6px 0; text-transform: uppercase; }
.mods input:first-child { border-bottom-style: solid; }
.auth-info { background: #e8f5fe; color: #1a1e21; border-radius: 4px; padding: 10px 14px; font-size: 14px; margin-bottom: 18px; }
.auth-form .edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* Documents rows, second pass against the live screen: note line, larger type chip, square kebab. */
/* The row stacks a single never-wrapping line of cells over the optional note. */
.doc-row { flex-direction: column; align-items: stretch; font-size: 16px; }
.doc-line { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; }
.doc-line > .grow { flex: 1 1 0; min-width: 0; }
.doc-line > .updated { flex-shrink: 0; white-space: nowrap; }
.doc-line > .doc-kebab, .doc-line > .w50 { flex-shrink: 0; }
.doc-row .doc-name .svg-icon { width: 20px; height: 20px; color: #333; }
.doc-note { padding: 14px 0 2px; font-size: 14px; color: #333; }
.doc-row .type-chip { font-size: 14px; line-height: 22px; padding: 1px 8px; color: #1a1e21; background: #e8ecf0; }
.doc-row .updated { font-size: 14px; color: #6b7785; }
.square-btn { width: 36px; height: 36px; }
.kebab-btn { width: 40px; height: 40px; border-radius: 4px; }
.kebab-btn.open, .kebab-btn:hover { background: #e8ecf0; }
.row-menu { min-width: 175px; padding: 4px 0; border-radius: 8px; }
.row-menu button { padding: 11px 18px; font-size: 15px; gap: 18px; }
.row-menu button svg { width: 22px; height: 22px; }

/* Edit Document dialog */
.modal.edit-doc-modal { width: min(540px, 92vw); border-radius: 10px; overflow: hidden; }
.edit-doc-modal .modal-head { background: #f0f2f5; padding: 16px 20px; font-size: 17px; font-weight: 700; }
.edit-doc-modal .modal-head .icon-btn { font-size: 18px; }
.edit-doc-body { padding: 16px 20px 18px; display: flex; flex-direction: column; }
.edit-doc-body label { font-size: 14px; color: #1a1e21; margin: 14px 0 7px; }
.edit-doc-body label:first-child { margin-top: 0; }
.edit-doc-body .box-input { width: 100%; box-sizing: border-box; border-color: #dfe3e8; border-radius: 4px; }
.edit-doc-body textarea.box-input { resize: vertical; min-height: 48px; }
.select-clear { position: relative; }
.select-clear select { padding-right: 60px; }
.select-clear .clear-x { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #8a939c; font-size: 14px; cursor: pointer; }
.edit-doc-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border); }
.edit-doc-foot .btn { min-width: 98px; }
.edit-doc-foot .btn:disabled { opacity: .5; cursor: not-allowed; }
.select-clear select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%23111'/></svg>") no-repeat right 14px center; }
/* Hover buttons float over the right end of the Document column, so the name keeps the full width. */
.doc-row .doc-main { position: relative; align-self: stretch; }
.doc-row .doc-main .doc-name { flex: 1 1 auto; }
.doc-actions { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 0 0 0 16px; margin: 0; background: #f5f7f9; box-shadow: -12px 0 12px -4px #f5f7f9; }

/* Edit ... Status dialogs (patient / order / invoice) and record tag chips */
.edit-status { display: inline-flex; cursor: pointer; }
.edit-status:hover .svg-icon { color: var(--primary); }
.modal.status-modal { width: min(420px, 92vw); border-radius: 8px; overflow: visible; }
.status-modal .modal-head { background: #f0f2f5; padding: 16px 20px; font-size: 17px; border-radius: 8px 8px 0 0; }
.status-form { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 26px; }
.status-form select { width: 100%; border: 0; border-bottom: 1px solid #c8ced5; font: inherit; font-size: 15px; padding: 5px 0; background: none; outline: none; }
.chip-field { position: relative; }
.chip-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 34px; border-bottom: 1px solid #c8ced5; padding: 3px 0; cursor: text; }
.chip-box:focus-within { border-bottom: 2px solid var(--primary); padding-bottom: 2px; }
.chip-box input { flex: 1; min-width: 80px; border: 0; outline: none; font: inherit; font-size: 15px; background: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; border-radius: 16px; background: #eef1f4; font-size: 14px; }
.chip-x { border: 0; background: none; color: #555; cursor: pointer; font-size: 12px; padding: 0 2px; }
.chip-options { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); border-radius: 4px; max-height: 220px; overflow-y: auto; }
.chip-options button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px 16px; font: inherit; font-size: 15px; cursor: pointer; }
.chip-options button:hover { background: #f2f4f6; }
.chip-empty { padding: 12px 16px; color: var(--text-muted); font-size: 14px; }
.record-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.record-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: #e8ecf0; border-radius: 14px; font-size: 13px; color: #1a1e21; }

/* /genhealth settings */
.gh-page { padding: 20px 30px; max-width: 980px; }
.gh-intro h1 { font-size: 22px; font-weight: 500; margin: 6px 0 6px; }
.gh-intro p { margin: 0 0 20px; color: var(--text-muted); }
.gh-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.gh-option { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; text-decoration: none; color: inherit; border-top: 3px solid var(--primary); }
.gh-option:hover { box-shadow: 0 3px 12px rgba(10,10,10,.18); }
.gh-option-title { font-size: 18px; font-weight: 500; }
.gh-option-body { font-size: 14px; line-height: 1.5; color: var(--text-muted); flex: 1; }
.gh-go { color: var(--primary); font-weight: 500; }
.gh-card .card-head { display: flex; align-items: center; justify-content: space-between; background: var(--crumb-bg); padding: 12px 20px; color: #4d6177; font-size: 16px; font-weight: 500; text-transform: uppercase; border-radius: 3px 3px 0 0; }
.gh-card .card-head .btn { text-transform: none; }
.gh-card .card-body { padding: 20px; }
.gh-card .card-body p { margin: 0 0 14px; line-height: 1.5; }
.gh-users td { vertical-align: middle; }
.gh-actions { text-align: right; width: 120px; }
.gh-lock { color: var(--light-label); font-size: 13px; }
.gh-hint { color: var(--light-label); font-size: 12px; }

/* New / Edit Task page and record Tasks tabs */
.task-form .tf-field { display: block; margin: 0 0 26px; }
.task-form .field input, .task-form .field select { width: 100%; box-sizing: border-box; }
.task-form .tf-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.task-form .chip-field { margin-bottom: 18px; }
.task-form .task-section-title.spaced { margin-top: 26px; }
.task-form .assign-me.link { color: var(--primary); display: inline-block; margin: 0 0 8px; }
.tf-hint { font-size: 12px; font-style: italic; color: var(--light-label); }
.tf-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 30px; padding: 14px 20px; background: #fff; }
.tf-foot .btn { min-width: 126px; height: 40px; }
.tf-foot .btn:disabled { background: #e0e3e7; color: #9aa3ad; cursor: not-allowed; }
.linked-tasks-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 0 12px; }
.linked-tasks-bar select { border: 0; border-bottom: 1px solid #c8ced5; font: inherit; padding: 5px 0; background: none; }
.linked-tasks-bar .btn { text-decoration: none; }
.linked-tasks tbody tr { cursor: pointer; }
.linked-tasks tbody tr:hover { background: #f5f7f9; }
.linked-tasks .muted { color: var(--light-label); font-size: 12px; }
.linked-tasks .ellipsis-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linked-tasks td:nth-child(4), .linked-tasks th:nth-child(4), .linked-tasks td:nth-child(6) { white-space: nowrap; }

/* Header actions: NikoHealth icons, Material tooltips, and the profile menu. The header scrolls
   sideways on narrow screens so the icons stay reachable. */
.top-menu::-webkit-scrollbar { display: none; }
.top-menu nav, .top-actions { flex-shrink: 0; }
/* NikoHealth: bare 24px icons, 30px apart (20px before the bell), all #606060, no hover circle. */
.top-actions { gap: 0; padding-left: 24px; padding-right: 0; }
.hdr-action, .hdr-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 30px; border: 0; background: none; padding: 0; color: #606060; cursor: pointer; }
.top-actions a.hdr-action { color: #606060; }
.hdr-action[data-tip="Tasks"] { margin-right: 20px; }
.hdr-avatar { width: 32px; height: 32px; border-radius: 50%; }
.hdr-icon { width: 24px; height: 24px; }
.hdr-icon svg { fill: currentColor; }
.hdr-avatar .avatar { width: 32px; height: 32px; opacity: 1; filter: grayscale(1) opacity(.35); }
.nh-tooltip { position: fixed; z-index: 1000; padding: 6px 10px; border-radius: 4px; background: #616161; color: #fff; font-size: 12px; line-height: 16px; pointer-events: none; white-space: nowrap; animation: nh-tip .12s ease-out; }
@keyframes nh-tip { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.profile-menu { position: fixed; z-index: 500; width: 255px; background: #fff; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding-bottom: 6px; }
.profile-menu::before { content: ""; position: absolute; top: -8px; right: 18px; border: 8px solid transparent; border-top: 0; border-bottom-color: #fff; }
.profile-menu .pm-head { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 500; }
.profile-menu .pm-head .avatar { width: 40px; height: 40px; filter: grayscale(1) opacity(.35); }
.profile-menu button { display: flex; align-items: center; gap: 22px; width: 100%; border: 0; background: none; padding: 13px 16px; font: inherit; font-size: 15px; color: #1a1e21; cursor: pointer; text-align: left; }
.profile-menu button:hover { background: #f5f7f9; }
.profile-menu button svg { width: 24px; height: 24px; fill: #4a4f55; flex-shrink: 0; }
.profile-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

.list-dial { position: absolute; top: -20px; right: 16px; z-index: 6; display: flex; align-items: center; gap: 6px; }
.list-dial .plus-fab { position: static; }
/* NikoHealth's list speed dial: a light-blue pill with a person-add icon next to an × circle. */
.list-dial .dial-action { display: none; width: auto; height: 38px; gap: 18px; padding: 0 32px 0 14px; border-radius: 19px; background: #52b0f8; box-shadow: none; font-size: 14px; }
.list-dial .dial-action:hover { background: #45a8f5; }
.list-dial.open .dial-action { display: flex; }
.list-dial .fab-glyph { position: relative; display: block; width: 16px; height: 16px; margin: auto; }
.list-dial .fab-glyph::before, .list-dial .fab-glyph::after { content: ""; position: absolute; left: 7px; top: 0; width: 2px; height: 16px; background: #fff; border-radius: 1px; transition: transform .15s; }
.list-dial .fab-glyph::after { transform: rotate(90deg); }
.list-dial.open .plus-fab { background: #52b0f8; }
.list-dial.open .fab-glyph::before { transform: rotate(45deg); }
.list-dial.open .fab-glyph::after { transform: rotate(135deg); }

/* List grids: NikoHealth's darker cell text, and cards that span the full sideways-scroll width. */
.grid-cell { color: #1a1e21; }
.grid-cell.small, .grid-cell.small.dark { color: #1a1e21; }
.grid-cell .muted-line, .grid-cell .two-line .muted-line { color: #606060; }
.grid-scroll { overflow-x: auto; margin: 0 -20px; padding: 3px 20px 0; }
.grid-scroll-inner { width: max-content; min-width: 100%; }
.grid-scroll-inner > .grid-header, .grid-scroll-inner [data-rows] > .grid-row { min-width: 100%; }
.grid-cell .time-color { color: #606060; }
.grid-scroll-inner > .filters-card { min-width: 100%; box-sizing: border-box; }

/* Create Patient (#/patients/add), NikoHealth layout */
.pc-page { display: flex; align-items: flex-start; min-height: calc(100vh - 110px); }
.pc-nav { position: sticky; top: 0; width: 260px; flex-shrink: 0; align-self: flex-start; height: calc(100vh - 110px); background: #fff; padding: 0; }
.pc-nav a { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 26px; color: #1a1e21; font-size: 14px; cursor: pointer; border-left: 3px solid transparent; }
.pc-nav a svg { fill: #1a1e21; flex-shrink: 0; }
.pc-nav a.active { color: var(--primary); border-left-color: var(--primary); }
.pc-nav a.active svg { fill: var(--primary); }
.pc-body { flex: 1; min-width: 0; padding: 12px 40px 60px; }
.pc-actions { position: sticky; top: 0; z-index: 30; height: 0; display: flex; justify-content: flex-end; gap: 14px; padding-right: 50px; }
.pc-round { width: 38px; height: 38px; margin-top: -20px; border: 0; border-radius: 50%; color: #fff; font-size: 17px; cursor: pointer; box-shadow: var(--shadow); }
.pc-round.cancel { background: #a9b3bd; }
.pc-round.save { background: var(--primary); }
.pc-round:disabled { opacity: .6; cursor: default; }
.pc-section { scroll-margin-top: 16px; }
.pc-title { margin: 28px 0 16px; font-size: 16px; font-weight: 500; color: #0f4c75; display: flex; align-items: center; gap: 24px; }
.pc-card { display: flex; background: #fff; border-radius: 16px; padding: 28px 30px 30px; box-shadow: 0 1px 2px rgba(10,10,10,.04); }
.pc-card.empty { justify-content: center; padding: 40px; }
.pc-col { flex: 1; min-width: 0; }
.pc-col.right { padding-left: 42px; margin-left: 42px; border-left: 1px solid #e8ebef; }
.pc-sub { display: flex; align-items: center; gap: 22px; margin: 0 0 16px; font-size: 14px; font-weight: 500; color: #1a1e21; }
.pc-sub.spaced, .spaced { margin-top: 28px; }
.pc-sub.with-action { justify-content: space-between; }
.pc-grid { display: grid; gap: 16px 16px; }
.pc-grid.two { grid-template-columns: 1fr 1fr; }
.pc-grid.three { grid-template-columns: repeat(3, 1fr); }
.pc-grid.four { grid-template-columns: repeat(4, 1fr); }
.pc-grid.name-row { grid-template-columns: 100px 1fr 1.6fr; }
.pc-grid.dob-row { grid-template-columns: 1.4fr .6fr 1fr .5fr; }
.pc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.pc-field.wide { margin-bottom: 16px; }
.pc-label { font-size: 12px; color: #1a1e21; }
.pc-field input, .pc-field select { height: 38px; box-sizing: border-box; width: 100%; padding: 0 10px; border: 1px solid #dfe3e8; border-radius: 4px; background: #fff; font: inherit; font-size: 15px; color: #1a1e21; outline: none; }
.pc-field input:focus, .pc-field select:focus { border-color: var(--primary); }
.pc-field.has-error input, .pc-field.has-error select { border-color: var(--red); }
.pc-error { font-size: 11px; color: var(--red); min-height: 0; }
.pc-static { height: 38px; display: flex; align-items: center; font-size: 15px; }
.pc-seg { display: inline-flex; border-radius: 4px; background: #eef1f4; overflow: hidden; }
.pc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pc-seg span { display: inline-block; padding: 10px 17px; font-size: 14px; font-weight: 500; color: #1a1e21; cursor: pointer; }
.pc-seg input:checked + span { background: #d9f0fd; color: var(--primary); box-shadow: inset 0 0 0 1px #9ed6f7; }
.pc-verify { margin-top: 26px; border: 0; background: none; color: #b5bdc6; font: inherit; font-size: 14px; padding: 0; }
.pc-autofill { height: 38px; padding: 0 16px; border: 0; border-radius: 4px; background: #eef1f4; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.pc-add { border: 0; background: none; color: var(--primary); font: inherit; font-size: 14px; cursor: pointer; padding: 0; }
.pc-add.title-add { font-size: 14px; font-weight: 400; }
.pc-contacts.boxed [data-rows] { background: #f5f7f9; border-radius: 8px; padding: 14px 12px; }
.pc-contacts { margin-top: 20px; }
.pc-contact-row { display: grid; grid-template-columns: 120px 1fr 24px; gap: 12px; align-items: end; margin-bottom: 8px; }
.pc-remove { border: 0; background: none; color: #8a939c; cursor: pointer; margin-bottom: 12px; }
.pc-tags .chip-box { min-height: 38px; border: 1px solid #dfe3e8; border-radius: 4px; padding: 3px 8px; }
.pc-tags .chip-box:focus-within { border: 1px solid var(--primary); padding: 3px 8px; }
.pc-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #606060; font-size: 14px; }
.pc-tags .chip-box input { border: 0; height: 30px; padding: 0 4px; }
.pc-field select { appearance: none; -webkit-appearance: none; padding-right: 30px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%23111'/></svg>") no-repeat right 12px center; }
.pc-grid.two + .pc-grid.two { margin-top: 16px; }
.pc-field .pc-seg { align-self: flex-start; }
.pc-verify { display: inline-flex; align-items: center; gap: 8px; }
.pc-verify svg { width: 20px; height: 20px; fill: #c3cbd4; }

/* NikoHealth confirm dialog, and the list speed dial's stacked pills */
.modal.nh-confirm { width: min(540px, 92vw); border-radius: 10px; overflow: hidden; }
.nh-confirm .modal-head { background: #f0f2f5; padding: 16px 20px; font-size: 17px; font-weight: 500; }
.nh-confirm-body { padding: 22px 20px; font-size: 15px; line-height: 1.6; color: #1a1e21; border-bottom: 1px solid var(--border); }
.nh-confirm-foot { display: flex; justify-content: flex-end; gap: 16px; padding: 16px 20px; }
.nh-confirm-foot .btn { min-width: 100px; height: 38px; }
.btn-outline-primary { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.list-dial { align-items: flex-start; }
.list-dial .dial-stack { display: flex; flex-direction: column; gap: 4px; }
.list-dial .dial-action[hidden] { display: none !important; }