/* CalypsoRx — Direction A: Clinical Balanced
   Dense Linear/Epic-style. White, hairlines, navy as accent. Power-user. */

.dirA {
  font-family: var(--font);
  color: var(--A-fg);
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: var(--tracking);
  background: var(--A-bg);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* The type and colour of the page, without its layout, for anything portalled to <body>. */
.crx-portal {
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: var(--tracking);
  color: var(--A-fg);
}

/* The browser's own stylesheet sets letter-spacing: normal on form controls, so they never
   inherit the page's tracking — field values read tighter than the text around them. */
.dirA :where(input, select, textarea, button, optgroup),
.crx-portal :where(input, select, textarea, button, optgroup) {
  letter-spacing: inherit;
}

/* The legacy site.css styles bare headings — h4 in red and uppercased, h5 and h6 likewise —
   and that reaches into every island that uses one. Islands set their own type, so take the
   inherited transform and colour back rather than overriding them at each use. */
.dirA :where(h1, h2, h3, h4, h5, h6),
.crx-portal :where(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  text-transform: none;
  word-break: normal;
}

/* TOPBAR */
.dirA .topbar {
  height: 44px;
  background: var(--A-surface);
  border-bottom: 1px solid var(--A-rule);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-12);
  gap: var(--sp-12);
  flex: none;
}
.dirA .brand {
  display: flex; align-items: center; gap: var(--sp-8);
  padding-right: var(--sp-16);
  border-right: 1px solid var(--A-rule);
  height: 100%;
}
.dirA .brand-logo {
  height: 22px;
  width: auto;
  display: block;
}
.dirA .brand-mark {
  width: 22px; height: 22px;
  background: var(--A-accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
  border-radius: 3px;
  font-size: 13px;
  letter-spacing: 0;
}
.dirA .brand-mark::before { content: '+'; font-size: 18px; line-height: 1; }
.dirA .brand-name {
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--text-body);
  letter-spacing: 0.02em;
  color: var(--A-fg);
}
.dirA .brand-name .small { font-weight: 400; color: var(--A-fg-3); font-size: var(--text-meta); text-transform: uppercase; letter-spacing: 0.1em; display: block; line-height: 1; margin-bottom: var(--sp-2);}
.dirA .topnav { display: flex; align-items: center; gap: 0; height: 100%; }
.dirA .topnav-link {
  font-size: var(--text-label);
  color: var(--A-fg-2);
  padding: 0 var(--sp-12);
  height: 100%;
  display: flex; align-items: center;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  font-weight: 500;
}
.dirA .topnav-link.active { color: var(--A-accent); border-bottom-color: var(--A-accent); }
.dirA .topnav-link:hover:not(.active) { color: var(--A-fg); background: var(--A-surface-2); }
.dirA .global-search {
  flex: 0 1 380px;
  min-width: 180px;
  margin-left: var(--sp-12);
  position: relative;
}
.dirA .global-search input {
  width: 100%;
  height: 28px;
  background: var(--A-surface-2);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  padding: 0 var(--sp-10) 0 30px;
  font-family: var(--font);
  font-size: var(--text-body);
  color: var(--A-fg);
  outline: none;
}
.dirA .global-search input:focus { border-color: var(--A-accent); background: var(--A-surface); }
.dirA .global-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--A-fg-3); }
.dirA .global-search .kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: 3px;
  padding: var(--sp-2) var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--A-fg-3);
}
.dirA .topbar-right { display: flex; align-items: center; gap: var(--sp-8); margin-left: auto; }
.dirA .icon-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--A-radius);
  color: var(--A-fg-2);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.dirA .icon-btn:hover { background: var(--A-surface-2); color: var(--A-fg); }
.dirA .icon-btn .dot {
  position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  border: 1px solid var(--A-surface);
}
.dirA .user-chip {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: 0 var(--sp-4) 0 var(--sp-8); height: 28px;
  border-radius: var(--A-radius);
  cursor: pointer;
}
.dirA .user-chip:hover { background: var(--A-surface-2); }
.dirA .user-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--navy-100);
  color: var(--A-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--text-micro);
}
.dirA .user-meta { font-size: var(--text-meta); line-height: 1.1; }
.dirA .user-meta .role { color: var(--A-fg-3); font-size: var(--text-meta); }

/* SHELL */
.dirA .shell { flex: 1; display: flex; min-height: 0; }
.dirA .sidebar {
  width: 220px;
  background: var(--A-surface);
  border-right: 1px solid var(--A-rule);
  display: flex; flex-direction: column;
  flex: none;
  overflow-y: auto;
}
.dirA .sidebar-section {
  padding: var(--sp-12) var(--sp-12) var(--sp-6);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  font-weight: 700;
}
.dirA .sidebar-link {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-12);
  font-size: var(--text-label);
  color: var(--A-fg-2);
  cursor: pointer;
  border-left: 2px solid transparent;
  position: relative;
}
.dirA .sidebar-link:hover { background: var(--A-surface-2); color: var(--A-fg); }
.dirA .sidebar-link.active {
  background: var(--A-tint);
  color: var(--A-accent);
  border-left-color: var(--A-accent);
  font-weight: 500;
}
.dirA .sidebar-link .count {
  margin-left: auto;
  background: var(--A-surface-2);
  border: 1px solid var(--A-rule);
  border-radius: 10px;
  padding: 0 var(--sp-6);
  font-size: var(--text-micro);
  color: var(--A-fg-3);
  font-variant-numeric: tabular-nums;
}
.dirA .sidebar-link.active .count { background: #fff; border-color: var(--A-rule); color: var(--A-accent); }
.dirA .sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--A-rule);
  padding: var(--sp-8);
  display: flex; align-items: center; gap: var(--sp-8);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}
.dirA .sidebar-footer .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(46,125,79,.5);
  animation: pulseA 2s var(--ease-out) infinite;
}
@keyframes pulseA { 0% { box-shadow: 0 0 0 0 rgba(46,125,79,.5); } 70% { box-shadow: 0 0 0 6px rgba(46,125,79,0); } 100% { box-shadow: 0 0 0 0 rgba(46,125,79,0); } }

/* SIDEBAR NAV: a module is a row with an icon; its submodules fold underneath it. */
.dirA .sidebar-scroll { padding: var(--sp-6) 0; }

.dirA button.sidebar-link {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  font: inherit;
  font-size: var(--text-label);
  text-align: left;
}

.dirA button.sidebar-link:hover { background: var(--A-surface-2); color: var(--A-fg); }

.dirA .nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dirA .nav-caret {
  flex: none;
  color: var(--A-fg-4);
  transition: transform 0.18s var(--ease-out);
}

.dirA .nav-group.is-open > .nav-parent { color: var(--A-fg); }
.dirA .nav-group.is-open > .nav-parent .nav-caret { transform: rotate(180deg); }

