aj-portfolio/public/css/admin.css

:root{
  --ink:#07060a;
  --glass: rgba(16, 14, 26, .62);
  --glass2: rgba(18, 15, 28, .62);
  --b: rgba(255,255,255,.10);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.50);
  --violet: rgba(139,92,246,.95);
  --fuchsia: rgba(217,70,239,.85);
}

html,body{height:100%}
body{background:var(--ink); color:#fff}

/* Helps native form controls (especially <select>) use dark UI */
html{ color-scheme: dark; }

/* Background */
.bg-aurora{
  position: fixed; inset: 0;
  background:
    radial-gradient(1000px 500px at 20% 20%, rgba(139,92,246,.30), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(217,70,239,.22), transparent 60%),
    radial-gradient(900px 700px at 55% 90%, rgba(167,139,250,.18), transparent 60%);
  z-index:-2;
}
.bg-grid{
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity:.12;
  mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 65%);
  z-index:-1;
}

/* Topbar */
.topbar-glass{
  background: var(--glass2);
  border: 1px solid var(--b);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.brand-badge{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  font-weight: 900;
  color:#0b0712;
}
.hero-gradient{
  background: linear-gradient(90deg, #a78bfa, #d946ef, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Links */
.navlink{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem .85rem;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(255,255,255,.78);
  transition: transform .12s ease, background .12s ease;
}
.navlink:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
.navlink i{ font-size: 1.1rem; }

/* Cards */
.card-glass{
  background: var(--glass);
  border: 1px solid var(--b);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 12px 50px rgba(0,0,0,.35);
}

/* Pills / tags */
.pill{
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--b);
  color: rgba(255,255,255,.80);
  font-size: .9rem;
}
.dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 18px rgba(52,211,153,.55);
}
.tag{
  font-size: .75rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(139,92,246,.18);
  border: 1px solid rgba(139,92,246,.25);
  color: rgba(255,255,255,.85);
}

/* Bootstrap overrides to match glass */
.form-control, .form-select, textarea{
  border-radius: 14px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.form-control:focus, textarea:focus, .form-select:focus{
  border-color: rgba(167,139,250,.55) !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,.18) !important;
}
.form-control::placeholder, textarea::placeholder{
  color: rgba(255,255,255,.35) !important;
}

/* Make <select> arrow + padding consistent and readable */
.form-select{
  padding-right: 2.6rem !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23a78bfa' d='M7 10l5 5l5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 18px 18px !important;
}

/* Dropdown list colors (works where browser allows styling) */
.form-select option{
  background-color: #0c0a14;
  color: rgba(255,255,255,.92);
}

/* Selected option contrast (supported in some browsers) */
.form-select option:checked{
  background: linear-gradient(135deg, rgba(139,92,246,.55), rgba(217,70,239,.45));
  color: #fff;
}

.btn-violet{
  border:0 !important;
  color:#0b0712 !important;
  font-weight:900 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia)) !important;
  box-shadow: 0 0 0 1px rgba(167,139,250,.25), 0 18px 40px rgba(139,92,246,.18);
}
.btn-violet:hover{ filter: brightness(1.08); transform: translateY(-1px); }

.btn-outline-light{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
}
.btn-outline-light:hover{ background: rgba(255,255,255,.10) !important; }

/* Optional: Bootstrap dropdown menus (if you use .dropdown anywhere) */
.dropdown-menu{
  background: rgba(16,14,26,.88) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  border-radius: 14px;
  padding: .4rem;
}
.dropdown-item{
  color: rgba(255,255,255,.86) !important;
  border-radius: 10px;
  padding: .55rem .7rem;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(167,139,250,.16) !important;
  color: #fff !important;
}
.dropdown-item.active,
.dropdown-item:active{
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85)) !important;
  color: #fff !important;
}

.table-dark{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  --bs-table-border-color: rgba(255,255,255,.08);
}
.table thead th{
  color: rgba(255,255,255,.70);
  border-bottom-color: rgba(255,255,255,.10) !important;
}