body {
     min-height: 100vh;
 }

 .sidebar {
     width: 240px;
     position: fixed;
     top: 0;
     left: 0;
     height: 100%;
     background-color: #212529;
     color: #fff;
 }

 .sidebar .nav-link {
     color: #adb5bd;
 }

 .sidebar .nav-link.active,
 .sidebar .nav-link:hover {
     color: #fff;
     background-color: #0d6efd;
 }

 .content-wrapper {
     margin-left: 240px;
     padding: 1.5rem;
     background-color: aliceblue;
     min-height: 100vh;
 }

 .topbar {
     height: 56px;
     background: #fff;
     border-bottom: 1px solid #dee2e6;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 1rem;
 }

 /* Floating Action Button */
 .fab-container {
     position: fixed;
     bottom: 2rem;
     right: 2rem;
     z-index: 1050;
 }

 .fab-btn {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     font-size: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .fab-menu {
     display: none;
     flex-direction: column;
     margin-bottom: .5rem;
 }

 .fab-menu button {
     margin-bottom: .5rem;
     text-align: left;
 }

 .fab-container.open .fab-menu {
     display: flex;
 }

 .dog-tabs-bar {
     gap: 1rem;
     flex-wrap: wrap;
 }

 .details-grid .label {
     width: 160px;
     color: #6c757d;
 }

 .timeline {
     position: relative;
     margin-left: 1.75rem;
     /* space for the dots */
     padding-left: .75rem;
     /* gap from the rail */
 }

 .timeline::before {
     content: "";
     position: absolute;
     left: -1rem;
     /* aligns rail under the dots */
     top: 0;
     bottom: 0;
     width: 3px;
     background: #0d6efd;
     /* Bootstrap primary */
     opacity: .3;
     border-radius: 2px;
 }

 .timeline-item {
     position: relative;
     margin-bottom: 1.25rem;
 }

 .timeline-item::before {
     content: "";
     position: absolute;
     left: -1.2rem;
     top: .3rem;
     width: .75rem;
     height: .75rem;
     background: #0d6efd;
     border: 2px solid #fff;
     /* halo */
     border-radius: 50%;
     box-shadow: 0 0 0 2px rgba(13, 110, 253, .25);
 }

 .timeline-item time {
     font-weight: 600;
     color: #0d6efd;
     display: inline-block;
     min-width: 7.5rem;
     /* keeps dates aligned */
     margin-right: .5rem;
 }

 .timeline-item small {
     color: #6c757d;
 }

 .avatar-initials {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 0.85rem;
     background: #0d6efd;
     /* Bootstrap primary */
     color: #fff;
     text-transform: uppercase;
 }

 #appointments-calendar {
     border: 1px solid #dee2e6;
 }

 #appointments-calendar .col {
     min-height: 120px;
     /* enough space for ~5 rows */
     overflow-y: auto;
     /* scroll if too many */
     background-color: #fff;
     position: relative;
 }

 #appointments-calendar .day-header {
     font-size: 0.8rem;
     font-weight: 600;
     margin-bottom: 2px;
     position: sticky;
     top: 0;
     background: #f8f9fa;
     padding: 2px 4px;
     border-bottom: 1px solid #dee2e6;
     z-index: 1;
 }

 #appointments-calendar .appt-badge {
     font-size: 0.7rem;
     display: block;
     margin-bottom: 2px;
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }