:root {
  --bb-primary: #1f8a4c;
  --bb-primary-dark: #166238;
  --bb-primary-light: #e7f6ec;
  --bb-sidebar-bg: #182634;
  --bb-sidebar-hover: #24384a;
  --bb-sidebar-active: #1f8a4c;
  --bb-sidebar-text: #b7c4d0;
  --bb-sidebar-text-active: #ffffff;
  --bb-body-bg: #f3f5f8;
  --bb-card-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
  --bb-border: #e5e9ef;
  --bb-sidebar-width: 260px;
  --bb-sidebar-width-collapsed: 78px;
}

html, body {
  height: 100%;
  background-color: var(--bb-body-bg);
  font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1e2a35;
}

/* ---------- Sidebar ---------- */
.bb-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--bb-sidebar-width);
  background: var(--bb-sidebar-bg);
  z-index: 1040;
  transform: translateX(-100%);
  transition: transform .25s ease, width .25s ease;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.bb-sidebar.show {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0,0,0,.25);
}

.bb-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem 1.25rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.bb-sidebar-brand i {
  color: var(--bb-primary);
  font-size: 1.5rem;
}

.bb-sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .75rem .6rem;
}

.bb-sidebar-nav::-webkit-scrollbar { width: 6px; }
.bb-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

.bb-nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  color: var(--bb-sidebar-text);
  text-decoration: none;
  font-size: .92rem;
  margin-bottom: .15rem;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.bb-nav-link i { font-size: 1.05rem; width: 1.3rem; text-align: center; flex-shrink: 0; }

.bb-nav-link:hover {
  background: var(--bb-sidebar-hover);
  color: #fff;
}

.bb-nav-link.active {
  background: var(--bb-sidebar-active);
  color: var(--bb-sidebar-text-active);
}

@media (min-width: 992px) {
  .bb-sidebar { transform: translateX(0); }
  .bb-sidebar.collapsed { width: var(--bb-sidebar-width-collapsed); }
  .bb-sidebar.collapsed .bb-sidebar-brand span,
  .bb-sidebar.collapsed .bb-nav-link span { display: none; }
  .bb-sidebar.collapsed .bb-sidebar-brand { justify-content: center; }
  .bb-sidebar.collapsed .bb-nav-link { justify-content: center; }
}

.bb-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 32, .5);
  z-index: 1035;
  display: none;
}
.bb-sidebar-backdrop.show { display: block; }

/* ---------- Main area ---------- */
.bb-main {
  margin-left: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .25s ease;
}

@media (min-width: 992px) {
  .bb-main { margin-left: var(--bb-sidebar-width); }
  .bb-main.collapsed { margin-left: var(--bb-sidebar-width-collapsed); }
}

/* ---------- Topbar ---------- */
.bb-topbar {
  background: #fff;
  border-bottom: 1px solid var(--bb-border);
  padding: .6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.bb-topbar-toggle {
  border: none;
  background: var(--bb-primary-light);
  color: var(--bb-primary-dark);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.bb-topbar-toggle:hover { background: var(--bb-primary); color: #fff; }

.bb-topbar-title {
  font-weight: 600;
  color: #1e2a35;
  flex: 1 1 auto;
}

.bb-user-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem .35rem .35rem;
  border-radius: 999px;
  background: var(--bb-body-bg);
}

.bb-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bb-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .85rem;
  flex-shrink: 0;
}

/* ---------- Content ---------- */
.bb-content {
  padding: 1.5rem;
  flex: 1 1 auto;
}

.bb-card {
  background: #fff;
  border: 1px solid var(--bb-border);
  border-radius: 14px;
  box-shadow: var(--bb-card-shadow);
  padding: 1.25rem;
}

.bb-page-header {
  margin-bottom: 1.25rem;
}
.bb-page-header h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: .15rem;
  color: #16222c;
}
.bb-page-header p {
  color: #6b7a87;
  margin-bottom: 0;
  font-size: .9rem;
}

.btn-bb-primary {
  background: var(--bb-primary);
  border-color: var(--bb-primary);
  color: #fff;
}
.btn-bb-primary:hover {
  background: var(--bb-primary-dark);
  border-color: var(--bb-primary-dark);
  color: #fff;
}

