/* Helix Med v3 — Core UI Primitives (tokens: packages/design-tokens → static/helix-design-tokens.css) */
@import url("./helix-design-tokens.css");

/* Base */
html, body { height: 100%; }
body{
  margin: 0;
  font-family: var(--hlx-font-sans);
  font-size: var(--hlx-text-base);
  line-height: var(--hlx-leading);
  font-feature-settings: var(--hlx-font-feature);
  background: var(--hlx-canvas, var(--hlx-bg));
  background-attachment: fixed;
  color: var(--hlx-text);
}
*{ box-sizing: border-box; }

a{ color: var(--hlx-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

.hlx-skip{
  position: absolute;
  left: -9999px;
  top: var(--hlx-3);
  z-index: 9999;
  padding: var(--hlx-2) var(--hlx-3);
  border-radius: var(--hlx-r-sm);
  border: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
  box-shadow: var(--hlx-shadow-sm);
}
.hlx-skip:focus{ left: var(--hlx-3); }

/* App shell */
.hlx-app{
  display: grid;
  grid-template-columns: var(--hlx-sidebar-w) 1fr var(--hlx-rightpanel-w);
  grid-template-rows: var(--hlx-header-h) 1fr;
  min-height: 100vh;
}
.hlx-app[data-sidebar="collapsed"]{
  grid-template-columns: var(--hlx-sidebar-w-collapsed) 1fr var(--hlx-rightpanel-w);
}
.hlx-header{
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--hlx-header-h);
  display: flex;
  align-items: center;
  gap: var(--hlx-4);
  padding: 0 var(--hlx-6);
  border-bottom: 1px solid var(--hlx-border);
  background: color-mix(in srgb, var(--hlx-surface) 92%, var(--hlx-bg));
  backdrop-filter: blur(10px);
}
.hlx-header__left{ display:flex; align-items:center; gap: var(--hlx-3); min-width: 240px; }
.hlx-header__center{ flex: 1; display:flex; justify-content:center; }
.hlx-header__right{ display:flex; align-items:center; gap: var(--hlx-2); min-width: 240px; justify-content:flex-end; }

.hlx-brand{
  display:flex; align-items:center; gap: var(--hlx-2);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hlx-text);
  text-decoration: none;
}
.hlx-brand img{
  display:block;
  width: 36px;
  height: 26px;
  color: var(--hlx-primary);
}
.hlx-brand__mark{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: var(--hlx-surface-2);
  border: 1px solid var(--hlx-border);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--hlx-shadow-sm);
  font-size: 18px;
}
.hlx-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
  color: var(--hlx-text-2);
  font-weight: 650;
  font-size: 12px;
}
.hlx-badge__dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--hlx-text-3);
}
.hlx-badge--info .hlx-badge__dot{ background: var(--hlx-info); }
.hlx-badge--warning .hlx-badge__dot{ background: var(--hlx-warning); }
.hlx-badge--danger .hlx-badge__dot{ background: var(--hlx-danger); }
.hlx-badge--success .hlx-badge__dot{ background: var(--hlx-success); }

.hlx-search{
  width: min(760px, 100%);
  position: relative;
}
.hlx-search input{
  width: 100%;
  padding: 11px 14px 11px 40px;
  border-radius: 999px;
  border: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
  color: var(--hlx-text);
  outline: none;
  box-shadow: var(--hlx-shadow-sm);
}
.hlx-search input:focus{
  border-color: color-mix(in srgb, var(--hlx-primary) 45%, var(--hlx-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hlx-focus) 55%, transparent);
}
.hlx-search__icon{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hlx-text-3);
  font-size: 14px;
}

.hlx-global-search-panel{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  max-height: min(70vh, 440px);
  overflow: auto;
  border-radius: var(--hlx-r-md);
  border: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
  box-shadow: var(--hlx-shadow-md);
}
.hlx-global-search-panel[hidden]{
  display: none !important;
}
.hlx-global-search__row{
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--hlx-border);
  background: transparent;
  cursor: pointer;
  color: var(--hlx-text);
  font: inherit;
}
.hlx-global-search__row:hover{
  background: var(--hlx-surface-2);
}
.hlx-global-search__row:last-child{
  border-bottom: 0;
}
.hlx-global-search__kind{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hlx-text-3);
  margin-bottom: 2px;
}
.hlx-global-search__main{
  font-weight: 650;
}
.hlx-global-search__meta{
  font-size: 12px;
  color: var(--hlx-text-2);
  margin-top: 2px;
}

