/*** BUCPPO Left Nav WT ***/
/* ---- Left nav container ---- */
.pp-leftnav {
  background: #FFFFFF;
  border-right: 1px solid #E5E7EB;
  min-height: calc(100vh - 80px); /* adjust if your header height differs */
  padding: 16px 12px;
}

/* ---- List & items ---- */
.pp-leftnav {
  background: #FFFFFF;
  border-right: 1px solid #E5E7EB;
  padding: 16px 12px;
  width: 100%;

  position: sticky;
  top: 0;            /* or top: var(--header-height); */
  height: 100vh;
  overflow-y: auto;  /* allows nav to scroll if it grows */
}

.pp-leftnav__item {
  margin: 4px 0;
  list-style:none;
}

/* Base link look: neutral */
.pp-leftnav__link {
  display: flex;
  align-items: center;
  gap: 10px;                /* spacing between icon and text */
  padding: 10px 12px;
  color: #333333;
  text-decoration: none;
  border-radius: 6px;       /* mild rounding; becomes “pill” on active */
  background: transparent;  /* no solid background by default */
  font-weight: 500;
}

/* Icon sizing & alignment */
.pp-leftnav__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
}

/* Hover: subtle tint, text stays dark */
.pp-leftnav__link:hover {
  background: rgba(31, 90, 166, 0.10);
}

/* Active item: solid primary pill + white text */
.pp-leftnav__item.is-active > .pp-leftnav__link {
  background: rgba(31, 90, 166, 0.10);
  color: #333333
}

/* High-contrast mode & accessibility tweaks (optional) */
@media (prefers-contrast: more) {
  .pp-leftnav__link:hover {
    background: rgba(31, 90, 166, 0.20);
  }
}