/* A closed group still says the page you are on is one of its submodules. */
.dirA .nav-group.has-active > .nav-parent { color: var(--A-accent); font-weight: 500; }

.dirA .nav-children {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  /* visibility waits out the collapse, so the links do not vanish before the row does. */
  transition: grid-template-rows 0.18s var(--ease-out), visibility 0s linear 0.18s;
}

.dirA .nav-group.is-open > .nav-children {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.18s var(--ease-out), visibility 0s;
}

/* The rail the submodules hang off, aligned under the module's icon. */
.dirA .nav-children-inner {
  overflow: hidden;
  margin-left: 21px;
  border-left: 1px solid var(--A-rule);
}

.dirA .sidebar-link.nav-child {
  /* -1px pulls the active marker onto the rail, so the two read as one line. */
  margin-left: -1px;
  padding: var(--sp-6) var(--sp-12) var(--sp-6) var(--sp-14);
  font-size: var(--text-label);
  color: var(--A-fg-3);
}

.dirA .sidebar-link.nav-child:hover { color: var(--A-fg); }

.dirA .sidebar-link.nav-child.active {
  background: var(--A-tint);
  color: var(--A-accent);
  border-left-color: var(--A-accent);
  font-weight: 500;
}

.dirA .nav-group + .nav-group,
.dirA .nav-group + .sidebar-link,
.dirA .sidebar-link + .nav-group { margin-top: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  .dirA .nav-children,
  .dirA .nav-caret { transition: none; }
}

/* MAIN CONTENT */
.dirA .main {
  flex: 1;
  display: flex; flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.dirA .page-header {
  height: 52px;
  flex: none;
  background: var(--A-surface);
  border-bottom: 1px solid var(--A-rule);
  padding: 0 var(--sp-16);
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}
.dirA .page-title {
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.dirA .page-crumb {
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  display: flex; align-items: center; gap: var(--sp-6);
}
.dirA .page-crumb svg { color: var(--A-fg-3); }
.dirA .page-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-8); }

/* Crumb, title and actions cannot share one 52px row on a phone. */
@media (max-width: 660px) {
  .dirA .page-header {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .dirA .page-actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
  }

  /* Full width each, rather than squeezed to two words a line. */
  .dirA .page-actions > .btn { flex: 1 1 auto; justify-content: center; }
}
.dirA .seg {
  display: inline-flex;
  background: var(--A-surface-2);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  padding: var(--sp-2);
}
.dirA .seg button {
  background: transparent; border: 0;
  padding: var(--sp-4) var(--sp-10);
  font-family: var(--font);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
  cursor: pointer;
  border-radius: 3px;
}
.dirA .seg button.active { background: var(--A-surface); color: var(--A-fg); box-shadow: var(--shadow-1); font-weight: 500; }
.dirA .btn {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  height: 28px;
  padding: 0 var(--sp-12);
  border-radius: var(--A-radius);
  border: 1px solid var(--A-rule);
  background: var(--A-surface);
  color: var(--A-fg);
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: 500;
  cursor: pointer;
}
.dirA .btn:hover { background: var(--A-surface-2); }
.dirA .btn-primary {
  background: var(--A-accent); color: #fff; border-color: var(--A-accent);
}
.dirA .btn-primary:hover { background: var(--A-accent-2); border-color: var(--A-accent-2); }
.dirA .btn-danger {
  background: var(--red); color: #fff; border-color: var(--red);
}
.dirA .btn-danger:hover { background: var(--red-700); border-color: var(--red-700); }
.dirA .btn-ghost { background: transparent; border-color: transparent; color: var(--A-fg-2); }
.dirA .btn-ghost:hover { background: var(--A-surface-2); color: var(--A-fg); }

.dirA .page-body {
  flex: 1;
  overflow: auto;
  padding: var(--sp-12);
}

/* TOOLBAR (above tables) */
.dirA .toolbar {
  display: flex; align-items: center; gap: var(--sp-8);
  /* Wraps rather than compressing its children. Without this the controls squeezed into each
     other inside the patient chart, with the primary button two words tall. */
  flex-wrap: wrap;
  padding: var(--sp-8) var(--sp-10);
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-bottom: 0;
  border-radius: var(--A-radius-md) var(--A-radius-md) 0 0;
}

/* A toolbar button says what it does; breaking the label over two lines is never the
   right answer to a narrow toolbar — the row wraps instead. */
.dirA .toolbar .btn,
.dirA .toolbar-right .btn { white-space: nowrap; }

/* The search box gives up width before anything else, down to a still-usable size. */
.dirA .toolbar .filter-wrap { flex: 1 1 180px; min-width: 150px; max-width: 320px; }
.dirA .toolbar .filter-wrap .filter-input { width: 100%; }
.dirA .toolbar .filter-input {
  height: 26px;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  padding: 0 var(--sp-8) 0 26px;
  font-family: var(--font);
  font-size: var(--text-meta);
  background: var(--A-surface-2);
  color: var(--A-fg);
  width: 220px;
  outline: none;
  position: relative;
}
.dirA .toolbar .filter-wrap { position: relative; }
.dirA .toolbar .filter-wrap svg { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); color: var(--A-fg-3); }
.dirA .chip-filter {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  height: 26px; padding: 0 var(--sp-8);
  border: 1px dashed var(--A-rule-strong);
  border-radius: var(--A-radius);
  font: inherit;
  font-size: var(--text-meta);
  color: var(--A-fg-2);
  background: var(--A-surface);
  cursor: pointer;
}
.dirA .chip-filter:hover { border-color: var(--A-accent); color: var(--A-accent); }
.dirA .chip-filter.has-value {
  border-style: solid;
  border-color: var(--A-rule-strong);
  background: var(--A-tint);
  color: var(--A-accent);
}
.dirA .chip-filter .chip-label { color: var(--A-fg-3); }
.dirA .chip-filter.has-value .chip-label { color: var(--A-accent); }
.dirA .chip-filter .chip-x { opacity: .5; }
.dirA .chip-filter:hover .chip-x { opacity: 1; }

/* margin-left:auto keeps this group hard right on a wide toolbar; once the row wraps it
   becomes its own line, still right-aligned, so the primary action stays where the eye
   already expects it — last, after Export and Columns. */