/* Sidebar */
.hlx-sidebar{
  grid-row: 2;
  position: sticky;
  top: var(--hlx-header-h);
  height: calc(100vh - var(--hlx-header-h));
  overflow: auto;
  border-right: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
}
.hlx-sidebar__inner{ padding: var(--hlx-4); }
.hlx-nav{ display:flex; flex-direction:column; gap: 6px; margin-top: var(--hlx-2); }
.hlx-nav__item{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--hlx-text-2);
  font-weight: 650;
}
.hlx-nav__item:hover{
  background: var(--hlx-surface-2);
  text-decoration: none;
}
.hlx-nav__item[aria-current="page"]{
  background: color-mix(in srgb, var(--hlx-primary) 10%, var(--hlx-surface));
  border-color: color-mix(in srgb, var(--hlx-primary) 20%, var(--hlx-border));
  color: var(--hlx-text);
}
.hlx-nav__icon{
  width: 26px; height: 26px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 10px;
  background: var(--hlx-surface-2);
  border: 1px solid var(--hlx-border);
  color: var(--hlx-text-2);
  flex: 0 0 auto;
}
.hlx-app[data-sidebar="collapsed"] .hlx-nav__label{ display:none; }
.hlx-app[data-sidebar="collapsed"] .hlx-sidebar__inner{ padding: var(--hlx-4) var(--hlx-2); }
.hlx-app[data-sidebar="collapsed"] .hlx-nav__item{ justify-content:center; padding: 10px 6px; }

/* Main */
.hlx-main{
  grid-row: 2;
  padding: var(--hlx-6);
  overflow: auto;
}
.hlx-container{
  max-width: var(--hlx-max-content);
  margin: 0 auto;
}
.hlx-pagehead{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: var(--hlx-6);
  margin-bottom: var(--hlx-4);
}
.hlx-title{
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.hlx-subtitle{ margin: 6px 0 0; color: var(--hlx-text-3); font-weight: 550; }
.hlx-actions{ display:flex; gap: var(--hlx-2); flex-wrap: wrap; justify-content:flex-end; }

.hlx-btn{
  appearance: none;
  border: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
  color: var(--hlx-text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--hlx-shadow-sm);
  transition: transform var(--hlx-fast) var(--hlx-ease), box-shadow var(--hlx-fast) var(--hlx-ease), background var(--hlx-fast) var(--hlx-ease);
}
.hlx-btn:hover{ transform: translateY(-1px); box-shadow: var(--hlx-shadow-md); }
.hlx-btn:active{ transform: translateY(0px); }
.hlx-btn:focus{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hlx-focus) 55%, transparent), var(--hlx-shadow-sm);
}
.hlx-btn--primary{
  border-color: color-mix(in srgb, var(--hlx-primary) 45%, var(--hlx-border));
  background: var(--hlx-primary);
  color: #fff;
}
.hlx-btn--primary:hover{ background: var(--hlx-primary-700); }
.hlx-btn--quiet{
  background: transparent;
  box-shadow: none;
}
.hlx-btn--quiet:hover{
  transform:none;
  background: var(--hlx-surface-2);
  box-shadow:none;
}

/* Shell user dropdown (applications under username) when logged in */
.hlx-shell-dropdown {
  position: relative;
  display: inline-block;
}
.hlx-shell-user-dropdown .hlx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hlx-shell-dropdown .hlx-shell-dropdown__panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 180px;
  padding: 6px;
  border-radius: var(--hlx-r-md);
  border: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
  box-shadow: var(--hlx-shadow-md);
  z-index: 100;
  display: none;
}
.hlx-shell-dropdown.hlx-shell-dropdown--open .hlx-shell-dropdown__panel {
  display: block;
}
.hlx-shell-dropdown__panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--hlx-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}
.hlx-shell-dropdown__panel a:hover {
  background: var(--hlx-surface-2);
}
.hlx-shell-dropdown__sep {
  height: 1px;
  margin: 6px 8px;
  background: var(--hlx-border);
}

