/* =============================================================================
   InspireWebApp EHR2 — Global Shell (Topbar + Sidebar)
   Spec: /EHR_UI_REDESIGN.md Section 4a
   This is the NEW page shell, applied page-by-page via layouts/ehr2LayoutMaster.
   Pulls brand tokens from css/ehr2.css — load that file first.
   ============================================================================= */

html, body { background: var(--color-bg, #F6F8F7); }

/* =============================================================================
   TOPBAR
   ============================================================================= */
.ehr2-topbar {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1030;
}
/* .ehr-bs5 prefix required on anything rendered as <a> — see the BUTTONS
   block comment in ehr2.css for why a bare single class loses to the
   genuine Bootstrap bundle's `.ehr-bs5 a{}` link-color/underline rule. */
.ehr-bs5 .ehr2-topbar-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; }
.ehr2-topbar-logo img { height: 32px; width: auto; }
.ehr2-topbar-brand { font-size: 1.05rem; font-weight: 600; color: var(--color-text); letter-spacing: .2px; }
.ehr2-topbar-brand strong { color: var(--color-primary); font-weight: 800; }
.ehr2-topbar-spacer { flex: 1; }

/* Global quick-search (always searches patients — the central EHR entity) */
.ehr2-topbar-search {
  flex: 1 1 360px; max-width: 480px; position: relative;
  display: flex; align-items: center;
}
.ehr2-topbar-search i {
  position: absolute; left: 14px; color: var(--color-text-muted); font-size: .9rem; pointer-events: none;
}
.ehr2-topbar-search input {
  width: 100%; padding: 9px 14px 9px 38px; border-radius: var(--ehr2-radius-sm, 8px);
  border: 1px solid var(--color-border); background: var(--color-surface-alt);
  font-size: .85rem; color: var(--color-text); transition: all .15s ease;
}
.ehr2-topbar-search input:focus {
  outline: none; background: var(--color-surface); border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.ehr-bs5 .ehr2-topbar-filters {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 9px 14px; border-radius: var(--ehr2-radius-sm, 8px);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-size: .84rem; font-weight: 600; text-decoration: none;
  transition: all .15s ease;
}
.ehr-bs5 .ehr2-topbar-filters:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }

.ehr-bs5 .ehr2-topbar-icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: 1.05rem; text-decoration: none;
  flex-shrink: 0; transition: background-color .15s ease, color .15s ease;
}
.ehr-bs5 .ehr2-topbar-icon-btn:hover { background: var(--color-primary-light); color: var(--color-primary); }
.ehr2-topbar-icon-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 999px; background: var(--color-danger); color: #fff;
  font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-surface);
}

@media (max-width: 991.98px) {
  .ehr2-topbar-search, .ehr2-topbar-filters { display: none; }
}

.ehr2-sidebar-toggle {
  width: 38px; height: 38px; border-radius: var(--ehr2-radius-sm, 8px);
  border: 1px solid var(--color-border); background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text); cursor: pointer; flex-shrink: 0;
  transition: background-color .15s ease, border-color .15s ease;
}
.ehr2-sidebar-toggle:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }

.ehr2-topbar-user {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 4px 8px 4px 4px; border-radius: 999px; border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.ehr2-topbar-user:hover { background: var(--color-primary-light); }
.ehr2-topbar-user img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--color-border);
}
.ehr2-topbar-user-name { font-size: .84rem; font-weight: 600; color: var(--color-text); line-height: 1.2; }
.ehr2-topbar-user-role { font-size: .72rem; color: var(--color-text-muted); line-height: 1.2; }

.ehr2-impersonation-bar {
  background: var(--color-warning-bg);
  border-bottom: 1px solid #f0d8a3;
  border-left: 4px solid var(--color-warning);
  color: #6b4a06;
  padding: 10px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: .84rem; font-weight: 500;
}
.ehr2-impersonation-bar .ehr2-imp-spacer { flex: 1; }

/* =============================================================================
   SIDEBAR
   ============================================================================= */
.ehr2-shell {
  display: flex;
  min-height: calc(100vh - 60px);
}
.ehr2-shell-sidebar {
  width: 252px;
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  transition: width .18s ease;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
}
.ehr2-shell.is-collapsed .ehr2-shell-sidebar { width: 64px; }
.ehr2-shell.is-collapsed .ehr2-nav-label,
.ehr2-shell.is-collapsed .ehr2-nav-text,
.ehr2-shell.is-collapsed .ehr2-nav-chevron,
.ehr2-shell.is-collapsed .ehr2-nav-badge,
.ehr2-shell.is-collapsed .ehr2-sidebar-org,
.ehr2-shell.is-collapsed .ehr2-sidebar-cta span,
.ehr2-shell.is-collapsed .ehr2-sidebar-search { display: none; }
.ehr2-shell.is-collapsed .ehr2-nav-group > .ehr2-nav-children { display: none !important; }

.ehr2-shell-content { flex: 1; min-width: 0; padding: 20px 24px; }

/* Org name + plan/tier pill below the logo — Section 4a: a small, quiet pill
   inline next to the org name, not a full-width colored panel. */
.ehr2-sidebar-org {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 14px 10px;
}
.ehr2-sidebar-org-name {
  font-size: .82rem; font-weight: 600; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ehr2-badge-plan {
  flex-shrink: 0; font-size: .65rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--color-info-bg); color: var(--color-info);
}

