/* ── Global ──────────────────────────────────────────────────────────────── */
body { background-color: #f8f9fa; }

/* ── Sidebar toggle (checkbox hack, no JS) ───────────────────────────────── */
#sidebar-toggle { display: none; }

.app-wrapper {
  display: flex;
  min-height: calc(100vh - 56px);
}

.sidebar {
  width: 220px;
  min-width: 220px;
  background-color: #212529;
  transition: width .25s ease, min-width .25s ease;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* Collapsed state — driven by checkbox OR by class set before first paint */
#sidebar-toggle:checked ~ .app-wrapper .sidebar,
html.sidebar-collapsed .app-wrapper .sidebar {
  width: 64px;
  min-width: 64px;
}

/* Hide text labels when collapsed */
#sidebar-toggle:checked ~ .app-wrapper .sidebar .nav-label,
html.sidebar-collapsed .app-wrapper .sidebar .nav-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity .15s ease, width .25s ease;
  white-space: nowrap;
  display: inline-block;
}
.sidebar .nav-label {
  opacity: 1;
  transition: opacity .2s ease .05s;
  white-space: nowrap;
  display: inline-block;
}

/* Toggle button arrow direction */
#sidebar-toggle:checked ~ .app-wrapper .sidebar-toggle-btn .bi::before,
html.sidebar-collapsed .app-wrapper .sidebar-toggle-btn .bi::before {
  content: "\f285"; /* bi-chevron-double-right */
}

/* Nav links */
.sidebar .nav-link {
  color: #adb5bd;
  padding: .65rem .75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-radius: .375rem;
  white-space: nowrap;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: #fff;
  background-color: rgba(255,255,255,.08);
}
.sidebar .nav-link.active .nav-label {
  font-weight: 600;
}
.sidebar .nav-link i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Toggle button */
.sidebar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .5rem .75rem;
  cursor: pointer;
  color: #6c757d;
  transition: color .15s;
  user-select: none;
}
.sidebar-toggle-btn:hover { color: #fff; }
.sidebar-toggle-btn .bi { font-size: 1.1rem; }

.main-content {
  flex: 1;
  padding: 2rem;
  min-width: 0; /* prevent flex overflow */
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .sidebar { display: none; }
  .main-content { padding: 1.25rem; }
}

/* ── Offcanvas nav (mobile drawer) ───────────────────────────────────────── */
.offcanvas-nav-panel {
  width: 240px;
  background-color: #212529;
  display: flex;
  flex-direction: column;
}

.offcanvas-nav .nav-link {
  color: #adb5bd;
  padding: .65rem .75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-radius: .375rem;
}
.offcanvas-nav .nav-link:hover,
.offcanvas-nav .nav-link.active {
  color: #fff;
  background-color: rgba(255,255,255,.08);
}
.offcanvas-nav .nav-link.active span {
  font-weight: 600;
}
.offcanvas-nav .nav-link i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* ── Stats charts ────────────────────────────────────────────────────────── */
/* Fixed-height card body so all charts in a row render at the same height.  */
.chart-card-body {
  position: relative;
  height: 260px;
}

/* ── Role badges ─────────────────────────────────────────────────────────── */
.role-badge { font-size: .65rem; }

/* ── Build version ───────────────────────────────────────────────────────── */
.sidebar-version {
  padding: .5rem .75rem;
  color: #495057;
  font-size: .7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: auto;
}

/* Hide version text when sidebar is collapsed */
#sidebar-toggle:checked ~ .app-wrapper .sidebar .sidebar-version,
html.sidebar-collapsed .app-wrapper .sidebar .sidebar-version {
  opacity: 0;
}

.offcanvas-footer {
  padding: .5rem .75rem;
  color: #6c757d;
  font-size: .7rem;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: auto;
}

/* ── Invoices ────────────────────────────────────────────────────────────── */
/* font-monospace already a Bootstrap utility class; nothing extra needed.    */
/* Badge classes for invoice status use existing Bootstrap bg-* utilities.    */

/* ── Notification bell popover ─────────────────────────────────────────────── */
.notif-bell-wrapper {
  display: inline-flex;
  /* Extend hover area downward to cover the gap between bell and popover */
  padding-bottom: 10px;
  margin-bottom: -10px;   /* compensate so it doesn't push other elements */
}

.notif-popover {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s, visibility 0s .1s;
  position: absolute;
  top: calc(100% + 0px);   /* sits flush against the wrapper's extended padding */
  right: 0;
  width: 320px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .5rem;
  z-index: 1090;
  overflow: hidden;
}

/* Show on hover of the wrapper OR when any child has focus */
.notif-bell-wrapper:hover .notif-popover,
.notif-bell-wrapper:focus-within .notif-popover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .1s, visibility 0s 0s;
}

.notif-popover-header {
  background: #f8f9fa;
}

.notif-popover-list {
  max-height: 320px;
  overflow-y: auto;
}

.notif-item {
  transition: background .1s;
}
.notif-item:hover {
  background: #f8f9fa;
}
.notif-unread {
  background: #eff6ff;
}
.notif-unread:hover {
  background: #dbeafe;
}

.notif-popover-footer {
  background: #f8f9fa;
}

/* Prevent popover from being clipped by navbar overflow */
.navbar {
  overflow: visible !important;
}

/* ── Help centre TOC ────────────────────────────────────────────────────── */
#help-toc a.help-toc-link {
  display: block;
  padding: .5rem .75rem;
  font-size: .875rem;
  color: var(--bs-body-color);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#help-toc a.help-toc-link:hover {
  background-color: var(--bs-light);
  color: var(--bs-dark);
  border-left-color: var(--bs-secondary);
}
#help-toc a.help-toc-link.active {
  background-color: #e8f0fe;
  color: var(--bs-primary);
  border-left-color: var(--bs-primary);
  font-weight: 500;
}

/* ── Global search bar ──────────────────────────────────────────────────── */
#global-search-input::placeholder { color: #6c757d; opacity: 1; }
#global-search-input:focus { box-shadow: none; border-color: #6c757d; }

/* Ref add highlight — fades from green to transparent over 4s */
@keyframes refHighlight {
  0%   { background-color: rgba(25, 135, 84, 0.25); }
  40%  { background-color: rgba(25, 135, 84, 0.20); }
  100% { background-color: transparent; }
}
.ref-highlight {
  animation: refHighlight 4s ease-out forwards;
}

/* Notification mark-read button — outlined green, solid green + white check on hover */
.notif-mark-one {
  color: #198754;
  border-color: #198754;
  background: transparent;
  transition: background-color .15s, color .15s;
}
.notif-mark-one:hover,
.notif-mark-one:focus {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}

/* Notification mark-unread button — faded at rest, blue on hover */
.notif-mark-unread {
  opacity: 0.35;
  transition: opacity .15s, background-color .15s, color .15s;
}
.notif-mark-unread:hover,
.notif-mark-unread:focus {
  opacity: 1;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}