/* Isolated CSS for Network Hospital page */
:root { --nh-primary: #064a8f; --nh-accent: #2e7dff; --nh-dark: #222; --nh-muted: #666; --nh-bg: #f7f7f9; --nh-white:#fff; --nh-border:#e5e7eb; --nh-chip-outline:#d9eaf3; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: 'Open Sans', 'Poppins', sans-serif; background: var(--nh-bg); color: var(--nh-dark); display:flex; flex-direction:column; overflow:hidden; }

/* Under shared layout: make main area stretch to full viewport height below header */
body > .container-fluid { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
body > .container-fluid > main { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }

/* Top white header */
.nh-topbar { background: var(--nh-white); border-bottom:1px solid var(--nh-border); }
.nh-topbar-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 8px; }
.nh-rgi-logo{ height:28px; }
.nh-rcap{ height:10px; }

/* Blue navbar */
.nh-navbar{ background:#0b5193; color:#fff; }
.nh-navbar-inner{ max-width:1200px; margin:0 auto; padding:6px 8px; }
.nh-nav{ list-style:none; display:flex; gap:18px; margin:0; padding:0; font-size:13px; }
.nh-nav li{ cursor:default; }

.nh-container { display:flex; flex:1 1 auto; min-height:0; }
.nh-left { flex: 1 1 auto; padding:12px; display:flex; min-height:0; }
.nh-right { width: 420px; background:#fff; border-left:1px solid #eee; padding:12px; overflow-y:auto; overflow-x:hidden; min-height:0; }
.nh-blue-panel{ background:#0b5193; border-radius:0; margin:-12px -12px 12px -12px; padding:14px 12px; color:#fff; border-bottom:1px solid rgba(255,255,255,0.25); }
.nh-inputs-blue .nh-input{ border-color:transparent; background:#ffffff; }
.nh-inputs-blue .nh-input::placeholder{ color:#7c8da6; }
.nh-input-pill{ border-radius:28px; }
.nh-input-with-icon{ position:relative; }
.nh-input-with-icon .nh-input{ padding-right:44px; }
.nh-input-icon-btn{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; border:1px solid #0b5193; background:#ffffff; color:#0b5193; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1; }
.nh-input-icon-btn i{ font-size:14px; line-height:1; }
.nh-input-icon-btn:hover{ background:#eef5fb; }
.nh-location-line{ margin-top:10px; font-size:13px; line-height:1.35; background:#084579; padding:12px; border-radius:6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.nh-location-line .addr{ font-weight:700; color:#fff; }
.panel-position{ position:relative; }
.white-bg{ background:#fff; }
.overflowAuto{ overflow:auto; }
.overflowXhidden{ overflow-x:hidden; }
#listView{ margin:0; }

/* Suggestions dropdown (Hospital Name) */
.nh-suggest { color:#2f3b4b; }
.nh-suggest-item { color:#2f3b4b; font-size:14px; }
.nh-suggest-item:hover { background:#f5f8fc; }

.nh-map { width:100%; flex:1 1 auto; height:100%; min-height:0; border-radius:8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); background:#eaeaea; }

/* Right inputs and actions */
.nh-inputs{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.nh-input-wrap{ position:relative; }
.nh-input{ width:100%; padding:12px 14px; border:1px solid #cbd5e1; border-radius:12px; font-size:14px; }
.nh-input:focus{ outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,0.35); }
.nh-input-sm{ padding:8px 10px; border-radius:10px; font-size:12px; }
.nh-inputs-compact{ margin-top:6px; margin-bottom:6px; }
.nh-input-with-addon{ display:flex; }
.nh-input-with-addon .nh-input{ border-top-right-radius:40px; border-bottom-right-radius:40px; }
.nh-addon{ margin-left:8px; width:42px; height:42px; border-radius:50%; border:0; background:#0b5193; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nh-addon i{ font-size:16px; }
.nh-addon:hover{ background:#0a4585; }
.nh-quick-actions{ display:flex; gap:8px; margin:10px 0 10px; flex-wrap:nowrap; }
.nh-quick-actions .nh-btn{ white-space:nowrap; font-size:11px; padding:6px 10px; border-radius:16px; }
.nh-btn{ display:inline-block; padding:10px 18px; border-radius:22px; font-size:12px; text-decoration:none; border:1px solid transparent; font-weight:700; letter-spacing:.2px; }
.nh-btn-primary{ background:#0b5193; color:#fff; border-color:#0b5193; box-shadow:0 2px 6px rgba(11,81,147,0.25); }

.nh-section-title { font-size:14px; letter-spacing:.3px; color: #2f3b4b; margin: 12px 2px 10px; font-weight:700; text-transform:uppercase; }
.nh-divider { height:2px; background: var(--nh-primary); opacity:0.6; margin: 6px 0 10px; }
.nh-section + .nh-section{ border-top:1px solid #d9eaf3; padding-top:12px; margin-top:12px; }
.with-caret{ display:flex; align-items:center; justify-content:space-between; }
.nh-chips { display:flex; gap:12px; flex-wrap:wrap; }
.nh-chip { background:#fff; color:#2f3b4b; border-radius:24px; padding:8px 12px; border:1px solid #e2e8f0; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; line-height:1; }
.nh-chip-bubble{ box-shadow:0 4px 10px rgba(0,0,0,0.08); }
.nh-chips-pills .nh-chip{ border-radius:28px; padding:8px 16px; background:#fff; border:2px solid var(--nh-chip-outline); }
.nh-badge{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }
.nh-badge-purple{ background:#b482f0; }
.nh-badge-orange{ background:#f3a348; }
.nh-badge-heart{ background:#eaf6ff; color:#e74d58; width:28px; height:28px; border:2px solid #d9eaf3; }
.nh-badge-heart i{ color:#e74d58; }
.nh-chip-label{ font-weight:700; letter-spacing:.2px; }
.nh-chip-dept{ border:2px solid var(--nh-chip-outline); border-radius:28px; padding:10px 16px; }
.nh-chip-dept .nh-chip-text{ font-weight:700; color:#2f3b4b; }
.nh-chip-dept .nh-chip-text, .nh-chip-label{ text-transform:uppercase; }
.nh-chip .nh-badge{ margin-right:6px; }
.nh-chip-opd{ border-color:#d9e3f0; }
.nh-chip-ipd{ border-color:#d9e3f0; }
.nh-chip-both{ border-color:#d9e3f0; }
.nh-chip-outline{ background:#fff; border:1px solid #e2e8f0; }
.nh-chip-ghost{ background:#fff; border:1px dashed #cbd5e1; color:#445; }

/* InfoWindow action spacing */
.map-info-actions { margin-top: 10px; margin-bottom: 6px; }
.map-info-actions .btn {
  display: inline-block;
  width: auto;
  min-width: 120px;
  padding-left: 10px;
  padding-right: 10px;
}

.nh-list { display:flex; flex-direction:column; gap:8px; }
.nh-card { display:flex; gap:10px; padding:10px; border:1px solid #eee; border-radius:8px; cursor:pointer; transition: box-shadow .2s ease; }
.nh-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.06); }
.nh-card-active { border-color: var(--nh-accent); box-shadow:0 6px 20px rgba(46,125,255,0.15); }
.nh-card-icon img { width:36px; height:36px; }
.nh-card-title { font-size:14px; font-weight:600; color:#222; }
.nh-card-text { font-size:12px; color:#555; }

.nh-empty { color:#999; font-size:13px; text-align:center; padding:24px; }

/* Mobile Header */
.nh-mobile-header {
    display: none;
    background: #064a8f;
    color: white;
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nh-hamburger {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    padding: 8px;
    cursor: pointer;
}

.nh-phone-number {
    text-align: right;
    font-size: 16px;
    font-weight: 600;
}

.nh-phone-number small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.8;
}

/* Mobile Search with Filter Layout */
.nh-search-with-filter {
    display: flex;
    gap: 8px;
    align-items: center;
}

.nh-search-with-filter .nh-input-wrap {
    flex: 1;
}

/* Mobile Filter Button */
.nh-mobile-filter-btn {
    display: none;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: #064a8f;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.nh-mobile-filter-btn:hover {
    background: white;
    transform: scale(1.05);
}

/* Mobile Filters Content */
.nh-mobile-filters-content {
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: white;
    border-bottom: 1px solid #eee;
}

.nh-mobile-filters-content.show {
    display: block;
}

/* Desktop (large screens) should ALWAYS show the filters block without needing the mobile toggle.
   We only hide it on narrow viewports via the mobile @media rule below. */
@media (min-width: 993px){
  .nh-mobile-filters-content{ display:block !important; max-height:none; overflow:visible; border-bottom:none; }
}

@media (max-width: 992px){
  /* Mobile Layout Structure */
  body > .container-fluid {
    padding: 0;
  }

  .nh-container{ 
    flex-direction: column; 
    height: 100vh;
    position: relative;
  }
  
  .nh-left{ 
    order: 2;
    flex: 1;
    padding: 0;
    min-height: 0;
    position: relative;
    z-index: 1;
  }
  
  .nh-right{ 
    order: 1;
    width: 100%; 
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
    border-left: none;
    padding: 0;
    background: transparent;
    position: relative;
    z-index: 10;
  }

  /* Show mobile header */
  .nh-mobile-header {
    display: flex;
  }

  /* Blue panel adjustments */
  .nh-blue-panel {
    margin: 0;
    border-radius: 0;
    padding: 16px;
    position: relative;
    z-index: 11;
  }

  /* Shrink input vertical size inside blue panel for mobile (approx 50% height reduction) */
  .nh-blue-panel .nh-input { padding:6px 12px; font-size:13px; }
  .nh-blue-panel .nh-input.nh-input-sm { padding:4px 8px; font-size:11px; }
  .nh-blue-panel .nh-input-icon-btn { width:26px; height:26px; }
  .nh-blue-panel .nh-input-with-icon .nh-input { padding-right:36px; }
  .nh-blue-panel .nh-input-wrap { margin-bottom:2px; }
  .nh-blue-panel .nh-inputs { gap:6px; }

  /* Hide location line on mobile */
  .nh-location-line {
    display: none !important;
  }

  /* Show mobile filter button */
  .nh-mobile-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide desktop search icon on mobile */
  .nh-search-with-filter .nh-input-icon-btn {
    display: none;
  }

  /* Mobile filter content */
  .nh-mobile-filters-content {
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
    position: relative;
    z-index: 10;
  }

  /* Hide the results list on mobile initially */
  .panel-position.no-mobile-view {
    display: none;
  }

  /* When filters are shown, also show results */
  .nh-mobile-filters-content.show + .panel-position.no-mobile-view {
    display: block;
    padding: 16px;
    background: #fff;
    border-top: 1px solid #eee;
    max-height: 40vh;
    overflow-y: auto;
    position: relative;
    z-index: 9;
  }

  /* Map fills remaining space and proper positioning */
  .nh-map {
    border-radius: 0;
    height: 100%;
    position: relative;
    z-index: 1;
  }

  /* Ensure Google Maps controls are not behind blue panel */
  #map > div > div.gm-style > div:nth-child(1) > div:nth-child(2) {
    z-index: 2 !important;
  }

  /* Fix Google Maps UI elements z-index */
  .gm-style > div {
    z-index: 2 !important;
  }

  .gm-bundled-control {
    z-index: 3 !important;
  }

  /* Touch-friendly inputs */
  .nh-input {
    min-height: 48px;
    font-size: 16px;
    padding: 12px 16px;
  }

  .nh-input-pill {
    border-radius: 25px;
  }

  /* Better mobile spacing */
  .nh-inputs {
    gap: 12px;
  }

  .nh-section + .nh-section {
    margin-top: 20px;
    padding-top: 20px;
  }

  /* Mobile cards */
  .nh-card {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .nh-card-title {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .nh-card-text {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* Extra-small refinement: further compaction for narrow phones */
@media (max-width: 480px){
  .nh-blue-panel { padding:12px 12px 10px; }
  .nh-blue-panel .nh-input { padding:4px 10px; font-size:12px; border-radius:18px; }
  .nh-blue-panel .nh-input.nh-input-sm { padding:3px 6px; font-size:11px; }
  .nh-blue-panel .nh-input-icon-btn { width:24px; height:24px; }
  .nh-blue-panel .nh-input-with-icon .nh-input { padding-right:32px; }
  .nh-blue-panel .nh-inputs { gap:4px; margin-bottom:8px; }
  .nh-blue-panel .nh-input-wrap { margin-bottom:0; }
  .nh-quick-actions { gap:6px; }
  .nh-quick-actions .nh-btn { padding:5px 8px; font-size:10px; }
  .nh-chip, .nh-chips-pills .nh-chip { padding:6px 10px; font-size:11px; }
  .nh-chip-dept { padding:8px 12px; }
  .nh-section-title { font-size:13px; margin:10px 2px 8px; }
  .nh-range-wrap input.nh-range { height:20px; }
}

/* Range slider */
.nh-range-wrap{ padding: 6px 2px; }
.nh-range{ width:100%; }
.nh-ticks{ display:flex; justify-content:space-between; font-size:11px; color:#556; margin-top:6px; }
.nh-range::-webkit-slider-thumb{ background:#0b5193; }
.nh-ticks .spacer{ flex:1; }

/* Styles for new SVG-based filter buttons */
.btn-toggle-blue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    border: 2px solid #d9eaf3;
    border-radius: 28px;
    padding: 4px 16px 4px 4px;
    font-family: 'Open Sans', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    vertical-align: middle;
}

.btn-toggle-blue:hover {
    border-color: #0b5193;
}

.btn-toggle-blue .filterBtn-svg {
    display: block;
}

.btn-toggle-blue .filterBtn-text {
    color: #0b5193;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1;
}

/* Active state from ng-class */
.btn-toggle-blue.activeOpd {
    background-color: #C280D6;
    border-color: #C280D6;
    color: #fff;
}

.btn-toggle-blue.activeIpd {
    background-color: #F68A40;
    border-color: #F68A40;
    color: #fff;
}

.btn-toggle-blue.activeBoth {
    background: linear-gradient(to right, #C280D6, #F68A40);
    border-color: transparent;
    color: #fff;
}

/* Shared active styles for text and icons */
.btn-toggle-blue.activeOpd .filterBtn-text,
.btn-toggle-blue.activeIpd .filterBtn-text,
.btn-toggle-blue.activeBoth .filterBtn-text {
    color: #fff;
}

.btn-toggle-blue.activeOpd .filterBtn-svg path,
.btn-toggle-blue.activeIpd .filterBtn-svg path,
.btn-toggle-blue.activeBoth .both-icon svg path {
    fill: #fff;
    opacity: 1;
}

/* When active, the button's background provides the color, so hide the SVG's inner circle */
.btn-toggle-blue.activeOpd .filterBtn-svg circle,
.btn-toggle-blue.activeIpd .filterBtn-svg circle,
.btn-toggle-blue.activeBoth .both-icon svg circle {
    display: none;
}

.ml-5 {
    margin-left: 5px;
}

.nh-chip-active {
    background-color: #eaf6ff;
    border-color: #0b5193;
    color: #0b5193;
}

.nh-chip-active .nh-chip-text {
    font-weight: 700;
}

/* ====== Network Hospital: Inline alert above Surgery input ====== */
.nh-inline-alert {
  position: relative;
  margin: 4px 6px 6px 6px;
  padding: 8px 10px 8px 12px;
  font-size: 12px;
  line-height: 1.3;
  border-left: 3px solid #c53030; /* red accent */
  background: #fef2f2;            /* light red background */
  color: #7f1d1d;                 /* readable text */
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  animation: nh-fade-in 160ms ease-out;
}
.nh-inline-alert .nh-alert-close {
  background: transparent;
  border: none;
  color: #7f1d1d;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  cursor: pointer;
}
@keyframes nh-fade-in { from { opacity: 0; transform: translateY(-2px);} to { opacity:1; transform: translateY(0);} }

/* Click overlay to capture taps when surgery input is disabled */
.nh-inputs .nh-input-wrap { position: relative; }
.nh-click-overlay {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: transparent;
  cursor: pointer;
  /* Keep it above the disabled input but below suggestions */
  z-index: 10;
}

/* Responsive tweaks for very small screens */
@media (max-width: 480px) {
  .nh-inline-alert {
    margin: 4px 4px 6px 4px;
    padding: 7px 9px;
    font-size: 11px;
  }
  .nh-inline-alert .nh-alert-close { font-size: 13px; }
}