/* ========= Brand + Base ========= */
:root{
   --brand: #1569C7;
      --brand-dark: #0F4A8A;
      --brand-secondary: #00A8A8;
      --ink: #0A2B54;
      --surface: #F4F8FF;
      --chip-border: #00A8A8;
}
html,body{background:var(--surface);color:var(--ink);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}

/* Single-row navbar */
.navbar .container-fluid{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}
.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(14px,4vw,20px)}
 .section-title { font-weight:700; font-size:1.1rem; color:var(--brand-dark); border-left:4px solid var(--brand-secondary); padding-left:.5rem; }

/* Buttons */
.btn-primary { background:var(--brand); border-color:var(--brand); border-radius:.9rem; }
    .btn-primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
    .btn-outline-secondary { border-radius:.9rem; color:var(--brand-secondary); border-color:var(--brand-secondary); }
    .btn-outline-secondary:hover { background:var(--brand-secondary); color:#fff; }



/* Chips */
.chip-btn{border:1px solid var(--brand-secondary);border-radius:999px;padding:.5rem .9rem;background:#fff;color:var(--brand-dark)}
.chip-btn.active{background:var(--brand-secondary);color:#fff}
    .chip { border:1px solid var(--chip-border); border-radius:999px; padding:.5rem .9rem; background:#fff; color:var(--brand-dark); }
	.h-scroll { overflow-x:auto; white-space:nowrap; }
    .h-scroll .chip { display:inline-block; margin-right:.5rem; }
	
	
/* Search bar */
.search-bar .input-group{border-radius:1rem;overflow:hidden;font-size:.85rem;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.search-bar .form-control{border:0;font-size:.85rem;}

/* Department cards */
.card-rounded{border-radius:1rem}
.deptCard .card-body{display:flex;align-items:flex-start;gap:.8rem}
.deptCard .dept-icon{width:56px;height:56px;object-fit:contain;flex:0 0 56px}
.deptCard .dept-text{min-width:0}
.deptCard .dept-name{font-weight:600}
.deptCard .dept-desc{font-size:.9rem;color:#6c757d}
.deptCard .dept-name,.deptCard .dept-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Fixed mobile tabbar */
.mobile-tabbar{
  position: fixed;             /* <-- make it stick */
  left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 1040;
  background: #fff;
  border-top: 2px solid var(--accent);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}

/* Layout inside the bar */
.mobile-tabbar .nav{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.mobile-tabbar .nav-item{ flex: 1 1 0; }

.mobile-tabbar .nav-link{
  display: flex;                   /* stack icon + label */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  height: 64px;                    /* consistent tap target */
  padding: 0;                      /* height handles spacing */
  font-size: .85rem;
  color: #6c757d;
  text-decoration: none !important;
  border-top: 3px solid transparent;
}

.mobile-tabbar .nav-link i{ line-height: 1; }

.mobile-tabbar .nav-link.active{
  color: var(--accent);
  font-weight: 600;
  border-top-color: var(--accent);
}

/* Hide on desktop */
@media (min-width: 992px){
  .mobile-tabbar{ display: none; }
}

/* Reserve space below content for the fixed bar */
@media (max-width: 768px){
  body{
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .mobile-tabbar{
    padding-bottom: env(safe-area-inset-bottom);
  }
}


 .avatar { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#eaf2ff,#f6f9ff); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--brand-dark); }
 .badge.text-bg-light { background:#eaf2ff!important; color:var(--brand-dark)!important; }
  @media (min-width: 992px) {
      .desktop-rail { position:sticky; top:1rem; }
      .mobile-tabbar { display:none; }
    }

/* ======= Mobile tuning (reduce sizes by ~2–4px) ======= */
@media (max-width:768px){
  body{font-size:14px}
  h1,h2,h3,h4,h5,h6{font-size:clamp(14px,4vw,18px)}
  .chip-btn{font-size:12px;padding:.35rem .7rem}
  .search-bar .form-control{font-size:14px;padding:.6rem .75rem}
  .deptCard .card-body{gap:.6rem;padding:12px}
  .deptCard .dept-icon{width:48px;height:48px}
  .deptCard .dept-name{font-size:14px}
  /* Hide "View" button only on mobile */
  .deptCard .view-btn{display:none}
  .top_emergency_btn{display:none}
  
}
 @media (min-width: 482px) {
      .top_emergency_btn{display:none}
    }
	
/* Mini department grid on Home */
.dept-grid .dept-mini {
  display: block;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--brand-teal, #009688); /* teal border */
  text-align: center;
  transition: box-shadow 0.2s ease-in-out;
}
.dept-grid .dept-mini:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dept-mini .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 88px; /* square-ish button */
}

.dept-grid .mini-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin-bottom: 0.35rem;
}

.dept-grid .mini-label {
  font-size: 0.85rem;
  color: var(--brand-dark);
  font-weight: 500;
}

/* Department description (hidden on mobile) */
.dept-grid .mini-desc {
  display: none;
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.25rem;
  line-height: 1.2;
}

/* Show description only on tablet & desktop */
@media (min-width: 768px) {
  .dept-mini .card-body {
    min-height: 120px; /* extra height for description */
  }
  .dept-grid .mini-desc {
    display: block;
  }
}

/* Slightly tighter on small phones */
@media (max-width: 768px) {
  .dept-mini .card-body {
    min-height: 78px;
  }
  .dept-grid .mini-icon {
    width: 26px;
    height: 26px;
  }
}
/* No underlines on dept tiles */
.dept-grid a.dept-mini,
.dept-grid .mini-label,
.dept-grid .mini-desc { text-decoration: none !important; }





/* Mini department grid – keep tidy, no underlines */
.dept-grid a.dept-mini,
.dept-grid .mini-label,
.dept-grid .mini-desc { text-decoration: none !important; }

/* Name + description stack cleanly */
.dept-name-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}

/* Show description on ALL viewports, but compact on phones */
.dept-grid .mini-desc{
  display:block;
  color:#666;
  line-height:1.2;
  /* small but readable on phones, scales up slightly */
  font-size: clamp(11px, 3.2vw, 13px);
  margin-top:.15rem;
  /* prevent overflow: max 2 lines */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Card height: allow for desc on phones */
.dept-mini .card-body{
  min-height: 100px;                /* was 78–88; increased to fit desc */
}

@media (min-width:768px){
  /* a bit more breathing room on tablet/desktop */
  .dept-mini .card-body{ min-height: 120px; }
  .dept-grid .mini-desc{ font-size: 0.8rem; }
}

/* (Optional) remove any leftover info-icon visibility */
.info-icon-btn{ display:none !important; }

/* Doctor filter horizontal scroll fix for mobile */
.doctor-filter {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
}

.doctor-filter::-webkit-scrollbar {
  display: none; /* hide scrollbar on mobile */
}

.doctor-filter a {
  white-space: nowrap;
  flex: 0 0 auto;
}