/* Staff Panel - Dark Mode polish
   Drop this at: public/styles/app.css (or wherever /styles/app.css maps to)
*/

:root{
  --sp-radius: 18px;
  --sp-border: rgba(255,255,255,.08);
  --sp-shadow: 0 18px 60px rgba(0,0,0,.35);
}

html[data-bs-theme="dark"]{
  --bs-body-bg: #0b0f19;
  --bs-body-bg-rgb: 11, 15, 25;
  --bs-body-color: rgba(255,255,255,.92);
  --bs-border-color: rgba(255,255,255,.10);
  --bs-secondary-color: rgba(255,255,255,.62);
  --bs-tertiary-bg: rgba(255,255,255,.04);
}

html[data-bs-theme="light"]{
  --sp-border: rgba(0,0,0,.08);
  --sp-shadow: 0 18px 60px rgba(0,0,0,.12);
}

.app-body{
  min-height: 100vh;
  background:
    radial-gradient(1200px 900px at 15% 0%, rgba(120, 82, 255, .20), transparent 60%),
    radial-gradient(900px 700px at 85% 10%, rgba(0, 255, 200, .14), transparent 55%),
    radial-gradient(800px 600px at 50% 100%, rgba(255, 77, 149, .10), transparent 55%),
    var(--bs-body-bg);
}

.app-nav{
  background: rgba(var(--bs-body-bg-rgb), .70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.app-brand-mark{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(120,82,255,.95), rgba(0,255,200,.75));
  color: rgba(255,255,255,.95);
  box-shadow: 0 10px 30px rgba(120,82,255,.25);
}

.app-userbtn{
  border: 1px solid var(--sp-border);
  background: rgba(255,255,255,.02);
}
.app-userbtn:hover{
  background: rgba(255,255,255,.05);
}

.app-avatar-fallback{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  border: 1px solid var(--sp-border);
  background: rgba(255,255,255,.04);
}

.app-theme-toggle{
  border: 1px solid var(--sp-border) !important;
}

.app-card{
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  background: rgba(255,255,255,.03);
  box-shadow: var(--sp-shadow);
}

.app-card .card-body{
  padding: 1.25rem;
}

.app-card-footer{
  border-top: 1px solid var(--sp-border);
  background: rgba(255,255,255,.02);
}

.app-topbar{
  padding: 18px 18px;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 70px rgba(0,0,0,.25);
}

.app-pill{
  background: rgba(255,255,255,.05) !important;
  color: var(--bs-body-color) !important;
}

.app-stat-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sp-border);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.85);
}

.app-tabs .nav-link{
  border-radius: 999px !important;
  border: 1px solid var(--sp-border);
  background: rgba(255,255,255,.02);
  color: var(--bs-body-color);
  padding: .5rem .9rem;
}
.app-tabs .nav-link:hover{
  background: rgba(255,255,255,.05);
}
.app-tabs .nav-link.active{
  background: linear-gradient(135deg, rgba(120,82,255,.85), rgba(0,255,200,.35));
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(120,82,255,.25);
}

.app-divider{
  height: 1px;
  background: var(--sp-border);
}

.app-kpi{
  border: 1px solid var(--sp-border);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 14px 14px;
}
.app-kpi-label{
  font-size: .8rem;
  color: var(--bs-secondary-color);
}
.app-kpi-value{
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}
.app-kpi-sub{
  font-size: .85rem;
}

.app-empty{
  text-align: center;
  padding: 18px;
  border: 1px dashed var(--sp-border);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
}
.app-empty i{
  font-size: 1.6rem;
  opacity: .85;
}

.app-search .input-group-text{
  border-color: var(--sp-border) !important;
  background: rgba(255,255,255,.02);
}
.app-search .form-control{
  border-color: var(--sp-border) !important;
  background: rgba(255,255,255,.02);
}

.app-code{
  display: inline-block;
  padding: .2rem .45rem;
  border-radius: 10px;
  border: 1px solid var(--sp-border);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.85);
}

.table{
  --bs-table-bg: transparent;
}
.table thead th{
  color: var(--bs-secondary-color);
  font-weight: 600;
  border-bottom: 1px solid var(--sp-border) !important;
}
.table tbody tr{
  border-color: var(--sp-border) !important;
}
.table-hover > tbody > tr:hover > *{
  --bs-table-bg-state: rgba(255,255,255,.04);
}

.modal-content.app-modal{
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  background: rgba(20, 24, 36, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.app-hero{
  padding: 3.5rem 0 1rem;
}

.app-icon-bubble{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sp-border);
  background: rgba(255,255,255,.03);
}
.app-icon-bubble i{
  font-size: 1.25rem;
}

/* Buttons: slightly softer */
.btn{
  border-radius: 14px;
}
.btn-sm{
  border-radius: 12px;
}

/* Progress bar round */
.progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}
.progress-bar{
  border-radius: 999px;
}

/* Better focus */
:focus-visible{
  outline: 2px solid rgba(120,82,255,.55);
  outline-offset: 2px;
}