.dirA .toolbar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--sp-6);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* TABLE */
.dirA .table-wrap {
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: 0 0 var(--A-radius-md) var(--A-radius-md);
  overflow: hidden;
}
.dirA .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.dirA .table th {
  background: var(--A-surface-2);
  border-bottom: 1px solid var(--A-rule);
  padding: var(--sp-6) var(--A-cell-pad);
  text-align: left;
  font-weight: 600;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  height: 28px;
  position: sticky; top: 0;
  white-space: nowrap;
}
.dirA .table th .th-sort {
  display: inline-flex; align-items: center; gap: var(--sp-4); cursor: pointer;
}
.dirA .table th.num, .dirA .table td.num { text-align: right; }
.dirA .table td {
  padding: 0 var(--A-cell-pad);
  height: var(--A-row-h);
  border-bottom: 1px solid var(--A-rule-2);
  font-size: var(--text-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}
.dirA .table tr:hover td { background: var(--A-surface-2); }
.dirA .table tr.selected td { background: var(--A-tint); }
/* min-width as well as width, for the same reason .expand has one: in an auto-layout table
   width is only a suggestion, and this column was rendering as half a checkbox. */
.dirA .table th.check,
.dirA .table td.check {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding-right: 0;
  box-sizing: border-box;
  text-align: center;
}

/* Drawn rather than left to the browser: accent-color only tints a native control. Every
   box in the app, so a dialog's tick cannot come out in the browser's blue. Kendo's own
   are left alone -- the legacy screens style those themselves. */
.dirA input[type="checkbox"]:not(.k-checkbox) {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  flex: none;
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid var(--A-rule-strong);
  border-radius: 3px;
  background: var(--A-surface) no-repeat center / 11px 11px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

.dirA input[type="checkbox"]:not(.k-checkbox):hover:not(:disabled) {
  border-color: var(--A-accent);
}

.dirA input[type="checkbox"]:not(.k-checkbox):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--A-tint);
  border-color: var(--A-accent);
}

.dirA input[type="checkbox"]:not(.k-checkbox):checked,
.dirA input[type="checkbox"]:not(.k-checkbox):indeterminate {
  background-color: var(--A-accent);
  border-color: var(--A-accent);
}

.dirA input[type="checkbox"]:not(.k-checkbox):checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.2 8.4 3.1 3.1L12.8 5'/%3E%3C/svg%3E");
}

.dirA input[type="checkbox"]:not(.k-checkbox):indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}

/* Disabled but checked still reads as in -- a greyed empty box would say the opposite. */
.dirA input[type="checkbox"]:not(.k-checkbox):disabled {
  cursor: not-allowed;
  background-color: var(--A-surface-2);
  border-color: var(--A-rule);
}

.dirA input[type="checkbox"]:not(.k-checkbox):disabled:checked {
  background-color: var(--A-rule-strong);
  border-color: var(--A-rule-strong);
}

.dirA .badge {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-8);
  border-radius: 3px;
  font-size: var(--text-meta);
  font-weight: 500;
  line-height: 1.5;
  background: var(--A-surface-2);
  color: var(--A-fg-2);
  border: 1px solid var(--A-rule);
}
.dirA .badge.success { background: var(--success-100); color: var(--success); border-color: transparent; }
.dirA .badge.warning { background: var(--warning-100); color: var(--warning); border-color: transparent; }
.dirA .badge.danger  { background: var(--danger-100);  color: var(--danger);  border-color: transparent; }
.dirA .badge.info    { background: var(--navy-100);    color: var(--navy);    border-color: transparent; }
.dirA .badge.teal    { background: var(--teal-100);    color: var(--teal);    border-color: transparent; }
.dirA .badge.violet  { background: var(--violet-100);  color: var(--violet);  border-color: transparent; }
.dirA .badge.sky     { background: var(--sky-100);     color: var(--sky);     border-color: transparent; }
.dirA .badge.rose    { background: var(--rose-100);    color: var(--rose);    border-color: transparent; }
.dirA .badge.dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

.dirA .pager {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-10);
  border-top: 1px solid var(--A-rule);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  background: var(--A-surface);
}
.dirA .pager-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-6); }
/* min-width, not width: a four-digit page number ran straight out of a fixed 22px box.
   Square for one digit and for the arrows, wider only when the number needs it. */
.dirA .pager .page-btn {
  min-width: 22px; height: 22px;
  padding: 0 var(--sp-6);
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--A-rule);
  background: var(--A-surface);
  border-radius: 3px;
  color: var(--A-fg-2);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.dirA .pager .page-btn.active { background: var(--A-accent); color: #fff; border-color: var(--A-accent); }

/* CARDS / KPI */
.dirA .row-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-10); margin-bottom: var(--sp-12); }
.dirA .card {
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  padding: var(--sp-12) var(--sp-14);
}
.dirA .card-label {
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-6);
}
.dirA .card-value {
  font-size: var(--text-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: var(--sp-6);
  font-variant-numeric: tabular-nums;
}
.dirA .card-delta { font-size: var(--text-meta); margin-top: var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-4); }
.dirA .card-delta.up { color: var(--success); }
.dirA .card-delta.down { color: var(--danger); }
.dirA .card-delta.neutral { color: var(--A-fg-3); }
.dirA .card-spark {
  margin-top: var(--sp-6);
  display: flex; align-items: end; gap: var(--sp-2); height: 28px;
}
.dirA .card-spark span { background: var(--A-tint); width: 6px; border-radius: 1px; }
.dirA .card-spark span.high { background: var(--A-accent); }

/* SECTION */
.dirA .section-title {
  font-size: var(--text-label);
  font-weight: 650;
  color: var(--A-fg-3);
  margin: var(--sp-16) 0 var(--sp-8);
  display: flex; align-items: center; gap: var(--sp-8);
}
.dirA .section-title .rule { flex: 1; height: 1px; background: var(--A-rule); }

/* SPLIT (chart + secondary) */
.dirA .split-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-10); }
.dirA .panel {
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
}
.dirA .panel-h {
  padding: var(--sp-10) var(--sp-14);
  border-bottom: 1px solid var(--A-rule);
  font-size: var(--text-label);
  font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-8);
}
.dirA .panel-h .meta { margin-left: auto; font-weight: 400; color: var(--A-fg-3); font-size: var(--text-meta); }
.dirA .panel-b { padding: var(--sp-14); }

/* PATIENT CHART */
.dirA .chart-grid {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: var(--sp-10);
  height: 100%;
}
.dirA .pt-summary {
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  padding: var(--sp-14);
  display: flex; flex-direction: column; gap: var(--sp-12);
}
.dirA .pt-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--navy-100);
  color: var(--A-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600;
  letter-spacing: 0.02em;
}
.dirA .pt-name { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.005em; }
.dirA .pt-meta { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .pt-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-12); font-size: var(--text-meta); }
.dirA .pt-kv dt { color: var(--A-fg-3); }
.dirA .pt-kv dd { color: var(--A-fg); margin: 0; font-variant-numeric: tabular-nums; }
.dirA .pt-alerts {
  background: var(--danger-100);
  color: var(--danger);
  padding: var(--sp-8) var(--sp-10);
  border-radius: var(--A-radius);
  font-size: var(--text-meta);
  display: flex; gap: var(--sp-6); align-items: flex-start;
}

