:root { --brand:#6c5ce7; --bg:#f8f9fa; --text:#222; --card:#fff; --border:#e5e7eb; }
[data-theme="dark"] { --bg:#0b0b0e; --text:#f0f0f0; --card:#15161a; --border:#2a2b31; }
body { background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; }
.app-header { background:var(--card); border-bottom:1px solid var(--border); }
.app-footer { background:var(--card); border-top:1px solid var(--border); color:var(--text); }
.card { background:var(--card); border-color:var(--border); }
.table thead th { background:var(--card); }
.blink { animation: pulse 1s infinite; } @keyframes pulse { 0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;} }
.btn-brand { background:var(--brand); color:#fff; } .btn-brand:hover { filter:brightness(0.9); }
.table-responsive { overflow-x:auto; }
.modal-content { background:var(--card); color:var(--text); }
.form-control, .form-select { color:var(--text); border-color:var(--border); }
a { color: var(--brand); } a:hover { color: #4b4bff; }
@media (max-width: 767px) { .table { display:none; } .mobile-cards { display:block; } div.dataTables_filter, div.dataTables_paginate, div.dataTables_info { display:none; }}
@media (min-width: 768px) { .mobile-cards { display:none; } }

/* Patch: cap charts height to 200px; keep dark mode compatibility */
canvas { max-height:200px !important; height:200px !important; }
#colControls .form-check { min-width: 140px; }
/* Dark mode header styles (Bootstrap color mode) */
body[data-bs-theme="dark"] .app-header {
  background-color: #0f1113 !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body[data-bs-theme="dark"] .app-header .navbar-brand,
body[data-bs-theme="dark"] .app-header .navbar-brand * {
  color: #fff !important;
}
body[data-bs-theme="dark"] .app-header .navbar-brand img {
  filter: brightness(1.1) contrast(1.05);
}
/* Keep dropdown above sticky header and DataTables elements */
.app-header .dropdown-menu {
  z-index: 1085; /* > .modal-backdrop (1050), > navbar (varies), safe for sticky */
}
/* Make sure the page length dropdown is visible on desktop */
@media (min-width: 768px){
  div.dataTables_length {
    display: block !important;
    visibility: visible !important;
  }
  div.dataTables_length select {
    min-width: 80px;
  }
}
/* =========================
   Request View — Attachments
   (safe, scoped tweaks)
   ========================= */
:root {
  --muted: #8a8f98;
}

.modal-content .list-group-item + .list-group-item strong,
.modal-content .list-group-item > strong {
  font-weight: 600;
}

/* Attachments title line */


/* Attachment list container */
.modal-content .list-group-item .list-unstyled.mb-2 {
  margin: 8px 0 10px 0;
  padding: 0;
}

/* Each attachment row */
.modal-content .list-group-item .list-unstyled.mb-2 li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: .65rem;
  /*background: color-mix(in oklab, var(--card) 92%, transparent);*/
  transition: border-color .2s ease, background-color .2s ease, transform .15s ease;
}
.modal-content .list-group-item .list-unstyled.mb-2 li + li {
  margin-top: 8px;
}
.modal-content .list-group-item .list-unstyled.mb-2 li:hover {
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
  transform: translateY(-1px);
}

/* The "Download: filename" link */
.modal-content .list-group-item .list-unstyled.mb-2 a {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  min-width: 0;              /* allow ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-content .list-group-item .list-unstyled.mb-2 a::before {
  content: "🔽";
  font-size: 1rem;
  opacity: .85;
}

/* The "New" badge and meta text */
.modal-content .list-group-item .list-unstyled.mb-2 .badge {
  border-radius: 999px;
  padding: .25rem .55rem;
  font-weight: 700;
  letter-spacing: .2px;
}
.modal-content .list-group-item .list-unstyled.mb-2 .badge.bg-success {
  background: #11a66a !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, #11a66a 20%, transparent);
}
.modal-content .list-group-item .list-unstyled.mb-2 small {
  color: var(--muted);
  white-space: nowrap;
}

/* Upload row (form below list) */
.modal-content form[action*="request_upload_attachments.php"] {
  margin-top: 8px;
}
.modal-content form[action*="request_upload_attachments.php"] .input-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.modal-content form[action*="request_upload_attachments.php"] .form-control[type="file"] {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: .5rem;
}
.modal-content form[action*="request_upload_attachments.php"] .btn {
  border-radius: .55rem;
  padding: 10px 14px;
  font-weight: 600;
}
.modal-content form[action*="request_upload_attachments.php"] .btn-primary,
.modal-content form[action*="request_upload_attachments.php"] .btn.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.modal-content form[action*="request_upload_attachments.php"] .btn-primary:hover,
.modal-content form[action*="request_upload_attachments.php"] .btn.btn-brand:hover {
  filter: brightness(.92);
}

/* Helper text under uploader */
.modal-content form[action*="request_upload_attachments.php"] .form-text {
  margin-top: 6px;
  color: var(--muted);
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        --bs-modal-width: 1200px;
    }
}
.blink {
    animation: blink 1s linear infinite;
    color: red !important;
}

@keyframes blink {
    50% { opacity: 1; }
    100% { opacity: 0; }

}
}



/* Custom badge colors */
.badge-custom-custom-blue { background-color: #3498db !important; color: white; }
.badge-custom-custom-gray { background-color: #95a5a6 !important; color: white; }
.badge-custom-custom-custom-red { background-color: #e74c3c !important; color: white; }
.badge-custom-custom-orange { background-color: #f39c12 !important; color: white; }
.badge-custom-custom-purple { background-color: #9b59b6 !important; color: white; }
.badge-custom-custom-dark { background-color: #2c3e50 !important; color: white; }
.badge-custom-custom-light { background-color: #ff3dcf !important; color: #fff; }
.badge-custom-custom-green { background-color: #27ae60 !important; color: white; }
/* ------------------------------------------------------------------
   Tabs: force Bootstrap tab-pane display rules
   Fixes a layout issue where hidden tab panes still take vertical space
   on some pages (Accounts/Admin dashboards).
-------------------------------------------------------------------*/
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* Payment Portal table layout and custom views */
.pp-payment-table thead th {
  white-space: normal !important;
  line-height: 1.15;
  vertical-align: middle;
  text-align: left;
  font-size: .92rem;
  letter-spacing: .01em;
  padding: .78rem .7rem !important;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-bottom: 2px solid var(--bs-border-color, #dee2e6) !important;
}
.pp-payment-table tbody td {
  vertical-align: middle;
  padding-top: .62rem;
  padding-bottom: .62rem;
}
.pp-payment-table thead th:nth-child(1) { min-width: 58px; }
.pp-payment-table thead th:nth-child(2) { min-width: 120px; }
.pp-payment-table thead th:nth-child(3) { min-width: 180px; }
.pp-payment-table thead th:nth-child(6) { min-width: 118px; }
.pp-payment-table thead th:nth-child(8),
.pp-payment-table thead th:nth-child(9),
.pp-payment-table thead th:nth-child(10) { min-width: 118px; }
.pp-payment-table thead th:last-child { min-width: 92px; }
.pp-viewbar {
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-body-bg, #fff);
}
.pp-viewbar .form-label { color: var(--bs-secondary-color, #6c757d); }
.pp-col-item { display:flex; align-items:center; gap:.35rem; white-space:normal; }
.pp-view-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1080;
  background: rgba(33,37,41,.94);
  color: #fff;
  padding: .55rem .85rem;
  border-radius: .6rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.pp-view-toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 991.98px) {
  .pp-viewbar { display:none !important; }
}