.hlx-tabs{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  border: 1px solid var(--hlx-border);
  border-radius: 14px;
  background: var(--hlx-surface);
  box-shadow: var(--hlx-shadow-sm);
  margin: var(--hlx-4) 0 var(--hlx-6);
}
.hlx-tab{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--hlx-text-2);
  font-weight: 750;
  cursor: pointer;
  background: transparent;
}
.hlx-tab:hover{ background: var(--hlx-surface-2); }
.hlx-tab[aria-selected="true"]{
  background: color-mix(in srgb, var(--hlx-primary) 10%, var(--hlx-surface));
  border-color: color-mix(in srgb, var(--hlx-primary) 18%, var(--hlx-border));
  color: var(--hlx-text);
}

.hlx-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--hlx-4);
}
.hlx-col-4{ grid-column: span 4; }
.hlx-col-6{ grid-column: span 6; }
.hlx-col-8{ grid-column: span 8; }
.hlx-col-12{ grid-column: span 12; }
@media (max-width: 1200px){
  .hlx-app{ grid-template-columns: var(--hlx-sidebar-w) 1fr; }
  .hlx-rightpanel{ display:none; }
}
@media (max-width: 900px){
  .hlx-header{ padding: 0 var(--hlx-4); }
  .hlx-main{ padding: var(--hlx-4); }
  .hlx-col-4, .hlx-col-6, .hlx-col-8 { grid-column: span 12; }
}

.hlx-card{
  border: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
  border-radius: var(--hlx-r-md);
  box-shadow: var(--hlx-shadow-sm);
  overflow: hidden;
}
.hlx-card__hd{
  padding: var(--hlx-4) var(--hlx-4) var(--hlx-3);
  border-bottom: 1px solid var(--hlx-border);
  background: color-mix(in srgb, var(--hlx-surface) 85%, var(--hlx-surface-2));
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hlx-3);
}
.hlx-card__title{ margin:0; font-size: 15px; font-weight: 850; letter-spacing:-0.01em; }
.hlx-card__meta{ color: var(--hlx-text-3); font-size: 13px; font-weight: 650; }
.hlx-card__bd{ padding: var(--hlx-4); }

.hlx-kpi{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.hlx-kpi__label{ color: var(--hlx-text-3); font-weight: 700; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
.hlx-kpi__value{ font-size: 26px; font-weight: 900; letter-spacing:-0.02em; }
.hlx-kpi__sub{ color: var(--hlx-text-2); font-weight: 650; font-size: 13px; }

/* Tables */
.hlx-tablewrap{
  border: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
  border-radius: var(--hlx-r-md);
  box-shadow: var(--hlx-shadow-sm);
  overflow: hidden;
}
table.hlx-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}
.hlx-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--hlx-surface) 86%, var(--hlx-surface-2));
  text-align: left;
  font-weight: 850;
  color: var(--hlx-text-2);
  padding: 12px 14px;
  border-bottom: 1px solid var(--hlx-border);
  white-space: nowrap;
}
.hlx-table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--hlx-border) 65%, transparent);
  vertical-align: top;
}
.hlx-table tbody tr:hover td{
  background: color-mix(in srgb, var(--hlx-primary) 6%, var(--hlx-surface));
}

/*
 * App shell (AdminLTE + /app): many views render plain <table> without .hlx-table or Bootstrap .table.
 * Without this, thead/tbody inherit mismatched colors in dark mode (light text on white) or low contrast headers.
 */
#patient-page-content table:not(.hlx-table),
#main-content table:not(.hlx-table),
#panel-patients table:not(.hlx-table){
  width: 100%;
  border-collapse: collapse;
  color: var(--hlx-text) !important;
  font-size: 13px;
}
#patient-page-content table:not(.hlx-table) thead th,
#main-content table:not(.hlx-table) thead th,
#panel-patients table:not(.hlx-table) thead th{
  text-align: left;
  font-weight: 750;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--hlx-surface-2) 70%, var(--hlx-surface)) !important;
  color: var(--hlx-text) !important;
  border-bottom: 1px solid var(--hlx-border);
}
#patient-page-content table:not(.hlx-table) tbody td,
#main-content table:not(.hlx-table) tbody td,
#panel-patients table:not(.hlx-table) tbody td{
  padding: 10px 12px;
  color: var(--hlx-text) !important;
  background: var(--hlx-surface) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--hlx-border) 65%, transparent);
  vertical-align: middle;
}
#patient-page-content table:not(.hlx-table) tbody tr:hover td,
#main-content table:not(.hlx-table) tbody tr:hover td,
#panel-patients table:not(.hlx-table) tbody tr:hover td{
  background: color-mix(in srgb, var(--hlx-primary) 6%, var(--hlx-surface)) !important;
}

