/* Tenant-themable UI.
   Brand colours are injected by header.php as CSS variables on :root:
   :root{
     --brand-primary: #5B0021;
     --brand-secondary: #A83B5E;
     --bs-primary: var(--brand-primary);
     --bs-secondary: var(--brand-secondary);
     --bs-primary-rgb: 91, 0, 33;
     --bs-secondary-rgb: 168, 59, 94;
   }
*/

/* ---------- Global ---------- */
html, body { height: 100%; }
body { min-height: 100vh; }

/* Thin top brand bar */
body::before{ content:""; display:block; height:4px; background: var(--brand-primary); }

/* Links & pagination (no blue) */
a, .link-primary, .page-link{ color: var(--brand-primary); }
a:hover, .link-primary:hover{ color: color-mix(in srgb, var(--brand-primary) 85%, black); }
.page-item.active .page-link{ background-color: var(--brand-primary); border-color: var(--brand-primary); }

/* Focus rings */
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus{
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
  border-color: rgba(var(--bs-primary-rgb), .5);
}

/* ---------- Buttons ---------- */
.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary) 90%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-primary) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary) 85%, black);
}
.btn-outline-primary{
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-hover-color:#fff;
}
.btn-secondary{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-secondary) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-secondary) 90%, black);
}
.btn-outline-secondary{
  --bs-btn-color: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-bg: var(--brand-secondary);
  --bs-btn-hover-border-color: var(--brand-secondary);
  --bs-btn-hover-color:#fff;
}

/* Soft button used for action-strip (non-nav) */
.btn-soft{
  --_txt: var(--brand-primary);
  color: var(--_txt);
  background: rgba(var(--bs-primary-rgb), .08);
  border: 1px solid rgba(var(--bs-primary-rgb), .22);
}
.btn-soft:hover{ background: rgba(var(--bs-primary-rgb), .12); }
.btn-soft.active{
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

/* ---------- Badges ---------- */
.badge.text-bg-primary{ background-color: var(--brand-primary) !important; }
.badge.text-bg-secondary{ background-color: var(--brand-secondary) !important; }

/* ---------- Avatars & chips ---------- */
.avatar-chip{
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bs-primary); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:.9rem;
}
.counter-badge{ font-size:.7rem; transform: translate(-30%, -30%); }

/* Large circular avatar (Facebook-like) */
.avatar-circle-lg{
  width: 96px; height: 96px; border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--brand-primary); color:#fff;
  font-size: 2.25rem;
  border: 4px solid #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
}

/* ---------- Navbar ---------- */
.navbar .nav-link.active { font-weight: 600; }

/* ---------- Progress ---------- */
.progress-bar.brand-primary{ background-color: var(--brand-primary); }
.progress-bar.brand-secondary{ background-color: var(--brand-secondary); }

/* ---------- Tabs (pills) ---------- */
.nav-pills .nav-link{
  color: rgba(var(--bs-primary-rgb), .85);
  border: 1px solid rgba(var(--bs-primary-rgb), .15);
  background: rgba(var(--bs-primary-rgb), .05);
}
.nav-pills .nav-link:hover{ background: rgba(var(--bs-primary-rgb), .08); }
.nav-pills .nav-link.active{
  color:#fff; background: var(--brand-primary); border-color: var(--brand-primary);
}

/* ---------- Cards ---------- */
.card.brand-header{ border:none; overflow:hidden; }
.card.brand-header .card-header{
  /* Soft translucent tint, no hard gradient */
  background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), .06) 0%, rgba(var(--bs-primary-rgb), .02) 100%);
  backdrop-filter: saturate(1.1) blur(1.5px);
  color:#1f1f1f; border: 1px solid rgba(0,0,0,.05);
  padding-top: 1.25rem; padding-bottom: 1.25rem;
}