.dirA .pt-tabs {
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dirA .pt-tabbar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--A-rule);
  padding: 0 var(--sp-4);
  background: var(--A-surface-2);
}
.dirA .pt-tab {
  font-size: var(--text-label);
  padding: var(--sp-8) var(--sp-12);
  color: var(--A-fg-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.dirA .pt-tab.active { color: var(--A-accent); border-bottom-color: var(--A-accent); background: var(--A-surface); font-weight: 500; }
.dirA .pt-content { padding: var(--sp-14); overflow: auto; flex: 1; }

.dirA .timeline-item {
  display: grid;
  grid-template-columns: 60px 16px 1fr;
  gap: var(--sp-10);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--A-rule-2);
  font-size: var(--text-label);
}
.dirA .timeline-item:last-child { border-bottom: 0; }
.dirA .timeline-time { color: var(--A-fg-3); font-variant-numeric: tabular-nums; font-size: var(--text-meta); }
.dirA .timeline-dot {
  width: 8px; height: 8px;
  background: var(--A-accent);
  border-radius: 50%;
  margin-top: var(--sp-6);
  margin-left: var(--sp-4);
}
.dirA .timeline-dot.muted { background: var(--A-rule-strong); }
.dirA .timeline-dot.danger { background: var(--danger); }
.dirA .timeline-dot.success { background: var(--success); }
.dirA .timeline-title { font-weight: 500; }
.dirA .timeline-meta { color: var(--A-fg-3); font-size: var(--text-meta); margin-top: var(--sp-2); }

.dirA .pt-aside { display: flex; flex-direction: column; gap: var(--sp-10); }

/* POS */
.dirA .pos-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-10); height: 100%; }
.dirA .pos-search {
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dirA .pos-search-input {
  padding: var(--sp-10);
  border-bottom: 1px solid var(--A-rule);
  display: flex; gap: var(--sp-8);
}
.dirA .pos-search-input input {
  flex: 1;
  height: 36px;
  background: var(--A-surface-2);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  padding: 0 var(--sp-12);
  font-family: var(--font);
  font-size: var(--text-body);
  outline: none;
}
.dirA .pos-grid-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-8);
  padding: var(--sp-10);
  overflow: auto;
  flex: 1;
}
.dirA .pos-item {
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  padding: var(--sp-10);
  cursor: pointer;
  display: flex; flex-direction: column; gap: var(--sp-6);
  min-height: 88px;
}
.dirA .pos-item:hover { border-color: var(--A-accent); background: var(--A-tint); }
.dirA .pos-item .name { font-size: var(--text-label); font-weight: 500; line-height: 1.3; }
.dirA .pos-item .form { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .pos-item .price { margin-top: auto; font-size: var(--text-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.dirA .pos-item.controlled { border-left: 3px solid var(--red); }

.dirA .pos-cart {
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dirA .pos-cart-h { padding: var(--sp-10) var(--sp-12); border-bottom: 1px solid var(--A-rule); font-weight: 600; font-size: var(--text-body); display: flex; align-items: center; gap: var(--sp-6); }
.dirA .pos-cart-customer {
  padding: var(--sp-10) var(--sp-12);
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-surface-2);
  display: flex; gap: var(--sp-8); align-items: center;
}
.dirA .pos-cart-list { flex: 1; overflow: auto; padding: var(--sp-4) 0; }
.dirA .pos-cart-item {
  padding: var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--A-rule-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: start;
}
.dirA .pos-cart-item .name { font-size: var(--text-label); font-weight: 500; }
.dirA .pos-cart-item .meta { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .pos-cart-item .qty { display: inline-flex; align-items: center; gap: var(--sp-4); }
.dirA .qty-btn {
  width: 20px; height: 20px;
  border: 1px solid var(--A-rule);
  background: var(--A-surface);
  border-radius: 3px;
  cursor: pointer;
  font-size: var(--text-label);
  color: var(--A-fg-2);
}
.dirA .pos-cart-item .price { font-size: var(--text-label); font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.dirA .pos-totals {
  padding: var(--sp-10) var(--sp-12);
  border-top: 1px solid var(--A-rule);
  background: var(--A-surface-2);
  font-size: var(--text-label);
}
.dirA .pos-totals-row { display: flex; justify-content: space-between; padding: var(--sp-2) 0; font-variant-numeric: tabular-nums; }
.dirA .pos-totals-row.grand { font-size: var(--text-title); font-weight: 600; padding-top: var(--sp-6); border-top: 1px dashed var(--A-rule-strong); margin-top: var(--sp-4); }
.dirA .pos-actions { padding: var(--sp-10) var(--sp-12); display: flex; gap: var(--sp-6); border-top: 1px solid var(--A-rule); }
.dirA .pos-actions .btn { flex: 1; justify-content: center; height: 36px; font-size: var(--text-body); }

/* DISPENSE QUEUE */
.dirA .queue-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-10); height: 100%; }

/* PRESCRIBING */
.dirA .rx-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-10); height: 100%; }
.dirA .rx-form .field { padding: var(--sp-8) var(--sp-12); border-bottom: 1px solid var(--A-rule-2); }
/* No override: the prescription form uses the same label as every other form in the app. */
.dirA .input {
  width: 100%; height: 28px;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  padding: 0 var(--sp-8);
  font-family: var(--font); font-size: var(--text-body);
  background: var(--A-surface);
  color: var(--A-fg);
  outline: none;
  margin-top: var(--sp-4);
  transition: border-color 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.dirA .input:hover:not(:focus):not(:disabled) { border-color: var(--A-rule-strong); }
.dirA .input:focus { border-color: var(--A-accent); box-shadow: 0 0 0 2px var(--navy-100); }
/* ---------- Native selects ----------
   The arrow drawn as the design system's chevron rather than the platform's. An SVG data
   URI, because a <select> cannot carry a pseudo-element. */
.dirA select.input,
.dirA .grid-view-select,
.dirA .crx-cal-title select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A8392' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
  cursor: pointer;
}

.dirA select.input { padding-left: var(--sp-8); }

/* The chevron picks up the accent when the control has focus, like every other field. */
.dirA select.input:focus,
.dirA .grid-view-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231B3A58' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Fields nobody may change ----------
   Read-only gets the same treatment as disabled. A locked field that looks like an editable
   one invites the edit and then refuses it; the tinted fill and the stronger rule say so up
   front. Covers the quantity and refill fields fixed once a drug has gone out. */
.dirA select.input:disabled,
.dirA .input:disabled,
.dirA .input[readonly] {
  background-color: var(--A-surface-2);
  border-color: var(--A-rule-strong);
  color: var(--A-fg-3);
  cursor: default;
}

/* Neither hover nor focus offers anything, so neither lights up. */
.dirA .input[readonly]:hover,
.dirA .input[readonly]:focus {
  border-color: var(--A-rule-strong);
  box-shadow: none;
}
.dirA textarea.input { min-height: 60px; padding: var(--sp-6) var(--sp-8); height: auto; resize: vertical; }

.dirA .dur-card {
  border: 1px solid var(--warning);
  background: var(--warning-100);
  border-radius: var(--A-radius);
  padding: var(--sp-10) var(--sp-12);
  font-size: var(--text-label);
  color: var(--warning);
  display: flex; gap: var(--sp-8);
}

/* LOGIN */
/* Every other page gets border-box and [hidden] from Bootstrap's reset, which these rules
   quietly leaned on. The login page carries neither, so .dirA states both for itself: a
   padded input was overflowing its own 100% width, and a hidden icon was still drawn. */
.dirA, .dirA *, .dirA *::before, .dirA *::after { box-sizing: border-box; }
.dirA [hidden] { display: none !important; }

body.crx-login-page { margin: 0; }
body.crx-login-page .dirA { min-height: 100vh; }

.dirA .login-screen {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--A-bg);
}