/* Inline-styled lab status chips in patient Lab Results (override light-theme grays in dark mode) */
html[data-theme="dark"] span.lab-status-badge,
html.daynight.carbon span.lab-status-badge{
  background: color-mix(in srgb, var(--hlx-surface-2) 88%, var(--hlx-border)) !important;
  color: var(--hlx-text) !important;
  border: 1px solid var(--hlx-border) !important;
}

/*
 * Lab Details / viewReport / edit report — replaces hardcoded white + #f8f9fa in templates.
 */
.hlx-lab-report-panel{
  background: var(--hlx-surface) !important;
  color: var(--hlx-text) !important;
  padding: var(--hlx-5);
  border-radius: var(--hlx-r-md);
  border: 1px solid var(--hlx-border);
  box-shadow: var(--hlx-shadow-sm);
  overflow-x: auto;
}
.hlx-lab-report-panel h1,
.hlx-lab-report-panel h2,
.hlx-lab-report-panel h3,
.hlx-lab-report-panel h4{
  color: var(--hlx-text) !important;
}
.hlx-lab-report-panel h3:first-child{ margin-top: 0; }
.hlx-lab-report-panel p,
.hlx-lab-report-panel li{ color: var(--hlx-text); }
.hlx-lab-report-meta{
  background: var(--hlx-surface-2) !important;
  color: var(--hlx-text) !important;
  padding: var(--hlx-4);
  border-radius: var(--hlx-r-sm);
  margin-bottom: var(--hlx-5);
  border: 1px solid var(--hlx-border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 18px;
  align-items: start;
}
.hlx-lab-report-meta p{
  margin: 0;
}
.hlx-lab-report-meta-source{
  grid-column: span 2;
  overflow-wrap: anywhere;
}
.hlx-lab-report-meta-actions{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--hlx-1) !important;
}
@media (max-width: 700px){
  .hlx-lab-report-meta-source{
    grid-column: 1 / -1;
  }
}
.hlx-lab-report-panel table.results-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--hlx-3);
  color: var(--hlx-text) !important;
}
.hlx-lab-report-panel table.results-table thead th{
  background: color-mix(in srgb, var(--hlx-surface-2) 75%, var(--hlx-border)) !important;
  color: var(--hlx-text) !important;
  font-weight: 750;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hlx-border);
  font-size: 12px;
  text-align: left;
}
.hlx-lab-report-panel table.results-table tbody td{
  background: var(--hlx-surface) !important;
  color: var(--hlx-text) !important;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--hlx-border) 65%, transparent);
  font-size: 13px;
  vertical-align: top;
}
.hlx-lab-report-panel table.results-table tbody tr:hover td{
  background: color-mix(in srgb, var(--hlx-primary) 7%, var(--hlx-surface)) !important;
}
.hlx-lab-report-panel .notes-content{
  background: var(--hlx-surface-2) !important;
  color: var(--hlx-text) !important;
  border: 1px solid var(--hlx-border);
}
.hlx-lab-report-panel .notes-short{
  color: var(--hlx-text-2) !important;
}
.hlx-lab-report-panel input[type="text"],
.hlx-lab-report-panel input[type="date"],
.hlx-lab-report-panel input[type="number"],
.hlx-lab-report-panel textarea,
.hlx-lab-report-panel select{
  background: var(--hlx-surface) !important;
  color: var(--hlx-text) !important;
  border: 1px solid var(--hlx-border) !important;
  border-radius: 8px;
}

.hlx-num{ text-align: right; font-variant-numeric: tabular-nums; }
.hlx-mono{ font-family: var(--hlx-font-mono); font-variant-numeric: tabular-nums; }

/* Status badges */
.hlx-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid var(--hlx-border);
  background: var(--hlx-surface-2);
  color: var(--hlx-text-2);
}
.hlx-pill__dot{ width: 8px; height: 8px; border-radius: 999px; background: var(--hlx-text-3); }
.hlx-pill--danger{ background: var(--hlx-tint-danger); border-color: color-mix(in srgb, var(--hlx-danger) 26%, var(--hlx-border)); color: var(--hlx-danger); }
.hlx-pill--warning{ background: var(--hlx-tint-warning); border-color: color-mix(in srgb, var(--hlx-warning) 26%, var(--hlx-border)); color: var(--hlx-warning); }
.hlx-pill--success{ background: var(--hlx-tint-success); border-color: color-mix(in srgb, var(--hlx-success) 24%, var(--hlx-border)); color: var(--hlx-success); }
.hlx-pill--info{ background: var(--hlx-tint-info); border-color: color-mix(in srgb, var(--hlx-info) 24%, var(--hlx-border)); color: var(--hlx-info); }
.hlx-pill--danger .hlx-pill__dot{ background: var(--hlx-danger); }
.hlx-pill--warning .hlx-pill__dot{ background: var(--hlx-warning); }
.hlx-pill--success .hlx-pill__dot{ background: var(--hlx-success); }
.hlx-pill--info .hlx-pill__dot{ background: var(--hlx-info); }

