:root{
  --bg0:#071a12;
  --bg1:#0b2a1c;
  --card:rgba(16,38,28,.72);
  --line:rgba(170,255,214,.18);
  --text:#ecfff4;
  --muted:rgba(236,255,244,.72);
  --green:#2ee59d;
  --blue:#4cc3ff;
  --gold:#ffda6a;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body.app-bg{
  color:var(--text);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(46,229,157,.18), transparent 60%),
    radial-gradient(800px 560px at 80% 0%, rgba(76,195,255,.16), transparent 55%),
    radial-gradient(900px 620px at 50% 110%, rgba(255,218,106,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.glass-card{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,38,28,.86), rgba(10,26,19,.62));
  box-shadow: var(--shadow);
  color: var(--text);
}

.topbar{
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(8,26,18,.88), rgba(8,26,18,.65));
  border-bottom:1px solid var(--line);
}

.brand-icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(46,229,157,.28), rgba(76,195,255,.18));
  border:1px solid var(--line);
  font-size: 22px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.brand-title{ font-weight:800; letter-spacing:.3px; line-height:1.1; }
.brand-sub{ font-size: 12px; color: var(--muted); }

.icon-badge{
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(46,229,157,.22), rgba(76,195,255,.14));
  border:1px solid var(--line);
  font-size: 22px;
}

.table-wrap{
  border-radius: 16px;
  overflow: auto;
  border: 1px solid var(--line);
}

.table-dark{
  --bs-table-bg: rgba(5,16,11,.72);
  --bs-table-striped-bg: rgba(20,54,40,.35);
  --bs-table-hover-bg: rgba(46,229,157,.12);
  --bs-table-border-color: rgba(170,255,214,.14);
}
.table > :not(caption) > * > *{ padding: .62rem .68rem; }

.month-col{ min-width: 78px; font-weight: 700; }
.pay-cell{
  cursor: default;
  user-select: none;
}
.pay-cell .amt{
  display:inline-block;
  min-width: 52px;
  padding: .18rem .45rem;
  border-radius: 999px;
  background: rgba(46,229,157,.08);
  border:1px solid rgba(46,229,157,.15);
}
.row-inactive td{
  opacity: .72;
}
.player-dot{
  width:10px;height:10px;border-radius:50%;
  display:inline-block;
  box-shadow: 0 0 0 3px rgba(0,0,0,.22);
}
.dot-on{ background: var(--green); }
.dot-off{ background: rgba(236,255,244,.25); }

.sticky-col, .sticky-col2{
  position: sticky;
  left: 0;
  z-index: 2;
  background: rgba(5,16,11,.92);
}
.sticky-col2{
  left: 54px; /* width of # column approx */
  z-index: 2;
}

@media (max-width: 576px){
  .brand-title{ font-size: 14px; }
  .brand-sub{ font-size: 11px; }
  .month-col{ min-width: 72px; }
  .sticky-col2{ left: 46px; }
}

.kpi{
  display:flex; align-items:baseline; justify-content:space-between;
  padding: .55rem .75rem;
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(46,229,157,.06);
  margin-bottom: .65rem;
}
.kpi-label{ color: var(--muted); font-size: 12px; font-weight:700; }
.kpi-value{ font-size: 18px; font-weight: 900; }

.form-control, .form-select, .input-group-text{
  background-color: rgba(5,16,11,.62) !important;
  border-color: rgba(170,255,214,.18) !important;
  color: var(--text) !important;
}
.form-control::placeholder{ color: rgba(236,255,244,.50); }
.btn-primary{
  background: linear-gradient(135deg, rgba(46,229,157,.95), rgba(76,195,255,.85));
  border: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.btn-primary:hover{ filter: brightness(1.03); }
.btn-outline-light{ border-color: rgba(236,255,244,.35); color: var(--text); }
.btn-outline-light:hover{ background: rgba(236,255,244,.10); }

.modal-content.glass-card{
  background: linear-gradient(180deg, rgba(8,26,18,.92), rgba(10,26,19,.72));
}

/* ===========================
   VISIBILITY FIX PACK (v1.1)
   Paste at END of style.css
   =========================== */

body, .card, .modal-content, .topbar,
.table, .table th, .table td {
  color: var(--text) !important;
}

.text-muted, .form-text, small, .small {
  color: rgba(236,255,244,.80) !important; /* brighter muted */
}

/* Table header + footer stronger contrast */
.table thead th {
  color: var(--text) !important;
  background: rgba(5,16,11,.92) !important;
}

.table tfoot th {
  color: var(--text) !important;
  background: rgba(5,16,11,.92) !important;
}

/* Make table “dark” actually use light text everywhere */
.table-dark {
  --bs-table-color: var(--text) !important;
  --bs-table-striped-color: var(--text) !important;
  --bs-table-hover-color: var(--text) !important;
  color: var(--text) !important;
}

/* Make the “empty month bars” visible */
.pay-cell .amt {
  color: var(--text) !important;
}

/* Dropdowns + options (year select etc.) */
.form-select, .form-control, .input-group-text {
  color: var(--text) !important;
}

select option {
  background: #071a12 !important;
  color: var(--text) !important;
}

/* Some bootstrap buttons/pills can become unreadable */
.btn-light {
  color: #071a12 !important;
  font-weight: 700;
}

/* Sticky columns keep visible text */
.sticky-col, .sticky-col2 {
  color: var(--text) !important;
}