/* Meta chips (course / campus / intake) */
.meta-chips{
  display:flex; flex-wrap:wrap; gap:.5rem .75rem;
  margin-top:.75rem;
  margin-bottom:1.25rem; /* ensures separation from action-strip */
}
.meta-chips .kv-chip{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  color:#1f1f1f;
  padding:.45rem .95rem;
  border-radius:999px;
  font-size:.9rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.meta-chips .kv-chip i{ color: var(--brand-primary); font-size:1rem; }

/* Action strip (non-nav) */
.action-strip{ margin-top: 1rem; }
.action-strip .btn{ border-radius: 999px; }

/* Right-aligned reference pill */
.ref-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; color:#1f1f1f;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:.4rem .8rem;
  font-size:.9rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.ref-pill i{ color: var(--brand-primary); }

/* ---------- Tables ---------- */
.table thead th{ border-bottom: 1px solid rgba(var(--bs-primary-rgb), .2); }
.table-hover tbody tr:hover{ background-color: rgba(var(--bs-primary-rgb), .03); }

/* ---------- Upload dropzone ---------- */
.dropzone{
  border: 2px dashed rgba(var(--bs-primary-rgb), .25);
  border-radius: .75rem;
  background: rgba(0,0,0,.015);
  transition: .2s ease-in-out;
  cursor: pointer;
  padding: 2rem;
  text-align: center;
}
.dropzone.is-active{
  border-color: var(--brand-primary);
  background: rgba(var(--bs-primary-rgb), .06);
}
.dropzone .dz-icon{ color: var(--brand-primary); }

/* Queue rows */
.file-row:hover{ background: rgba(var(--bs-primary-rgb), 0.03); }
.file-icon{
  width: 36px; height: 36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: .5rem;
  background: rgba(var(--bs-primary-rgb), .08);
  color: var(--brand-primary);
}
.status-pill{
  font-size:.75rem; padding:.25rem .5rem; border-radius: 999px;
}

/* Utility key-value pill (grey) if needed elsewhere */
.kv-pill{
  display:inline-flex; gap:.5rem; align-items:center;
  background: rgba(var(--bs-primary-rgb), .06);
  color: rgba(0,0,0,.8);
  border: 1px solid rgba(var(--bs-primary-rgb), .18);
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: .85rem;
}

/* Alerts tinted to brand */
.alert-primary{
  --bs-alert-color: var(--brand-primary);
  --bs-alert-bg: rgba(var(--bs-primary-rgb), .08);
  --bs-alert-border-color: rgba(var(--bs-primary-rgb), .25);
}


/*----------Applications List Page Quick Filters ----------*/
.quick-filters .qf-card {
    border: 0;
    padding: 0;
    background: transparent;
  }
  .quick-filters .qf-card:focus { outline: none; }
  .quick-filters .qf-card .qf-card-inner {
    display: grid;
    grid-template-columns: 48px 1fr 20px;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: .85rem;
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), .07), rgba(var(--bs-primary-rgb), .03));
    border: 1px solid rgba(var(--bs-primary-rgb), .12);
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
    position: relative;
    overflow: hidden;
  }
  .quick-filters .qf-card .qf-card-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120px 60px at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(var(--bs-primary-rgb), .12), transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
  }
  .quick-filters .qf-card:hover .qf-card-inner,
  .quick-filters .qf-card:focus-visible .qf-card-inner {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(20, 20, 20, .06);
  }
  .quick-filters .qf-card:active .qf-card-inner::after { opacity: 1; }
  .quick-filters .qf-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
    border-radius: .8rem;
    background: rgba(var(--bs-primary-rgb), .1);
  }
  .quick-filters .qf-icon-wrap i {
    font-size: 1.25rem;
    color: var(--bs-primary);
  }
  .quick-filters .qf-title { font-weight: 600; }
  .quick-filters .qf-sub { font-size: .85rem; color: #6c757d; line-height: 1.2; }
  .quick-filters .qf-chevron { color: rgba(0,0,0,.35); transition: transform .15s ease; }
  .quick-filters .qf-card:hover .qf-chevron { transform: translateX(2px); }
  .quick-filters .qf-card[aria-pressed="true"] .qf-card-inner {
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), .14), rgba(var(--bs-primary-rgb), .06));
    border-color: rgba(var(--bs-primary-rgb), .35);
  }

/*----------Applications List Page Quick Filters ----------*/




  .upload-grid {
    display: grid;
    grid-template-columns: 1fr 220px 260px auto; /* name | type | progress | actions */
    align-items: center;
    gap: .75rem;
  }
  @media (max-width: 992px) {
    .upload-grid { grid-template-columns: 1fr 180px 200px auto; }
  }
  @media (max-width: 768px) {
    .upload-grid { grid-template-columns: 1fr; gap: .5rem; }
  }
  .dropzone.is-active {
    outline: 2px dashed #0d6efd;
    background-color: #eef4ff;
  }