/* Toolbars + form controls */
.hlx-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--hlx-3);
  flex-wrap: wrap;
  margin: var(--hlx-4) 0 var(--hlx-4);
}
.hlx-filters{
  display:flex;
  align-items:center;
  gap: var(--hlx-2);
  flex-wrap: wrap;
}
.hlx-field{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.hlx-label{
  font-size: 12px;
  font-weight: 800;
  color: var(--hlx-text-3);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hlx-input,
.hlx-select,
.hlx-textarea{
  appearance: none;
  border: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
  color: var(--hlx-text);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 40px;
  box-shadow: var(--hlx-shadow-sm);
  outline: none;
}
.hlx-select{ padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--hlx-text-3) 50%), linear-gradient(135deg, var(--hlx-text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.hlx-textarea{ min-height: 90px; resize: vertical; }
.hlx-input:focus,
.hlx-select:focus,
.hlx-textarea:focus{
  border-color: color-mix(in srgb, var(--hlx-primary) 45%, var(--hlx-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hlx-focus) 55%, transparent), var(--hlx-shadow-sm);
}
.hlx-input[aria-invalid="true"],
.hlx-select[aria-invalid="true"],
.hlx-textarea[aria-invalid="true"]{
  border-color: color-mix(in srgb, var(--hlx-danger) 55%, var(--hlx-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hlx-danger) 18%, transparent), var(--hlx-shadow-sm);
}
.hlx-error-text{
  margin-top: 6px;
  color: var(--hlx-danger);
  font-weight: 750;
  font-size: 13px;
}
.hlx-help-text{
  margin-top: 6px;
  color: var(--hlx-text-3);
  font-weight: 650;
  font-size: 13px;
}
.hlx-hstack{ display:flex; align-items:center; gap: var(--hlx-2); flex-wrap: wrap; }
.hlx-muted{ color: var(--hlx-text-3); font-weight: 650; }
.hlx-banner{
  border: 1px solid var(--hlx-border);
  background: color-mix(in srgb, var(--hlx-surface) 82%, var(--hlx-surface-2));
  border-radius: var(--hlx-r-md);
  padding: var(--hlx-3) var(--hlx-4);
  box-shadow: var(--hlx-shadow-sm);
}

/* Simple modal */
.hlx-modal{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: var(--hlx-6);
  z-index: 999;
}
.hlx-modal[data-open="true"]{ display:flex; }
.hlx-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(2, 6, 23, 0.55);
}
.hlx-modal__panel{
  position: relative;
  width: min(900px, 100%);
  max-height: min(85vh, 900px);
  overflow:auto;
  border-radius: var(--hlx-r-lg);
  border: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
  box-shadow: var(--hlx-shadow-md);
}
.hlx-modal__hd{
  position: sticky;
  top: 0;
  z-index: 2;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: var(--hlx-3);
  padding: var(--hlx-4);
  border-bottom: 1px solid var(--hlx-border);
  background: color-mix(in srgb, var(--hlx-surface) 92%, var(--hlx-bg));
}
.hlx-modal__title{ margin:0; font-size: 16px; font-weight: 900; letter-spacing:-0.01em; }
.hlx-modal__bd{ padding: var(--hlx-4); }

/* Drawer (right-side detail panel) */
.hlx-drawer{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 1000;
}
.hlx-drawer[data-open="true"]{ display:block; }
.hlx-drawer__backdrop{
  position:absolute;
  inset:0;
  background: rgba(2, 6, 23, 0.55);
}
.hlx-drawer__panel{
  position:absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(720px, 96vw);
  background: var(--hlx-surface);
  border-left: 1px solid var(--hlx-border);
  box-shadow: var(--hlx-shadow-md);
  display:flex;
  flex-direction: column;
  transform: translateX(12px);
  opacity: 0;
  transition: transform var(--hlx-normal) var(--hlx-ease), opacity var(--hlx-normal) var(--hlx-ease);
}
.hlx-drawer[data-open="true"] .hlx-drawer__panel{
  transform: translateX(0);
  opacity: 1;
}
.hlx-drawer__hd{
  position: sticky;
  top: 0;
  z-index: 2;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: var(--hlx-3);
  padding: var(--hlx-4);
  border-bottom: 1px solid var(--hlx-border);
  background: color-mix(in srgb, var(--hlx-surface) 92%, var(--hlx-bg));
}
.hlx-drawer__title{ margin:0; font-size: 16px; font-weight: 950; letter-spacing:-0.01em; }
.hlx-drawer__sub{ color: var(--hlx-text-3); font-weight: 650; margin-top: 4px; }
.hlx-drawer__bd{
  padding: var(--hlx-4);
  overflow: auto;
  flex: 1 1 auto;
}
.hlx-drawer__ft{
  padding: var(--hlx-4);
  border-top: 1px solid var(--hlx-border);
  background: color-mix(in srgb, var(--hlx-surface) 92%, var(--hlx-bg));
}

/* "Cover" variant — a large centered pop-up covering most of the screen,
   used for record editors (e.g. adding/editing an employee). */
.hlx-drawer--cover .hlx-drawer__panel{
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, calc(-50% + 12px));
  width: min(1100px, 94vw);
  height: min(92vh, 1000px);
  border: 1px solid var(--hlx-border);
  border-radius: var(--hlx-r-lg, 14px);
  border-left: 1px solid var(--hlx-border);
}
.hlx-drawer--cover[data-open="true"] .hlx-drawer__panel{
  transform: translate(-50%, -50%);
}

/* Inline user-search results (employee → Helix Med user picker) */
.hlx-user-results{
  border: 1px solid var(--hlx-border);
  border-radius: var(--hlx-r-md, 8px);
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--hlx-surface);
  box-shadow: var(--hlx-shadow-sm);
}
.hlx-user-results__item{
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--hlx-border);
  font-size: 13px;
}
.hlx-user-results__item:last-child{ border-bottom: 0; }
.hlx-user-results__item:hover{ background: var(--hlx-surface-2); }