@media (max-width: 860px) {
  /* Stacked, the panel becomes a band under the form, which is already first in the markup. */
  .dirA .login-screen { grid-template-columns: minmax(0, 1fr); }
  .dirA .login-side { padding: var(--sp-24); gap: var(--sp-12); }
  .dirA .login-sub { font-size: var(--text-body); }
  .dirA .login-foot { margin-top: var(--sp-16); }
}
.dirA .login-side {
  background: var(--navy);
  color: #fff;
  padding: var(--sp-48);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-20);
  position: relative;
  overflow: hidden;
}
/* The shared _ErrorMessages partial emits Bootstrap's alert classes. The sign-in pages no
   longer load Bootstrap, so they are given here - scoped, so the pages that still do are
   untouched. Without these the message renders as bare text. */
.dirA .alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  margin-bottom: var(--sp-16);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid;
  border-radius: var(--A-radius);
  font-size: var(--text-label);
  line-height: 1.45;
}

.dirA .alert-success { border-color: #BFDFCD; background: var(--success-100); color: var(--success); }
.dirA .alert-danger { border-color: #F0C9CB; background: var(--danger-100); color: var(--danger); }

/* The partial's dismiss link. It sits after the text, small and quiet. */
.dirA .alert .close {
  order: 2;
  margin-left: auto;
  color: inherit;
  opacity: .55;
  text-decoration: none;
  font-size: var(--text-body);
  line-height: 1;
}

.dirA .alert .close:hover { opacity: 1; }
.dirA .alert > div { flex: 1; min-width: 0; }
.dirA .alert .text-success, .dirA .alert .text-danger { color: inherit; }

/* Validation text under a field, which the partial and the tag helpers both emit. */
.dirA .text-danger { color: var(--danger); font-size: var(--text-meta); }

/* An empty validation summary must not leave a coloured box on the page. */
.dirA .alert:empty, .dirA .validation-summary-valid { display: none; }

/* Two soft lights bleeding off opposite corners, so the panel is lit rather than flat. */
.dirA .login-side::before,
.dirA .login-side::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dirA .login-side::before {
  right: -120px; top: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 70%);
}

.dirA .login-side::after {
  left: -110px; bottom: -100px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07), transparent 70%);
}

/* The words sit above both. */
.dirA .login-side > * { position: relative; z-index: 1; }
.dirA .login-mark {
  display: flex; align-items: center; gap: var(--sp-10);
}
.dirA .login-mark img { height: 38px; width: auto; display: block; }
/* One line, set large enough to be the only thing on this side worth reading. */
.dirA .login-sub {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  max-width: 340px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  margin: 0;
}

/* The drawing sits between the line and the small print, sized to the panel rather than
   to itself, so a short window shrinks it instead of pushing the footer off. */
.dirA .login-art {
  width: min(320px, 78%);
  height: auto;
  max-height: 42vh;
  margin: var(--sp-8) 0;
  overflow: visible;
}

@media (max-width: 860px) {
  /* Stacked, the panel is a band: there is no room for it and nothing lost without it. */
  .dirA .login-art { display: none; }
}

/* The small print, kept off the line above rather than ruled away from it. */
.dirA .login-foot {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-24);
  font-size: var(--text-meta);
  color: rgba(255, 255, 255, 0.45);
}

/* Which build this is, for anyone reporting a problem against it. */
.dirA .login-version { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.dirA .login-form-side {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-48);
  background: var(--A-surface);
}
.dirA .login-form { width: 100%; max-width: 320px; }
.dirA .login-form h2 { font-size: var(--text-head); font-weight: 600; margin-bottom: var(--sp-4); }
.dirA .login-form p { font-size: var(--text-label); color: var(--A-fg-3); margin-bottom: var(--sp-24); }
/* Sign-in message. A quiet surface with a coloured edge and one icon, rather than a
   filled red panel -- a mistyped password is a correction, not an incident. No dismiss:
   the next submit replaces it, and a close button that only hides the reason for the
   failure is worse than none. */
.dirA .login-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-10);
  margin: 0 0 var(--sp-16);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-left-width: 3px;
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
  font-size: var(--text-label);
  line-height: 1.45;
}

.dirA .login-note.is-bad { border-left-color: var(--danger); }
.dirA .login-note.is-ok  { border-left-color: var(--success); }

.dirA .login-note > svg {
  flex: none;
  width: 16px;
  height: 16px;
  /* Sits with the first line of text rather than the top of the box. */
  margin-top: 1px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dirA .login-note.is-bad > svg { stroke: var(--danger); }
.dirA .login-note.is-ok  > svg { stroke: var(--success); }

/* The text reads in the body colour. Severity is carried once, by the edge and the icon;
   repeating it in red makes the sentence harder to read, not more urgent. */
.dirA .login-note p,
.dirA .login-note div { margin: 0; min-width: 0; font-size: inherit; color: var(--A-fg-2); }

/* asp-validation-summary emits a <ul>. One message should not look like a list. */
.dirA .login-note ul { margin: 0; padding: 0; list-style: none; }
.dirA .login-note li + li { margin-top: var(--sp-4); }

/* Nothing to say, no box. */
.dirA .login-note:has(.validation-summary-valid) { display: none; }

.dirA .login-field { margin-bottom: var(--sp-12); }
.dirA .login-field label { font-size: var(--text-label); color: var(--A-fg); display: block; margin-bottom: var(--sp-6); font-weight: 600; }
.dirA .login-field input { width: 100%; height: 36px; }
.dirA .login-form .btn-primary { width: 100%; justify-content: center; height: 36px; font-size: var(--text-body); }
.dirA .login-help { display: flex; justify-content: space-between; margin-top: var(--sp-16); font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .login-help a { color: var(--A-fg-2); }
.dirA .login-help a:hover { color: var(--A-accent); }

/* The password and the eye that reveals it are one control. line-height 0 and a block
   input, or the wrapper keeps a line box taller than the field and the eye sits off centre. */
.dirA .login-secret { position: relative; display: block; line-height: 0; }
.dirA .login-secret .input { display: block; padding-right: var(--sp-32); }

/* Stretched to the field: a fixed 36px sat high once the input grew past it. */
.dirA .login-secret button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--sp-32);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--A-fg-4);
  cursor: pointer;
  padding: 0;
}

.dirA .login-secret button:hover { color: var(--A-fg-2); }

/* ---- the eye ---- */

/* Drawn on a 1080 canvas; the button gives it a glyph's size. */
.dirA .eye-ico { display: block; width: 20px; height: 20px; overflow: visible; }

/* The slash is drawn on, not swapped in, so showing and hiding is one movement. */
.dirA .eye-ico .eye-slash {
  stroke-dasharray: 960;
  stroke-dashoffset: 960;
  transition: stroke-dashoffset .2s var(--ease-out, ease-out);
}
.dirA .login-secret button.is-showing .eye-slash { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .dirA .eye-ico .eye-slash { transition: none; }
}

.dirA .login-go { margin-top: var(--sp-16); }

/* A press that has been taken: greyed, not clickable, and spinning while it posts. */
.dirA .login-form .btn:disabled {
  opacity: .62;
  cursor: not-allowed;
  pointer-events: none;
}

.dirA .login-go.is-working .login-go-text::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: var(--sp-8);
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: msi-spin .8s linear infinite;
}

/* A rule with a word in it, rather than the word floating over a line. */
.dirA .login-or {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  margin: var(--sp-24) 0 var(--sp-16);
  font-size: var(--text-meta);
  color: var(--A-fg-4);
}

.dirA .login-or::before,
.dirA .login-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--A-rule);
}

.dirA .login-external {
  width: 100%;
  justify-content: center;
  gap: var(--sp-8);
  height: 36px;
}

/* The end of a flow leads with its outcome. A tick, then what it means. */
.dirA .login-done {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--sp-14);
  border-radius: 50%;
  background: var(--success-100);
  color: var(--success);
}

/* An anchor standing in for the submit button: the same box, and a link's underline off. */
.dirA a.login-go { text-decoration: none; }

/* What happens after the button: three facts, not a feature list. */
.dirA .login-steps {
  margin: var(--sp-24) 0 0;
  padding: var(--sp-14) 0 0;
  border-top: 1px solid var(--A-rule);
  list-style: none;
  display: grid;
  gap: var(--sp-8);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .login-steps li { position: relative; padding-left: var(--sp-14); }

.dirA .login-steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--A-fg-4);
}

.dirA .login-ask {
  margin: var(--sp-24) 0 0;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .login-ask a { color: var(--A-accent); }

/* CHART (dashboard sparkline svg) */
.dirA .mini-chart { width: 100%; height: 140px; }


/* TENANT + LOCATION SWITCHER — Direction A (topbar, compact) */
.dirA .tenant-switcher--dirA {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--A-rule);
  padding-right: var(--sp-8);
  margin-right: var(--sp-4);
}
.dirA .tenant-switcher--dirA .ts-trigger {
  display: flex; align-items: center; gap: var(--sp-8);
  height: 32px;
  padding: 0 var(--sp-8);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--A-radius);
  color: var(--A-fg);
  cursor: pointer;
  font-family: var(--font);
}
.dirA .tenant-switcher--dirA .ts-trigger:hover { background: var(--A-surface-2); border-color: var(--A-rule); }
.dirA .tenant-switcher--dirA.is-open .ts-trigger { background: var(--A-tint); border-color: var(--A-accent); color: var(--A-accent); }

.dirA .tenant-switcher--dirA .ts-tenant-mark {
  width: 24px; height: 24px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--A-accent) 0%, var(--A-accent-2) 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--text-micro);
  letter-spacing: 0.04em;
  flex: none;
}
/* Wearing the location's own logo: the gradient and the letter-spacing are for initials. */
.dirA .ts-tenant-mark.has-logo {
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  object-fit: contain;
  padding: 1px;
}

.dirA .tenant-switcher--dirA .ts-meta { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; line-height: 1.05; }
.dirA .tenant-switcher--dirA .ts-tenant-name { font-size: var(--text-meta); font-weight: 600; color: var(--A-fg); letter-spacing: 0; }
.dirA .tenant-switcher--dirA .ts-loc-row { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--text-meta); color: var(--A-fg-3); font-weight: 500; }
.dirA .tenant-switcher--dirA .ts-loc-row svg { width: 10px; height: 10px; flex: none; }
.dirA .tenant-switcher--dirA .ts-loc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* Popover */
.dirA .ts-pop {
  position: absolute; top: calc(100% + 6px); left: 0;
  width: 360px;
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  box-shadow: var(--shadow-2);
  z-index: 100;
  overflow: hidden;
}
.dirA .ts-pop-h {
  padding: var(--sp-12);
  background: var(--A-surface-2);
  border-bottom: 1px solid var(--A-rule);
  display: flex; align-items: center; gap: var(--sp-10);
}
.dirA .ts-pop-tenant { display: flex; align-items: center; gap: var(--sp-10); flex: 1; min-width: 0; }
.dirA .ts-tenant-mark--lg { width: 36px; height: 36px; border-radius: 7px; font-size: 14px; }
.dirA .ts-pop-tenant-name { font-weight: 600; font-size: var(--text-body); color: var(--A-fg); }
.dirA .ts-pop-tenant-meta { font-size: var(--text-meta); color: var(--A-fg-3); margin-top: var(--sp-2); }
.dirA .ts-pop-tenant-switch {
  background: transparent;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  padding: var(--sp-4) var(--sp-10);
  font-size: var(--text-meta);
  font-family: var(--font);
  color: var(--A-fg-2);
  cursor: pointer;
}
.dirA .ts-pop-tenant-switch:hover { background: var(--A-surface); border-color: var(--A-accent); color: var(--A-accent); }

