body{padding-top:3.5rem} .badge-toggle{cursor:pointer}

/* Mobile-friendly tweaks */
:root { --tap-target: 44px; }
.btn, .form-control { min-height: var(--tap-target); margin-top: 3px;}
.text-small { font-size: .9rem; }
.text-xs { font-size: .85rem; }
.card-list .card { margin-bottom: 0.75rem; }
.badge { font-size: 0.82rem; }
.btn.btn-outline-danger, .btn.btn-outline-success { font-size: 0.85rem; }
.btn.btn-outline-danger.btn-sm, .btn.btn-outline-success.btn-sm { font-size: 0.85rem; }
.btn.btn-outline-danger, .btn.btn-outline-success { padding-left: 0.75rem; padding-right: 0.75rem; }

/* Consistent width for availability toggles */
[data-toggle="availability"] { min-width: 8rem; }
footer.small{bottom: 25px;position: fixed;right: 25px;}
.sticky-bottom-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid rgba(0,0,0,.1);
  padding: .5rem; z-index: 1030;
}
.alertnote{font-weight: normal; font-size: 12px; font-style: italic;}
/* Navbar brand logo: compact, keeps aspect */
.brand-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px; /* optional, tidy corners */
}

/* Make long cell content tidy on desktop too */
.roster-table td.text-truncate,
.roster-table th.text-truncate { max-width: 220px; }
.roster-table td,
.roster-table th { font-size: 0.95rem; }
.roster-table td .badge { font-size: 0.75rem; }

/* Roster mobile cards */
.roster-card-list .roster-card {
  border: 1px solid #eaeaea;
  margin-bottom: 0.75rem;
}
.roster-card-list .roster-card + .roster-card { margin-top: 0.35rem; }
.roster-card .badge { font-size: 0.78rem; }
.roster-card .text-small { color: #6c757d; }

/* Tiny spacing between stacked badges */
.badge + .badge { margin-top: 2px; }

/* Birthday cards */
.birthday-card-list .birthday-card {
  border: 1px solid #eaeaea;
  margin-bottom: 0.75rem;
}
.birthday-card-list .birthday-card + .birthday-card { margin-top: 0.35rem; }
.birthday-card .badge { font-size: 0.78rem; }

/* Ribbon alert */
.ribbon-alert {
  background: #fff6d8;
  color: #4a3b00;
  padding: .6rem .85rem;
  border-radius: .35rem;
  border: 0;
}
.ribbon-alert .ribbon-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f0c200;
  box-shadow: 0 0 0 4px rgba(240, 194, 0, 0.25);
}
.ribbon-alert.text-xs,
.ribbon-alert .text-xs { font-size: 0.82rem; }
.ribbon-line {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
  min-width: 0;
}
.ribbon-text {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Admin mobile cards */
.admin-card-list .admin-card {
  border: 1px solid #eaeaea;
  margin-bottom: 0.75rem;
}
.admin-card-list { display: flex; flex-direction: column; gap: 0.35rem; }
.admin-card-list .admin-card + .admin-card { margin-top: 0.25rem; }
.admin-card .badge { font-size: 0.78rem; }
.admin-actions-grid .btn { width: 100%; }

@media (min-width: 992px){
  .brand-logo { width: 28px; height: 28px; }
}

/* Make colored PNG logo appear white on dark navbars */
.navbar-dark .brand-logo--invert {
  filter: brightness(0) invert(1);
}

/* Ensure the image never stretches due to flex */
.navbar-brand .brand-logo { flex: 0 0 auto; }

@media (min-width: 768px){
  .sticky-bottom-bar { display: none; }
}
/* Tables -> cards on small screens */
@media (max-width: 767.98px){
  .table-responsive-stack table { display: block; }
  .table-responsive-stack thead { display: none; }
  .table-responsive-stack tbody { display: block; }
  .table-responsive-stack tr { display: block; margin-bottom: .75rem; border: 1px solid #eaeaea; border-radius: .5rem; padding: .5rem; }
  .table-responsive-stack td { display: contents; justify-content: space-between; padding: .35rem .5rem; border: none; }
  .table-responsive-stack td::before {
    content: attr(data-label);
    font-weight: 600;
    /*padding-right: .75rem;*/
  }
  .btn, .form-control {margin-top: 3px;}
  .d-flex .me-2{margin-top: .2em;}
  span.birthday{margin-top: 5px;}

  /* Make list items compact but readable on phones */
  .availability-list .list-group-item { padding: .75rem .75rem; }

  /* Wrap the actions nicely and prevent label wrapping inside the button */
  .availability-actions .btn { white-space: nowrap; }

}


/* Booking Helper... ultimateyly to be fully integrated */

  .booking p{line-height: 30px}
  .booking span.exact {font-size: 10px;display: block;color: #F00;}
  .booking span.countdown {color: cadetblue;}
  .booking td.next{font-weight: bold; color: #F00;}
  .booking #login{padding:5px; border: 1px solid #333; background-color: #04AA6D; color:#fff;}
  .booking .book{padding:8px; border: 1px solid #333; background-color: #FF0000; color:#fff; border-radius: 4px}
  .booking table {border: 1px solid #ccc;border-collapse: collapse;margin: 0;padding: 0;width: 100%;table-layout: fixed;}
  .booking table tr {background-color: #f8f8f8;border: 1px solid #ddd;padding: .35em;}
  .booking table th,table td {padding: .625em;}
  .booking table th {font-size: .85em;letter-spacing: .1em;text-transform: uppercase;background-color: #04AA6D;}
  .booking table tr:nth-child(even){background-color: #f2f2f2;}
  .booking table tr:hover {background-color: #ddd;}

  @media screen and (max-width: 599px){ 
    .booking h1{color: #069}
    .booking table {border: 0;}
    .booking td.open{display: none;}
    .booking td.pending{display: none;}
    .booking table caption {font-size: 1.3em;}
    .booking table thead {border: none;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
    .booking table tr {border-bottom: 3px solid #ddd;display: block;margin-bottom: .625em;}  
    .booking table td {border-bottom: 1px solid #ddd;display: block;font-size: .8em;text-align: right;}
    .booking table td::before {content: attr(data-label);float: left;font-weight: bold;text-transform: uppercase;}
    .booking table td:last-child {border-bottom: 0;}

  .table-responsive-stack table thead {
    display: none; /* hide header on small screens */
  }
  .table-responsive-stack table tbody tr {
    display: block;
    margin-bottom: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    overflow: hidden;
  }
  .table-responsive-stack table tbody tr td {
    /*display: grid;*/
    grid-template-columns: 9rem 1fr; /* label | value */
    gap: .25rem .5rem;
    padding: .5rem .75rem;
    border: 0;           /* remove inner borders */
    border-bottom: 1px solid var(--bs-border-color);
  }
  .ms-2 {margin-left: unset !important;}
      
  .table-responsive-stack table tbody tr td:last-child {
    border-bottom: 0;
  }
  .table-responsive-stack table tbody tr td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: none;
  }
  .table-responsive-stack .btn.btn-sm {
    width: 100%; /* tap-friendly actions */
  }
  .roster-table td.text-truncate {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal; /* allow wrapping in stacked mode */
  }

  }
    .booking center {font-size: 12px;font-weight: bold;color: #999;}
    .booking .clock {color: #FF0000;font-size: 40px;font-family: monospace;letter-spacing: 7px;text-align: center;}