/* Toasts */
.hlx-toasts{
  position: fixed;
  right: var(--hlx-4);
  bottom: var(--hlx-4);
  z-index: 1100;
  display:flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 2*var(--hlx-4)));
}
.hlx-toast{
  border: 1px solid var(--hlx-border);
  background: color-mix(in srgb, var(--hlx-surface) 92%, var(--hlx-bg));
  border-radius: var(--hlx-r-md);
  box-shadow: var(--hlx-shadow-md);
  padding: 12px 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.hlx-toast__dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--hlx-text-3);
  margin-top: 4px;
  flex: 0 0 auto;
}
.hlx-toast--success .hlx-toast__dot{ background: var(--hlx-success); }
.hlx-toast--info .hlx-toast__dot{ background: var(--hlx-info); }
.hlx-toast--warning .hlx-toast__dot{ background: var(--hlx-warning); }
.hlx-toast--danger .hlx-toast__dot{ background: var(--hlx-danger); }
.hlx-toast__content{ flex: 1; }
.hlx-toast__title{ font-weight: 900; margin: 0 0 4px 0; }
.hlx-toast__msg{ margin: 0; color: var(--hlx-text-2); font-weight: 650; }
.hlx-toast__x{
  appearance:none;
  border: 1px solid var(--hlx-border);
  background: transparent;
  color: var(--hlx-text-2);
  border-radius: 10px;
  padding: 6px 8px;
  cursor:pointer;
}
.hlx-toast__x:hover{ background: var(--hlx-surface-2); }

/* Right panel */
.hlx-rightpanel{
  grid-row: 2;
  position: sticky;
  top: var(--hlx-header-h);
  height: calc(100vh - var(--hlx-header-h));
  overflow: auto;
  border-left: 1px solid var(--hlx-border);
  background: var(--hlx-surface);
}
.hlx-rightpanel__inner{ padding: var(--hlx-4); display:flex; flex-direction:column; gap: var(--hlx-4); }

/* Density */
html[data-density="compact"]{
  --hlx-text-base: 14px;
}
html[data-density="compact"] .hlx-card__bd{ padding: var(--hlx-3); }
html[data-density="compact"] .hlx-table thead th,
html[data-density="compact"] .hlx-table tbody td{ padding: 10px 12px; }