.dirA .ts-pop-sec {
  padding: var(--sp-10) var(--sp-12) var(--sp-6);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--A-fg-3);
}
.dirA .ts-pop-list { max-height: 280px; overflow-y: auto; }
.dirA .ts-loc {
  width: 100%;
  display: flex; align-items: center; gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
  color: var(--A-fg);
}
.dirA .ts-loc:hover { background: var(--A-surface-2); }
.dirA .ts-loc.is-active { background: var(--A-tint); border-left-color: var(--A-accent); }
.dirA .ts-loc-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--A-surface-2);
  border: 1px solid var(--A-rule);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--A-fg-3);
  flex: none;
}
.dirA .ts-loc.is-active .ts-loc-icon { background: var(--A-accent); border-color: var(--A-accent); color: #fff; }
.dirA .ts-loc-info { flex: 1; min-width: 0; line-height: 1.2; }
.dirA .ts-loc-title { font-size: var(--text-label); font-weight: 600; color: var(--A-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dirA .ts-loc.is-active .ts-loc-title { color: var(--A-accent); }
.dirA .ts-loc-sub { font-size: var(--text-meta); color: var(--A-fg-3); margin-top: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dirA .ts-loc-right { display: flex; align-items: center; gap: var(--sp-6); flex: none; font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .ts-loc-dot { width: 6px; height: 6px; border-radius: 50%; }
.dirA .ts-loc-dot--open { background: var(--success); }
.dirA .ts-loc-dot--closed { background: var(--A-fg-4, #B5BCC8); }
.dirA .ts-loc-status { font-weight: 500; }
.dirA .ts-loc.is-active .ts-loc-right svg { color: var(--A-accent); }

.dirA .ts-pop-foot {
  display: flex;
  border-top: 1px solid var(--A-rule);
  background: var(--A-surface-2);
}
.dirA .ts-pop-foot-btn {
  flex: 1;
  padding: var(--sp-10) var(--sp-12);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--A-rule);
  font-family: var(--font);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-6);
}
.dirA .ts-pop-foot-btn:last-child { border-right: 0; }
.dirA .ts-pop-foot-btn:hover { background: var(--A-surface); color: var(--A-accent); }
.dirA .ts-pop-foot-btn:disabled { color: var(--A-fg-4); cursor: default; background: transparent; }

/* ============================================================ DATE PICKER ====
   components/ui/DatePicker.tsx — the app's one date control.

   Sized against .input (28px) so a date sits in a row of text boxes without being the
   tall one, and the popup is deliberately small: a month is 42 cells, and at Kendo's
   default scale that block covered half the form behind it. */

.dirA .crx-date { position: relative; display: block; }

.dirA .crx-date-box {
  display: flex; align-items: center;
  height: 28px;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  margin-top: var(--sp-4);
  transition: border-color 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.dirA .crx-date-box:hover:not(:focus-within) { border-color: var(--A-rule-strong); }
.dirA .crx-date-box:focus-within {
  border-color: var(--A-accent);
  box-shadow: 0 0 0 2px var(--navy-100);
}

/* The box owns the chrome; the input inside it is bare, so a date field does not read as
   two nested boxes the way the Kendo picker did. */
.dirA .crx-date-input {
  flex: 1 1 auto; min-width: 0;
  height: 100%;
  border: 0; outline: none; background: transparent;
  padding: 0 0 0 var(--sp-8);
  font-family: var(--font); font-size: var(--text-label);
  color: var(--A-fg);
  font-variant-numeric: tabular-nums;
}
.dirA .crx-date-input::placeholder { color: var(--A-fg-4); }
.dirA .crx-date-input:disabled { color: var(--A-fg-3); }

.dirA .crx-date-clear,
.dirA .crx-date-open {
  flex: 0 0 auto;
  width: 24px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; padding: 0;
  color: var(--A-fg-3); cursor: pointer;
  border-radius: var(--A-radius);
}
/* Clearing is an edit, so the x waits until the field is being used rather than sitting
   in every date on the page. */
.dirA .crx-date-clear { opacity: 0; transition: opacity 0.12s var(--ease-out); }
.dirA .crx-date-box:hover .crx-date-clear,
.dirA .crx-date-box:focus-within .crx-date-clear { opacity: 1; }
.dirA .crx-date-clear:hover { color: var(--A-fg); background: var(--A-surface-2); }

.dirA .crx-date-open { margin-right: var(--sp-2); }
.dirA .crx-date-open:hover { color: var(--A-accent); background: var(--A-surface-2); }
/* Open reads as pressed, so the calendar and its button are plainly one control. */
.dirA .crx-date-open[aria-expanded="true"] {
  color: var(--A-accent);
  background: var(--A-tint);
}
.dirA .crx-date-open:disabled { color: var(--A-fg-4); cursor: default; background: transparent; }

/* In a grid cell the control is borderless until touched, so a column of dates reads as
   dates rather than as a column of form controls. */
.dirA .crx-date.is-cell { margin: 0; }
.dirA .crx-date.is-cell .crx-date-box {
  height: 24px; margin-top: 0; border-color: transparent; background: transparent;
}
.dirA .crx-date.is-cell .crx-date-box:hover { border-color: var(--A-rule); background: var(--A-surface); }
.dirA .crx-date.is-cell .crx-date-box:focus-within { border-color: var(--A-accent); background: var(--A-surface); }
.dirA .crx-date.is-cell .crx-date-input { font-size: var(--text-label); padding-left: var(--sp-6); }
.dirA .crx-date.is-cell .crx-date-clear { display: none; }

/* ---- the calendar ---- */

.crx-cal {
  /* Fixed, not absolute: the coordinates are measured off the field with
     getBoundingClientRect, which is viewport-relative. z-index clears the overlays. */
  position: fixed; z-index: 1300;
  /* Width is also CAL_W in DatePicker.tsx, which places the popup. */
  width: 236px;
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.06);
  padding: var(--sp-10);
  user-select: none;
  animation: crxCalIn 0.12s var(--ease-out);
}

@keyframes crxCalIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .crx-cal { animation: none; }
}

.crx-cal-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-6);
}

.crx-cal-nav {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--A-fg-3); cursor: pointer; padding: 0;
  transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
.crx-cal-nav:hover { background: var(--A-surface-2); color: var(--A-fg); }

/* The title is the way out to the month and year grids, so it looks pressable. */
.crx-cal-title {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  height: 26px; padding: 0 var(--sp-10);
  border: 1px solid transparent; border-radius: 999px;
  background: transparent;
  font-family: var(--font); font-size: var(--text-label); font-weight: 600;
  color: var(--A-fg);
  cursor: pointer;
}
.crx-cal-title:hover { background: var(--A-surface-2); }
.crx-cal-title:focus-visible { outline: none; border-color: var(--A-accent); }

/* Month and year grids. Both are sized to the same box as the day grid, so the calendar
   never changes height as you step out and back — the popup's position is measured once. */
.crx-cal-months,
.crx-cal-years {
  display: grid;
  gap: var(--sp-2);
  /* 6 week rows at 30px + the weekday header, so all three views match. */
  min-height: 204px;
  align-content: center;
}
.crx-cal-months { grid-template-columns: repeat(3, 1fr); }
.crx-cal-years  { grid-template-columns: repeat(4, 1fr); }

.crx-cal-cell {
  height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent;
  font-family: var(--font); font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  color: var(--A-fg);
  cursor: pointer; padding: 0;
}
.crx-cal-cell:hover:not(:disabled) { background: var(--A-tint); color: var(--A-accent); }
.crx-cal-cell:disabled { color: var(--A-fg-4); cursor: default; opacity: 0.5; }
.crx-cal-cell.is-today { border-color: var(--A-rule-strong); font-weight: 600; }
.crx-cal-cell.is-selected {
  background: var(--A-accent); border-color: var(--A-accent);
  color: #fff; font-weight: 600;
}
.crx-cal-cell.is-selected:hover:not(:disabled) { background: var(--A-accent-2); }

.crx-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-2);
}