/* Empty state used across all grid pages */
.bb-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #8695a2;
}
.bb-empty-state i {
  font-size: 2.5rem;
  color: #c3cdd6;
  margin-bottom: .75rem;
  display: block;
}

/* dropdown "+" add buttons */
.bb-input-add {
  display: flex;
  gap: .4rem;
}
.bb-input-add .select2-container { flex: 1 1 auto; }
.bb-btn-quickadd {
  flex-shrink: 0;
  border: none;
  background: var(--bb-primary);
  color: #fff;
  width: 38px;
  border-radius: 8px;
}
.bb-btn-quickadd:hover { background: var(--bb-primary-dark); }

/* ---------- Dashboard KPI cards ---------- */
.bb-kpi-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}
.bb-detail-link {
  position: absolute;
  top: .5rem;
  right: .5rem;
  color: #9aa7b0;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}
.bb-detail-link:hover { color: var(--bb-primary-dark); }
.bb-detail-link-inline {
  color: var(--bb-primary-dark);
  font-size: .8rem;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.bb-detail-link-inline:hover { text-decoration: underline; }
.bb-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.bb-kpi-icon-green { background: var(--bb-primary-light); color: var(--bb-primary-dark); }
.bb-kpi-icon-blue { background: #e5edfb; color: #2b5fb0; }
.bb-kpi-icon-red { background: #fbe7e7; color: #b0342b; }
.bb-kpi-icon-amber { background: #fdf1de; color: #9a6a12; }

.bb-kpi-label {
  color: #6b7a87;
  font-size: .82rem;
  margin-bottom: .2rem;
}
.bb-kpi-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #16222c;
}

.bb-stock-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .25rem 0;
  border-top: 1px solid var(--bb-border);
}
.bb-stock-row:first-child { border-top: none; }
.bb-stock-row span:first-child {
  min-width: 0;
  overflow-wrap: break-word;
}
.bb-stock-row span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}

.bb-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: .4rem;
}
.bb-status-dot-green { background: #1f8a4c; }
.bb-status-dot-amber { background: #e0a12c; }
.bb-status-dot-red { background: #d3453c; }
.bb-status-dot-none { background: #c3cdd6; }

/* ---------- Vaccination alert (Dashboard) ---------- */
.bb-vaccine-alert-card {
  border-left: 4px solid #e0a12c;
  background: #fdf7ea;
}
.bb-vaccine-alert-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  border-top: 1px solid rgba(224, 161, 44, .25);
  flex-wrap: wrap;
}
.bb-vaccine-alert-row:first-child { border-top: none; }
.bb-vaccine-alert-row .bb-vaccine-shed {
  font-weight: 600;
  color: #16222c;
}
.bb-vaccine-alert-row .bb-vaccine-name {
  color: #6b5215;
  font-size: .85rem;
}

/* ---------- Login page ---------- */
.bb-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #101c27 0%, #16342a 55%, #1f8a4c 100%);
  padding: 1rem;
}

.bb-login-shell {
  width: 100%;
  max-width: 960px;
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  background: #fff;
}

/* Visual / brand panel */
.bb-login-visual {
  flex: 1 1 46%;
  position: relative;
  background: linear-gradient(160deg, #1f8a4c 0%, #166238 55%, #10291c 100%);
  color: #fff;
  padding: 2.5rem 2.25rem;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.bb-login-visual-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bb-login-visual-decor svg {
  width: 100%;
  height: 100%;
}
.bb-login-visual-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.bb-login-visual-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: auto;
}
.bb-login-visual-brand i {
  font-size: 1.5rem;
  color: #ffe9a8;
}
.bb-login-visual-content h2 {
  font-size: 1.55rem;
  font-weight: 700;
  margin: 2rem 0 .6rem;
  line-height: 1.3;
}
.bb-login-visual-content > p {
  color: rgba(255,255,255,.82);
  font-size: .92rem;
  margin-bottom: 1.5rem;
  max-width: 320px;
}
.bb-login-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.bb-login-features li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .87rem;
  color: rgba(255,255,255,.94);
}
.bb-login-features i {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Form panel */
.bb-login-form-panel {
  flex: 1 1 54%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
}
.bb-login-card {
  width: 100%;
  max-width: 360px;
}
.bb-login-brand {
  text-align: left;
  margin-bottom: 1.75rem;
}
.bb-login-brand i {
  font-size: 2.2rem;
  color: var(--bb-primary);
}
.bb-login-brand h1 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: .5rem 0 .2rem;
  color: #16222c;
}
.bb-login-brand p {
  color: #8695a2;
  font-size: .87rem;
  margin: 0;
}

.bb-login-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.bb-login-input-group > i:first-child {
  position: absolute;
  left: .8rem;
  color: #9aa7b2;
  font-size: 1rem;
  pointer-events: none;
}
.bb-login-input-group .form-control {
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}
.bb-login-eye {
  position: absolute;
  right: .5rem;
  border: none;
  background: none;
  color: #9aa7b2;
  padding: .3rem;
  line-height: 1;
}
.bb-login-eye:hover {
  color: var(--bb-primary);
}

.bb-login-footnote {
  text-align: center;
  font-size: .78rem;
  color: #b3bcc4;
  margin: 1.5rem 0 0;
}

@media (max-width: 991.98px) {
  .bb-login-shell {
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
  }
  .bb-login-form-panel {
    padding: 2.25rem 1.5rem;
  }
}

@media (max-width: 420px) {
  .bb-login-form-panel {
    padding: 1.75rem 1.1rem;
  }
}

/* =========================================================================
   Mobile app shell (<768px only) - bottom tab bar, app bar, "More" sheet,
   FAB, full-screen modal sheets, card-list grids, larger touch targets.
   Nothing in this block is reachable at >=768px, so desktop/tablet layout
   above that width is completely unaffected.
   ========================================================================= */

.bb-appbar-back,
.bb-appbar-title,
.bb-tabbar,
.bb-more-backdrop,
.bb-more-sheet,
.bb-fab,
.bb-card-list {
  display: none;
}

@media (max-width: 767.98px) {

  /* ---- Kill the old slide-in sidebar/hamburger; tab bar replaces it ---- */
  .bb-sidebar,
  .bb-sidebar-backdrop,
  .bb-topbar-toggle {
    display: none !important;
  }
  .bb-main { margin-left: 0 !important; }

  /* ---- App bar: page title + back button instead of the desktop header ---- */
  .bb-topbar {
    padding: .6rem .75rem;
    gap: .5rem;
  }
  .bb-topbar-title { display: none; }
  .bb-appbar-title {
    display: block;
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 1.05rem;
    color: #16222c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bb-appbar-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #16222c;
    font-size: 1.2rem;
    border-radius: 8px;
  }
  .bb-appbar-back.d-none { display: none; }
  .bb-appbar-back:active { background: var(--bb-body-bg); }

  .bb-user-chip .bb-user-avatar { width: 34px; height: 34px; }
  .bb-user-chip span.small { display: none; } /* keep app bar tight: avatar only */
  #bbShedSelectorWrap { display: none !important; } /* each mobile screen shows its own shed filter where relevant */

  /* ---- Content area: clear the fixed tab bar + FAB, add breathing room ---- */
  .bb-content {
    padding: 1rem .9rem calc(5.75rem + env(safe-area-inset-bottom));
  }

  /* ---- Bottom tab bar (primary navigation) ---- */
  .bb-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid var(--bb-border);
    padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(16, 24, 40, .07);
  }
  .bb-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-height: 48px;
    padding: .3rem .2rem;
    border: none;
    background: none;
    color: #8695a2;
    text-decoration: none;
    font-size: .68rem;
    font-weight: 600;
    border-radius: 10px;
  }
  .bb-tab i { font-size: 1.3rem; line-height: 1; }
  .bb-tab.active { color: var(--bb-primary-dark); }
  .bb-tab:active { background: var(--bb-body-bg); }

  /* ---- "More" full-screen sheet ---- */
  .bb-more-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 32, .5);
    z-index: 1045;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .bb-more-backdrop.show { opacity: 1; pointer-events: auto; }

  .bb-more-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(16, 24, 40, .25);
    z-index: 1050;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bb-more-sheet.show { transform: translateY(0); }

  .bb-more-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem .75rem;
    flex-shrink: 0;
  }
  .bb-more-sheet-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #16222c;
  }
  .bb-more-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--bb-body-bg);
    color: #6b7a87;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .bb-more-sheet-body {
    overflow-y: auto;
    padding: 0 .75rem 1rem;
  }
  .bb-more-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem .6rem;
    border-radius: 12px;
    text-decoration: none;
    color: #1e2a35;
    min-height: 44px;
  }
  .bb-more-item:active { background: var(--bb-body-bg); }
  .bb-more-item.active { background: var(--bb-primary-light); color: var(--bb-primary-dark); }
  .bb-more-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bb-body-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--bb-primary-dark);
    flex-shrink: 0;
  }
  .bb-more-item.active .bb-more-item-icon { background: #fff; }
  .bb-more-item-text { flex: 1 1 auto; font-weight: 600; font-size: .94rem; }
  .bb-more-item-chevron { color: #c3cdd6; font-size: .85rem; }

  body.bb-noscroll { overflow: hidden; }

  /* ---- Floating action button ---- */
  .bb-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 1.1rem;
    bottom: calc(4.9rem + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--bb-primary);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 6px 18px rgba(31, 138, 76, .45);
    z-index: 1025;
  }
  .bb-fab.d-none { display: none; }
  .bb-fab:active { background: var(--bb-primary-dark); }

  /* ---- Screen transition (fade/slide, respects reduced motion) ---- */
  .bb-content { animation: bbScreenIn .22s ease both; }
  .bb-content.bb-leaving { animation: bbScreenOut .12s ease both; }
  @keyframes bbScreenIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes bbScreenOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-6px); }
  }

  /* ---- Add/Edit modals become full-screen slide-up sheets ---- */
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
  }
  .modal-content {
    width: 100%;
    max-height: 100dvh;
    height: 100%;
    border-radius: 0;
    border: none;
    display: flex;
    flex-direction: column;
  }
  .modal-header,
  .modal-footer {
    border-radius: 0;
  }
  .modal-header {
    flex-shrink: 0;
    padding: 1rem 1.1rem;
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.1rem;
  }
  .modal-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: .85rem 1.1rem;
    padding-bottom: max(.85rem, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(16, 24, 40, .06);
  }
  .modal-footer .btn {
    flex: 1 1 auto;
  }
  .modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  }
  .modal.show .modal-dialog { transform: translateY(0); }

  /* ---- Card-list: replaces horizontally-scrolling tables ---- */
  .bb-card-list-wrap .table-responsive,
  .bb-card-list-wrap > table,
  table.bb-cards-source,
  table.bb-cards-source + .dataTables_wrapper,
  .dataTables_wrapper:has(table.bb-cards-source) {
    display: none !important;
  }
  .bb-card-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }
  .bb-record-card {
    background: #fff;
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    padding: .9rem 1rem;
    box-shadow: var(--bb-card-shadow);
  }
  .bb-record-card[role="button"] { cursor: pointer; }
  .bb-record-card[role="button"]:active { background: var(--bb-body-bg); }
  .bb-record-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .6rem;
  }
  .bb-record-card-title {
    font-weight: 700;
    font-size: .98rem;
    color: #16222c;
  }
  .bb-record-card-sub {
    font-size: .82rem;
    color: #8695a2;
    margin-top: .1rem;
  }
  .bb-record-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    margin-top: .6rem;
  }
  .bb-record-card-meta-item {
    display: flex;
    flex-direction: column;
    min-width: 72px;
  }
  .bb-record-card-meta-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #9aa7b0;
  }
  .bb-record-card-meta-value {
    font-size: .88rem;
    font-weight: 600;
    color: #1e2a35;
  }
  .bb-record-card-chevron {
    color: #c3cdd6;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .15rem;
  }

  /* ---- Larger touch targets + roomier spacing everywhere on mobile ---- */
  .btn { min-height: 44px; }
  .btn.btn-sm { min-height: 40px; padding-top: .45rem; padding-bottom: .45rem; }
  .form-control, .form-select { min-height: 44px; }
  .form-select.form-select-sm, .form-control.form-control-sm { min-height: 40px; }
  .bb-nav-link, a.dropdown-item, button.dropdown-item { min-height: 44px; }
  .d-flex.gap-2 { gap: .6rem !important; }
  .table td, .table th { padding-top: .65rem; padding-bottom: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-content,
  .bb-content.bb-leaving,
  .bb-more-sheet,
  .bb-more-backdrop,
  .modal.fade .modal-dialog {
    animation: none !important;
    transition: none !important;
  }
}