:root{
  --rp-bg:#070a0f;
  --rp-card: rgba(255,255,255,.04);
  --rp-border: rgba(255,255,255,.08);
  --rp-text:#e6edf3;
  --rp-muted: rgba(230,237,243,.60);
  --rp-accent:#65d46e;
  --rp-radius:16px;
  --rp-shadow:0 18px 60px rgba(0,0,0,.55);
}

html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 85% 12%, rgba(101,212,110,.14), transparent 55%),
    linear-gradient(180deg,#0b0f15,#070a0f);
  color: var(--rp-text);
}

a{ color: rgba(230,237,243,.75); }
a:hover{ color: rgba(230,237,243,.95); }

.rp-card{
  background: var(--rp-card);
  border:1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  box-shadow: var(--rp-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.rp-muted{ color: var(--rp-muted); }

.form-control, .form-select, textarea{
  background: rgba(255,255,255,.04) !important;
  color: var(--rp-text) !important;
  border-color: var(--rp-border) !important;
}
.form-control:focus, .form-select:focus, textarea:focus{
  box-shadow: 0 0 0 1px rgba(101,212,110,.25) !important;
  border-color: rgba(101,212,110,.45) !important;
  outline: none !important;
}

.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--rp-text);
  --bs-table-border-color: var(--rp-border);
}

.sidebar{
  width:320px;
  min-width:320px;
  border-right:1px solid var(--rp-border);
  background: transparent;
}

.navbar{
  border:1px solid var(--rp-border);
  background: var(--rp-card) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--rp-radius);
  box-shadow: var(--rp-shadow);
  max-width: 1500px;
  margin: 18px auto 12px;
}

.footer{
  border:1px solid var(--rp-border);
  background: var(--rp-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--rp-radius);
  box-shadow: var(--rp-shadow);
  max-width: 1500px;
  margin: 12px auto 18px;
}
.footer .container-fluid{ padding-left:22px; padding-right:22px; }

.icon-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  border-radius:10px;
  background:#0b1628;
  border:1px solid var(--rp-border);
  margin-right:8px;
}

.badge-soft{

  border:1px solid var(--rp-border);
  color:var(--rp-text);
}


/* Layout container to match reference */

/* main area (sidebar + content) */
body > .d-flex{
  max-width:1500px;
  margin:0 auto 12px;
  gap:18px;
  padding: 0 22px;
}
@media (max-width: 992px){
  body > .d-flex{ padding:0 12px; }
  .sidebar{ width:100%; min-width:0; border-right:none; }
}

/* Autofill color fix (Chrome) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill{
  -webkit-text-fill-color: var(--rp-text);
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0) inset;
  transition: background-color 5000s ease-in-out 0s;
}


/* ===== Reference-like Sidebar / Menu / Logo ===== */

.rp-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 8px 14px;
  text-decoration:none;
}

.rp-logo-ring{
  width:66px;
  height:66px;
  border-radius:50%;
  padding:3px;
  background: conic-gradient(from 180deg, #65d46e, #3aa7ff, #b06cff, #ff6aa2, #65d46e);
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  flex:0 0 auto;
}

.rp-logo-ring > .rp-logo-inner{
  width:100%;
  height:100%;
  border-radius:50%;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.rp-logo-inner img{
  width:36px;
  height:36px;
  display:block;
}

.rp-brand-title{
  font-weight:700;
  line-height:1.05;
  color: var(--rp-text);
}
.rp-brand-sub{
  font-size:.82rem;
  color: var(--rp-muted);
}

.rp-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 14px 0 8px;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(230,237,243,.45);
}

.rp-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rp-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background: rgba(255,255,255,.02);
  text-decoration:none;
  color: rgba(230,237,243,.80);
  transition: .12s ease;
}

.rp-nav a:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  color: rgba(230,237,243,.95);
  transform: translateY(-1px);
}

.rp-nav a.active{
  background: rgba(101,212,110,.12);
  border-color: rgba(101,212,110,.25);
  color: rgba(230,237,243,.95);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.rp-nav .bi{
  opacity:.95;
}

.rp-mini{
  display:flex;
  gap:10px;
}
.rp-mini .rp-mini-item{
  flex:1;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.rp-mini .k{
  font-size:.75rem;
  color: rgba(230,237,243,.55);
}
.rp-mini .v{
  font-weight:700;
}

/* Login card tweaks */
.rp-login .form-control{
  border-radius: 12px;
}
.rp-login .form-check-label{
  color: rgba(230,237,243,.70);
}

/* Make sidebar cards a bit tighter like reference */
.sidebar .rp-card{
  box-shadow: 0 16px 50px rgba(0,0,0,.50);
}


/* ============================
   BACKGROUND REPEAT FIX (REF)
   Bu blok en altta kalsın.
============================ */
html, body{
  min-height: 100%;
}

body{
  /* arka plan tekrar etmesin */
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

/* Eğer arka plan app-shell / wrapper'a verildiyse onu da sabitle */
.app-shell, .app-bg, .bg, .wrap, .wrapper{
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

/* Bazı temalarda pattern şu şekilde geliyor: background-size: 40px 40px; bunu ez */
body, .app-shell, .app-bg{
  background-size: cover !important;
}


/* ============================
   TABLE HOVER TEXT COLOR FIX
   (Aktif online radyo bulunamadı yazısı siyaha dönmesin)
   Bu blok EN ALTTA kalsın.
============================ */

/* Bootstrap table-hover satır hover'ında yazı rengi bazen koyulaşıyor */
.table-hover > tbody > tr:hover > *,
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th{
  color: inherit !important;
}

/* Boş sonuç satırı için ekstra garanti */
.table tbody td .text-muted{
  color: rgba(230,237,243,.65) !important;
}

/* Eğer no-data mesajı farklı class ile gelirse */
.no-data, .empty-row, .empty-state{
  color: rgba(230,237,243,.65) !important;
}

/* ============================
   WELCOME TEXT FIX
============================ */

/* Eski hoş geldin yazısını bastır */
.welcome,
.welcome-text,
.alert-success,
.alert-info{
  background: transparent !important;
  color: #e6edf3 !important;
}

/* Yeni hoş geldin alanı (referans stil) */
.welcome-box{
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.02)
  );
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.welcome-box strong{
  color: #65d46e;
}

.welcome-box span{
  color: rgba(230,237,243,.75);
}