/* PropManager Kenya — Custom Styles
   Authored mobile-first: unprefixed rules below are the baseline for small
   screens; each breakpoint's min-width media query only adds what changes
   for larger viewports. Bootstrap's grid (col-md-*, etc.) is mobile-first
   already and needs no help here — these rules cover the app's own
   hand-rolled layout: the sidebar, and page-header/button-group wrapping. */

:root {
  --primary: #0d6efd;
  --success: #198754;
  --warning: #ffc107;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
}

/* ---------------------------------------------------------------------
   Sidebar — mobile-first
   Base (below 768px): an off-canvas panel, hidden until toggled open.
   At 768px+: a normal in-flow column next to the page content, optionally
   collapsible to an icon rail via #sidebarToggle.
   --------------------------------------------------------------------- */
#sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  max-width: 85vw;
  z-index: 1040;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  overflow-x: hidden;
  overflow-y: auto;
}
#sidebar.show {
  transform: translateX(0);
}
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 1035;
}
#sidebar-backdrop.show {
  display: block;
}
#page-content {
  min-width: 0;
  width: 100%;
}

@media (min-width: 768px) {
  #sidebar {
    position: relative;
    inset: auto;
    max-width: none;
    min-height: 100vh;
    flex-shrink: 0;
    transform: none;
    transition: width 0.25s ease;
  }
  #sidebar.collapsed {
    width: var(--sidebar-collapsed-width) !important;
  }
  #sidebar-backdrop {
    display: none !important;
  }
}

#sidebar.collapsed .sidebar-header span,
#sidebar.collapsed .sidebar-label,
#sidebar.collapsed .nav-link span,
#sidebar.collapsed .sidebar-footer .fw-semibold,
#sidebar.collapsed .sidebar-footer small {
  display: none !important;
}
#sidebar .nav-link:hover {
  background: rgba(255,255,255,.08);
  border-radius: 8px;
}
#sidebar .nav-link.active {
  background: rgba(255,193,7,.15);
  color: #ffc107 !important;
  border-radius: 8px;
}

/* ---------------------------------------------------------------------
   Page-header rows (title + action buttons) and inline button groups —
   mobile-first safety net. These stack/wrap by default rather than
   overflowing the viewport; on wide enough screens the content simply
   never needs to wrap, so no larger-breakpoint override is needed.
   --------------------------------------------------------------------- */
.d-flex.justify-content-between.align-items-start,
.d-flex.justify-content-between.align-items-center {
  flex-wrap: wrap;
  row-gap: .5rem;
}
.d-flex.gap-2 {
  flex-wrap: wrap;
}

/* Cards */
.card {
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1) !important;
}

/* Rounded-4 override for table corners */
.card.rounded-4 > .table-responsive:last-child table {
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
}

/* Table */
.table th {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c757d;
  font-weight: 600;
  border-top: none;
}

/* Badge pill status */
.badge {
  font-weight: 500;
}

/* M-Pesa green theme */
.btn-mpesa {
  background: #00C853;
  color: white;
  font-weight: 600;
}
.btn-mpesa:hover {
  background: #00B248;
  color: white;
}

/* Alert subtle variants (Bootstrap 5.3+) */
.alert-success-subtle {
  background-color: #d1e7dd;
  border-color: #a3cfbb;
  color: #0a3622;
}

/* Notification bell animation */
.bell-ring {
  animation: ring 0.5s ease;
}
@keyframes ring {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-15deg); }
}

/* Page transitions */
main {
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Print styles for receipts */
@media print {
  #sidebar, #sidebar-backdrop, nav.navbar, footer { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
}