.ehr2-sidebar-cta {
  margin: 0 14px 14px;
}
.ehr-bs5 .ehr2-sidebar-cta a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--color-primary); color: #fff; font-weight: 600; font-size: .85rem;
  border-radius: var(--ehr2-radius-sm, 8px); padding: 10px 14px; text-decoration: none;
  transition: background-color .15s ease;
}
.ehr-bs5 .ehr2-sidebar-cta a:hover { background: var(--color-primary-hover); color: #fff; }

.ehr2-sidebar-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 14px 4px;
}
.ehr2-sidebar-search > .bi-search {
  position: absolute;
  left: 12px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.ehr2-sidebar-search-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 36px 8px 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--ehr2-radius-sm, 8px);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: .82rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ehr2-sidebar-search-input::placeholder { color: var(--color-text-muted); }
.ehr2-sidebar-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 107, 75, .12);
}
.ehr2-sidebar-search-clear {
  position: absolute;
  right: 5px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.ehr2-sidebar-search-clear:hover { background: var(--color-surface-alt); color: var(--color-text); }
.ehr2-sidebar-search-empty {
  margin: 16px 14px;
  padding: 16px 10px;
  color: var(--color-text-muted);
  text-align: center;
  font-size: .8rem;
}
.ehr2-sidebar-search-empty i { display: block; margin-bottom: 6px; font-size: 1.1rem; }
.ehr2-nav-group.is-search-open > .ehr2-nav-children { display: block; }

.ehr2-nav-label {
  font-size: .68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--color-text-muted); padding: 14px 16px 6px;
}

.ehr-bs5 .ehr2-nav-item, .ehr-bs5 .ehr2-nav-group-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; min-height: 44px;
  color: var(--color-text); text-decoration: none; cursor: pointer;
  font-size: .845rem; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.ehr2-nav-item i, .ehr2-nav-group-toggle i.ehr2-nav-icon {
  font-size: 1rem; width: 18px; text-align: center; color: var(--color-text-muted);
  flex-shrink: 0;
}
.ehr-bs5 .ehr2-nav-item:hover, .ehr-bs5 .ehr2-nav-group-toggle:hover {
  background: var(--color-primary-light); color: var(--color-primary); text-decoration: none;
}
.ehr2-nav-item:hover i, .ehr2-nav-group-toggle:hover i.ehr2-nav-icon { color: var(--color-primary); }
.ehr-bs5 .ehr2-nav-item.active {
  background: var(--color-primary-light); color: var(--color-primary);
  border-left-color: var(--color-primary); font-weight: 600;
}
.ehr2-nav-item.active i { color: var(--color-primary); }

.ehr2-nav-chevron { margin-left: auto; transition: transform .15s ease; color: var(--color-text-muted); flex-shrink: 0; }
.ehr2-nav-group.is-open > .ehr2-nav-group-toggle .ehr2-nav-chevron { transform: rotate(90deg); }
.ehr-bs5 .ehr2-nav-group.is-open > .ehr2-nav-group-toggle { color: var(--color-primary); }
.ehr2-nav-group.is-open > .ehr2-nav-group-toggle i.ehr2-nav-icon { color: var(--color-primary); }

.ehr2-nav-children { display: none; padding-left: 12px; }
.ehr2-nav-group.is-open > .ehr2-nav-children { display: block; }
.ehr2-nav-children .ehr2-nav-item { padding-left: 34px; font-size: .8rem; min-height: 40px; }

.ehr2-nav-badge {
  margin-left: auto; font-size: .68rem; font-weight: 700;
  padding: 1px 8px; border-radius: 999px; flex-shrink: 0;
  background: var(--color-surface-alt); color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.ehr2-nav-badge.is-warning { background: var(--color-warning-bg); color: #92580a; border-color: #f0d8a3; }
.ehr2-nav-badge.is-danger  { background: var(--color-danger-bg);  color: var(--color-danger); border-color: #f3c4c4; }
.ehr2-nav-item.active .ehr2-nav-badge { background: var(--color-surface); }

/* =============================================================================
   RESPONSIVE — sidebar becomes an off-canvas drawer below lg (Section 1a/4a)
   ============================================================================= */
@media (max-width: 991.98px) {
  .ehr2-shell-sidebar {
    position: fixed; top: 60px; left: -280px; height: calc(100vh - 60px);
    width: 280px; z-index: 1040; box-shadow: var(--ehr2-shadow-md, 0 4px 24px rgba(0,0,0,.14));
    transition: left .2s ease;
  }
  .ehr2-shell.is-mobile-open .ehr2-shell-sidebar { left: 0; }
  .ehr2-shell.is-collapsed .ehr2-shell-sidebar { width: 280px; }
  .ehr2-shell.is-collapsed .ehr2-nav-label,
  .ehr2-shell.is-collapsed .ehr2-nav-text,
  .ehr2-shell.is-collapsed .ehr2-nav-chevron,
  .ehr2-shell.is-collapsed .ehr2-nav-badge,
  .ehr2-shell.is-collapsed .ehr2-sidebar-cta span { display: inline; }
  .ehr2-shell.is-collapsed .ehr2-sidebar-org { display: flex; }
  .ehr2-shell.is-collapsed .ehr2-sidebar-search { display: flex; }
  .ehr2-shell.is-collapsed .ehr2-nav-group.is-open > .ehr2-nav-children { display: block !important; }

  .ehr2-shell-backdrop {
    display: none; position: fixed; inset: 60px 0 0 0; background: rgba(0,0,0,.4); z-index: 1035;
  }
  .ehr2-shell.is-mobile-open .ehr2-shell-backdrop { display: block; }
  .ehr2-shell-content { padding: 16px; }
  .ehr2-topbar-user-name, .ehr2-topbar-user-role { display: none; }
}

@media (min-width: 992px) {
  .ehr2-shell-backdrop { display: none !important; }
}