/* ---------- Theme tokens ---------- */ :root{ --brand-1:#0ea5e9; /* sky */ --brand-2:#6366f1; /* indigo */ --accent:#22c55e; /* green */ --glass-bg:rgba(255,255,255,0.08); --card-bg:rgba(255,255,255,0.06); } *{box-sizing:border-box} html,body{height:100%} body{ font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#f1f5f9; background:transparent; } /* ---------- App background (gradient lights) ---------- */ .app-bg{ position:fixed; inset:0; z-index:-2; background: radial-gradient(1000px 600px at 10% 10%, rgba(99,102,241,.35), transparent 60%), radial-gradient(900px 500px at 90% 20%, rgba(14,165,233,.35), transparent 60%), linear-gradient(135deg, #0b1220, #0b1220 60%, #0e1726); } /* ---------- Navbar ---------- */ .glass-nav{ background:linear-gradient(0deg, rgba(10,16,26,.45), rgba(10,16,26,.45)); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.08); } /* ---------- Cards ---------- */ .card-glass{ background:var(--card-bg); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.06); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.25); color:#e5e7eb; } .card-glass .card-title{color:#fff} .card-link{ text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; } .card-link:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.34); } /* ---------- Accent text ---------- */ .brand-accent{color:var(--brand-1)} .text-accent{color:var(--accent)} /* ---------- Progress bars ---------- */ .progress{ background-color:rgba(255,255,255,.1); height:10px; border-radius:999px; overflow:hidden; } .progress-bar{ background:linear-gradient(90deg, var(--brand-1), var(--brand-2)); } /* ---------- Tables ---------- */ .table{color:#e5e7eb} .table thead th{color:#cbd5e1; border-bottom-color:rgba(255,255,255,.08)} .table tbody tr{background:rgba(255,255,255,.02)} .table tbody tr:hover{background:rgba(255,255,255,.06)} /* ---------- Forms ---------- */ .form-control,.form-select{ background-color:rgba(255,255,255,.06); color:#e5e7eb; border:1px solid rgba(255,255,255,.12); } .form-control::placeholder{color:#94a3b8} /* ---------- Buttons ---------- */ .btn-primary{ background:linear-gradient(90deg, var(--brand-2), var(--brand-1)); border:none; } .btn-outline-light{ border-color:rgba(255,255,255,.35); color:#f8fafc } .btn-outline-light:hover{ background:rgba(255,255,255,.12) } /* ---------- Utilities ---------- */ .section-title{ font-weight:800; letter-spacing:.2px } .small-muted{ color:#94a3b8 } .icon-badge{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.08); font-size:22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } /* Fix dropdown font color */ select, select option { color: #111 !important; /* dark readable text */ background-color: #f9f9f9; /* softer background */ }
/* Client banner under navbar (dashboard only) */
.client-banner{
  margin: 10px auto 18px;
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .08em;
  color: #e8eef7;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 10px 16px;
  border-radius: 12px;
  width: min(720px, 92%);
  backdrop-filter: blur(2px);
}