.crx-cal-wd {
  height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--A-fg-4);
}

.crx-cal-d {
  position: relative;
  height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: transparent;
  font-family: var(--font); font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  color: var(--A-fg);
  cursor: pointer; padding: 0;
  transition: background 0.1s var(--ease-out), color 0.1s var(--ease-out);
}
.crx-cal-d:hover:not(:disabled) { background: var(--A-tint); color: var(--A-accent); }
.crx-cal-d.is-outside { color: var(--A-fg-4); }
.crx-cal-d:disabled   { color: var(--A-fg-4); cursor: default; opacity: 0.5; }

/* Today wears a dot, the chosen day is filled: one says "where you are", the other says
   "what this field holds", and they have to read apart when they are the same day. */
.crx-cal-d.is-today { font-weight: 600; }
.crx-cal-d.is-today::after {
  content: '';
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--A-accent);
}
.crx-cal-d.is-selected {
  background: var(--A-accent);
  color: #fff; font-weight: 600;
}
.crx-cal-d.is-selected::after { background: #fff; }
.crx-cal-d.is-selected:hover:not(:disabled) { background: var(--A-accent-2); color: #fff; }

.crx-cal-f {
  display: flex; justify-content: space-between;
  margin-top: var(--sp-8); padding-top: var(--sp-8);
  border-top: 1px solid var(--A-rule-2);
}
.crx-cal-action {
  border: 0; background: transparent; padding: var(--sp-4) var(--sp-10);
  font-family: var(--font); font-size: var(--text-meta); font-weight: 500;
  color: var(--A-accent); cursor: pointer; border-radius: 999px;
}
.crx-cal-action:hover:not(:disabled) { background: var(--A-tint); }
.crx-cal-action:disabled { color: var(--A-fg-4); cursor: default; }

/* ---------- Date range (components/ui/DatePicker -> DateRangePicker) ----------
   Two ends in one border. They were a pair of separate fields with the word "to" between
   them, which left the relationship to the layout; one box says it outright, and one
   calendar takes both ends instead of asking twice. */

.dirA .crx-range { position: relative; display: block; }

.dirA .crx-range-box {
  display: flex;
  align-items: center;
  height: 28px;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  margin-top: var(--sp-4);
  transition: border-color 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.dirA .crx-range-box:hover:not(:focus-within) { border-color: var(--A-rule-strong); }
.dirA .crx-range-box:focus-within,
.dirA .crx-range-box.is-open {
  border-color: var(--A-accent);
  box-shadow: 0 0 0 2px var(--navy-100);
}

/* Each end is exactly as wide as mm/dd/yyyy, so the dash sits in the middle whether the
   field is empty or full. */
.dirA .crx-range-input {
  width: 84px;
  flex: 0 0 auto;
  min-width: 0;
  height: 100%;
  border: 0; outline: none; background: transparent;
  padding: 0 0 0 var(--sp-8);
  font-family: var(--font); font-size: var(--text-label);
  color: var(--A-fg);
  font-variant-numeric: tabular-nums;
}
.dirA .crx-range-input::placeholder { color: var(--A-fg-4); }
.dirA .crx-range-input:disabled { color: var(--A-fg-3); }

/* The date box carries its own border, so the lock is drawn on the box, not the input. */
.dirA .crx-date-box:has(.crx-date-input:disabled) {
  background: var(--A-surface-2);
  border-color: var(--A-rule-strong);
}

.dirA .crx-range-sep {
  flex: none;
  padding: 0 var(--sp-2);
  color: var(--A-fg-4);
  font-size: var(--text-label);
}

.dirA .crx-range-box .crx-date-clear { opacity: 0; transition: opacity 0.12s var(--ease-out); }
.dirA .crx-range-box:hover .crx-date-clear,
.dirA .crx-range-box:focus-within .crx-date-clear { opacity: 1; }

/* The popover: presets down one side, one or two months beside them.

   width:auto is the point of this rule — .crx-cal is a fixed 236px box built for one month,
   and two months plus the presets ran straight out of that background. */
.crx-rangecal {
  display: flex;
  gap: var(--sp-12);
  padding: var(--sp-10) var(--sp-12);
  width: auto;
  max-width: calc(100vw - 16px);
}

.crx-rangecal-presets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-right: var(--sp-12);
  border-right: 1px solid var(--A-rule-2);
  min-width: 118px;
}

.crx-rangecal-preset {
  text-align: left;
  border: 0;
  border-radius: var(--A-radius);
  background: transparent;
  padding: var(--sp-6) var(--sp-8);
  font-family: var(--font); font-size: var(--text-meta);
  color: var(--A-fg-2);
  cursor: pointer;
  white-space: nowrap;
}
.crx-rangecal-preset:hover { background: var(--A-tint); color: var(--A-accent); }

.crx-rangecal-body { display: block; }

.crx-rangecal-title {
  flex: 1;
  text-align: center;
  font-family: var(--font); font-size: var(--text-label); font-weight: 600;
  color: var(--A-fg);
}

.crx-rangecal-months { display: flex; gap: var(--sp-16); }
.crx-rangecal-months .crx-cal-grid { width: 210px; }

.crx-rangecal-hint { font-size: var(--text-meta); color: var(--A-fg-3); align-self: center; }

/* A span, not a set of days: the ends are filled and everything between them is tinted,
   with the tint running edge to edge so the week reads as continuous. */
.crx-cal-d.is-between {
  background: var(--A-tint);
  color: var(--A-accent);
  border-radius: 0;
}
.crx-cal-d.is-start:not(.is-end) { border-radius: 999px 0 0 999px; }
.crx-cal-d.is-end:not(.is-start) { border-radius: 0 999px 999px 0; }

/* No cell gap in this calendar: the 1px the single picker leaves between days would break
   the tint into dashes across a week. */
.crx-rangecal-months .crx-cal-grid { gap: 0; }

@media (max-width: 660px) {
  .crx-rangecal { flex-direction: column; gap: var(--sp-8); }
  .crx-rangecal-presets {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--A-rule-2);
    padding: 0 0 var(--sp-8);
    min-width: 0;
  }
}