/*** Home Page Cards **/
.overview-cards .kpi-card{
    border:1px solid #E6E6E6;border-radius:10px;background:#fff;padding:16px;height:100%;
    display:flex;flex-direction:column;gap:6px
  }
  .kpi-icon{font-size:20px;color:#555}
  .kpi-title{font-size:13px;color:#666}
  .kpi-value{font-size:26px;font-weight:600;color:#0468C8}

/*** HomePage Recent Activity WT ***/
  /* Typography */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
  #recent-activity { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }

  /* Container card */
  .card { border:1px solid #E6E6E6; border-radius:10px; background:#fff; }

  /* Tabs */
  .recent-tabs .btn { border-radius:8px; -webkit-tap-highlight-color: transparent;}
  //.recent-tabs .btn.active { background:#0468C8; border-color:#0468C8; color:#fff; }
  .recent-tabs .btn.active { background:#1A475F; border-color:#0468C8; color:#fff; }
  .btn-outline-primary { --bs-btn-border-color:#C9E2FF; --bs-btn-color:#0468C8; }
  //.btn-outline-primary { --bs-btn-border-color:#C9E2FF; --bs-btn-color:#1A475F; }
  //.btn-outline-primary:hover { background:#EAF4FF; border-color:#A7D0FF; color:#04509B; }
  .btn-outline-primary:hover { background:#1A475F; border-color:#A7D0FF; color:#fff; }

  /* Activity list */
  .activity-list { display: grid; gap: 12px; }

  .activity-item {
    display:flex; align-items:center; gap:12px;
    border:1px solid #EDEFF2;
    background:#fff;
    border-radius:10px; /* matches your rounded list look */
    padding:12px 16px;
  }
  .activity-item:hover { border-color:#DBE6F9; box-shadow:0 1px 0 rgba(4,104,200,0.06); }

  .ai-icon {
    width:36px; height:36px; min-width:36px;
    border-radius:8px;
    display:grid; place-items:center;
    background:#F1F6FF; color:#0468C8; border:1px solid #E3EEFF;
  }
  .ai-content { flex:1 1 auto; min-width:0; }
  .ai-when { color:#6B7280; font-size:.875rem; line-height:1.2; }
  .ai-title { color:#101828; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .ai-actions { margin-left:auto; }
  .btn-view {
    //color:#0468C8; text-decoration:none; font-weight:500; //215A78 TODO
    color:#215A78; text-decoration:none; font-weight:500; //215A78 TODO
    padding:4px 0;
  }
  .btn-view:hover, .btn-view:focus { text-decoration:underline; color:#04509B; }

  /* Optional status pill (not shown in screenshot2, but supported) */
  .status-pill {
    display:inline-block; padding:2px 8px; border-radius:999px;
    font-size:.75rem; background:#EFF6FF; color:#04509B; margin-left:8px;
    border:1px solid #D8E8FF;
  }

  /* Loading skeletons */
  .skeleton { position:relative; overflow:hidden; background:#fff; }
  .skeleton::after {
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(240,244,255,.9) 45%, rgba(255,255,255,0) 90%);
    transform:translateX(-100%); animation: shimmer 1.2s infinite;
  }
  .s1, .s2 { border-radius:6px; background:#EEF2F7; }
  .s1 { width:180px; height:10px; margin-bottom:6px; }
  .s2 { width:240px; height:12px; }
  @keyframes shimmer { 100% { transform:translateX(100%);} }

  /* Small screens */
  @media (max-width: 576px){
    .ai-title { white-space:normal; }
  }


  /*** Spinner ***/
.pp-loading-overlay {
  position: fixed; inset: 0; z-index: 1050; /* above modals if needed */
}
.pp-loading-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.35);
}
.pp-loading-box {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; gap: 12px; align-items: center;
  color: #fff; 
}
.pp-loading-message { font-size: 1rem; }

  /* === FORCE subgrid wrapper to full width (even if inserted inside form layout) === */
#payables-subgrids-wrapper,
#payables-subgrids-staging,
.pp-subgrids-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  clear: both;
}

/* Remove nested container padding so the card/table uses full width */
.pp-subgrids-wrapper .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Make tables responsive on zoom/small screens */
.pp-subgrids-wrapper .table-responsive {
  overflow-x: auto;
}

/* Optional: prevent columns becoming unreadable when zoomed */
.pp-subgrids-wrapper table {
  width: 100%;
  min-width: 1000px; /* tune: increase if many columns */
}

/* Force wrapper to take full width */
.pp-subgrids-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

/* Make wide tables responsive */
.pp-subgrids-wrapper .table-responsive {
  overflow-x: auto;
}

/* Optional: prevent column collapse on zoom */
.pp-subgrids-wrapper table {
  width: 100%;
  min-width: 1000px;
}

/* --- Pagination (aligns with mockup) --- */
.pagination-centered {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.pagination .page-item { list-style: none; }
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #dcdfe4;
  color: #4a4a4a;
  background: #fff;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.pagination .page-link:hover { background: #f5f7fa; border-color: #cfd6df; }
.pagination .page-item.active .page-link {
  background: #0061fe; color: #fff; border-color: #0061fe;
  font-weight: 600; border-radius: 50%; min-width: 34px; height: 34px; padding: 0;
}
.pagination .page-item.disabled .page-link {
  color: #9aa4b2; background: #f7f8fa; border-color: #e5e9f0; pointer-events: none;
}
.pagination .page-ellipsis { color: #9aa4b2; padding: 0 4px; }
.pagination .icon { font-size: 14px; margin: 0 4px 0 0; }
@media (max-width: 480px) {
  .pagination { gap: 6px; }
  .pagination .page-link { min-width: 30px; height: 30px; }
  .pagination .page-item.active .page-link { min-width: 30px; height: 30px; }
  .pagination .hide-sm { display: none; }
}

.action-icons a { display: inline-flex; align-items: center; gap: .25rem; margin-right: .5rem; }
.action-icons i { font-size: 1rem; }
.table td, .table th { white-space: nowrap; }
.btn { border-radius: 8px; }

  /** ===== Header layout (Edit Invoice matches View Invoice) ===== **/
.invoice-header{
  display: flex;
  flex-direction: column;
  gap: 10px; /** space between actions row and title row **/
}

.invoice-header-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap; /** responsive **/
}

.invoice-actions-left{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.invoice-actions-right{
  display: inline-flex;
  align-items: center;
  margin-left: auto; /** keeps download pinned right **/
}

.invoice-page-title{
  font-size: 1.25rem;   /** H2 feel **/
  font-weight: 600;
  line-height: 1.2;
}

/** ===== Black button style (matches your other black buttons) ===== **/
.pp-btn-black{
  background-color:#1f1f1f !important;
  border:1px solid #1f1f1f !important;
  color:#ffffff !important;
  border-radius:8px !important;
  font-weight:600;
  font-size:14px;
  padding:6px 20px;
}

.pp-btn-black:hover,
.pp-btn-black:focus{
  background-color:#000000 !important;
  border-color:#000000 !important;
  color:#ffffff !important;
}

/** Mobile / zoom: Download becomes full width when wrapped **/
@media (max-width: 576px){
  .invoice-actions-right{
    width: 100%;
    justify-content: flex-start;
  }
  #downloadInvoiceBtn{
    width: 100%;
    justify-content: center;
  }
}

/** This style element is to match the "Download" button to that of create buttons on the Adjustment Requests page **/
/* Make the Entity List "Download" button match your other black buttons */
#adjustment-entitylist .entitylist-download,
#adjustment-entitylist .entitylist-download.btn,
#adjustment-entitylist .entitylist .entitylist-download {
  background: #1f1f1f !important;
  border: 1px solid #1f1f1f !important;
  color: #ffffff !important;

  border-radius: 8px;                 /* match your 8px preference */
  font-family: Inter, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 20px;

  width: auto;                         /* safer than fit-content */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#adjustment-entitylist .entitylist-download:hover {
  background: #000000 !important;
  border-color: #000000 !important;
}

/** Payable lines and Payable WT || Invoice and Invoice Lines WT **/
.entitylist-download{
    background-color: #1f1f1f !important;
     border-color: #323130;
    border-radius: 2px;
    font-family: Arial;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 20px;
    width: fit-content;
    border-style: solid;
    background-color: #323130;
    color: #fffcfc;
}