:root{
  /* spacing */
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 20px;
  --gap-5: 28px;

  /* radius */
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 18px;

  /* shadow */
  --shadow-1: 0 8px 20px rgba(0,0,0,.06);
  --shadow-2: 0 12px 30px rgba(0,0,0,.10);

  /* surfaces */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #fbfcff;
  --border: rgba(17, 24, 39, 0.08);

  /* text */
  --text: #0f172a;
  --muted: #64748b;

  /* accent */
  --primary: #4361ee; /* sende var */
  --success: #2ecc71;
  --warning: #f39c12;
  --danger: #e74c3c;
  --info: #3498db;
}

body{
  background: var(--bg);
  color: var(--text);
}

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}

.table-container{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
}

.table{
  width: 100%;
  border-collapse: collapse;
}

.table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
}

.table tbody td{
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  font-size: 14px;
}

.table tbody tr:hover{
  background: rgba(67, 97, 238, 0.05);
}





























.sidebar{
  border-right: 1px solid var(--border);
  box-shadow: none; /* daha modern */
}

.sidebar-header{
  padding: 22px 18px;
}

.sidebar-header h3{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .2px;
}

.nav-item{
  margin: 4px 10px;
  border-radius: 12px;
  border-left: 0;
}

.nav-item:hover{
  border-left-color: transparent;
}

.nav-item.active{
  background: rgba(67, 97, 238, 0.10);
  box-shadow: inset 0 0 0 1px rgba(67,97,238,.18);
}







  /*23.01.2026 */
  
  
  /* ====== PRO UI BASE ====== */
:root{
  --bg: #0b1220;
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.085);
  --border: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);

  --primary: #4361ee;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #06b6d4;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  --font: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html, body{
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(67,97,238,.25), transparent 60%),
              radial-gradient(1000px 500px at 80% 10%, rgba(6,182,212,.18), transparent 55%),
              #070b14;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.card-title{
  font-size: 14px;
  letter-spacing: .2px;
  font-weight: 800;
}
.card-subtitle{
  margin-top:4px;
  font-size:12px;
  color: var(--muted);
  font-weight: 600;
}

/* Buttons */
.btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn-primary{
  background: rgba(67,97,238,.22);
  border-color: rgba(67,97,238,.45);
}
.btn-success{ background: rgba(34,197,94,.20); border-color: rgba(34,197,94,.40); }
.btn-danger{ background: rgba(239,68,68,.20); border-color: rgba(239,68,68,.40); }
.btn-sm{ padding: 8px 10px; border-radius: 10px; }

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
}
.badge-success{ border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.18); }
.badge-danger{ border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.18); }
.badge-warning{ border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.18); }
.badge-info{ border-color: rgba(6,182,212,.45); background: rgba(6,182,212,.18); }

/* Tables */
.table-container{
  overflow:auto;
}
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  text-align:left;
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
  background: rgba(10,14,26,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
}
.table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
}
.table tbody tr:hover{
  background: rgba(255,255,255,.04);
}

/* Helpers */
.muted{ color: var(--muted); }
.mono{ font-variant-numeric: tabular-nums; }
.right{ text-align:right; }

/* Dashboard grid */
.dash-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 14px;
}
.col-12{ grid-column: span 12; }
.col-8{ grid-column: span 8; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }

@media(max-width: 980px){
  .col-8,.col-6,.col-4{ grid-column: span 12; }
}

/* KPI */
.kpi{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 14px 16px;
}
.kpi-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(67,97,238,.18);
  color: var(--primary);
  border: 1px solid rgba(67,97,238,.28);
}
.kpi h3{
  margin:0;
  font-size: 20px;
  font-weight: 950;
}
.kpi p{
  margin: 4px 0 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.kpi-meta{
  margin-left:auto;
  text-align:right;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

/* Loading skeleton */
.skel{
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.10), rgba(255,255,255,.06));
  background-size: 200% 100%;
  animation: sk 1.2s infinite;
}
@keyframes sk{ 0%{ background-position: 200% 0 } 100%{ background-position: -200% 0 } }














/* dashboard.css (veya duzen.css) içine EKLE */

/* KPI icon system: tüm ikonlar aynı ölçü + aynı hizalama */
.kpi-icon{
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  flex: 0 0 54px;
}

.kpi-icon i{
  font-size:18px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

/* üst highlight */
.kpi-icon::before{
  content:"";
  position:absolute;
  inset:-45%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.26), transparent 55%);
  transform: rotate(15deg);
  pointer-events:none;
}

/* dış ring */
.kpi-icon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  pointer-events:none;
}

/* Presetler (çağrışım + uyum) */
.kpi-users{
  color: var(--primary);
  background: linear-gradient(135deg, rgba(67,97,238,.26), rgba(67,97,238,.08));
  border-color: rgba(67,97,238,.28);
  box-shadow: 0 12px 28px rgba(67,97,238,.14), 0 12px 28px rgba(0,0,0,.22);
}

.kpi-wallet{
  color: var(--success);
  background: linear-gradient(135deg, rgba(34,197,94,.24), rgba(34,197,94,.08));
  border-color: rgba(34,197,94,.26);
  box-shadow: 0 12px 28px rgba(34,197,94,.12), 0 12px 28px rgba(0,0,0,.22);
}

.kpi-bets{
  color: var(--warning);
  background: linear-gradient(135deg, rgba(245,158,11,.24), rgba(245,158,11,.08));
  border-color: rgba(245,158,11,.26);
  box-shadow: 0 12px 28px rgba(245,158,11,.12), 0 12px 28px rgba(0,0,0,.22);
}

.kpi-bonus{
  color: var(--info);
  background: linear-gradient(135deg, rgba(6,182,212,.24), rgba(6,182,212,.08));
  border-color: rgba(6,182,212,.26);
  box-shadow: 0 12px 28px rgba(6,182,212,.12), 0 12px 28px rgba(0,0,0,.22);
}

/* hover: kontrollü, premium */
.stat-card:hover .kpi-icon{
  transform: translateY(-1px);
}
.stat-card:hover .kpi-icon i{
  transform: scale(1.04);
}


















/* Sidebar pending badge */
.nav-item { position: relative; }
.nav-badge{
  margin-left:auto;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color:#fff;
  background:#ef4444;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 18px rgba(239,68,68,.28);
}














































/*betting.js css*/

/* ===== Betting UI ===== */
.betting-card{ overflow:hidden; }

.betting-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.betting-subtitle{
  font-size:12px;
  opacity:.75;
  margin-top:4px;
}

/* Filters */
.betting-filters{
  padding:12px 16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.bf-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
}

.bf-group label{
  font-size:12px;
  opacity:.75;
}

.bf-group input{
  height:40px;
  padding:0 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  outline:none;
  background:#fff;
}

.bf-group input:focus{
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.bf-grow{ flex:1; min-width:220px; }

.bf-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.bf-btn{
  height:40px;
  border-radius:10px;
  padding:0 14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  font-weight:600;
}

.bf-btn:hover{ background: rgba(0,0,0,.03); }
.bf-btn:active{ transform: translateY(1px); }

.bf-secondary{
  opacity:.9;
}

/* Body */
.betting-body{ padding:16px; }

.betting-loading{
  padding:16px;
  opacity:.9;
}

.betting-table-scroll{
  width:100%;
  overflow:auto;
}

.betting-table th, .betting-table td{
  white-space:nowrap;
}

.betting-actions{ text-align:right; }

/* Footer */
.betting-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}

.betting-total{ opacity:.85; }

.betting-pager{
  display:flex;
  align-items:center;
  gap:10px;
}

.betting-page{ opacity:.8; }

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
}

.badge-live{ font-weight:700; }
.badge-pre{ opacity:.85; }

/* ===== Modal ===== */
.betting-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(10, 12, 18, .55);
  backdrop-filter: blur(6px);
  z-index:9999;
  padding:18px;
}

.betting-modal-card{
  width:min(1050px, 96vw);
  max-height:86vh;
  overflow:hidden; /* body scroll içeride */
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
}

.betting-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));
}

.betting-modal-head h3{
  margin:0;
  font-size:16px;
  font-weight:800;
  letter-spacing:.2px;
}

.betting-modal-body{
  padding:16px;
  overflow:auto;
}

.betting-detail-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap:10px 12px;
  margin-bottom:14px;
}

.betting-kv{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}

.betting-kv .k{
  font-size:11px;
  opacity:.7;
  margin-bottom:4px;
}

.betting-kv .v{
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
}

.betting-detail-title{
  margin:10px 0 8px;
  font-size:13px;
  font-weight:800;
  opacity:.9;
}

/* Responsive */
@media (max-width: 900px){
  .bf-group{ min-width:160px; }
  .betting-detail-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

@media (max-width: 520px){
  .bf-actions{ width:100%; }
  .bf-actions .bf-btn{ flex:1; }
  .betting-detail-grid{ grid-template-columns:1fr; }
  .betting-modal{ padding:10px; }
}































/*reports.js cssleri */

/* ===== reports.css (js/reports.js + App router uyumlu) ===== */

.reports-card { overflow: hidden; }

.reports-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.reports-subtitle{
  font-size:12px;
  opacity:.75;
  margin-top:4px;
}

.reports-filters{
  padding:12px 16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.rf-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
}

.rf-group label{
  font-size:12px;
  opacity:.75;
}

.rf-group input,
.rf-group select{
  height:40px;
  padding:0 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  outline:none;
  background:#fff;
}

.rf-grow{ flex:1; min-width:220px; }

.rf-actions{
  display:flex;
  gap:8px;
}

.rf-btn{ height:40px; border-radius:10px; padding:0 14px; }
.rf-secondary{ opacity:.9; }

.reports-body{ padding:16px; }

.reports-loading{
  padding:16px;
  opacity:.9;
}

.reports-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap:12px;
}

.report-kpi{
  grid-column: span 3;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.report-kpi .rk-ico{
  width:44px;height:44px;min-width:44px;min-height:44px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,0,0,.10);
}

.report-kpi .rk-text{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.report-kpi .rk-value{
  font-weight:950;
  font-size:18px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.report-kpi .rk-label{
  font-size:12px;
  opacity:.75;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.reports-section{
  margin-top:12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}

.reports-section-head{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.reports-section-title{
  font-weight:900;
}

.reports-table-scroll{
  width:100%;
  overflow:auto;
}

.reports-table th, .reports-table td{
  white-space:nowrap;
}

.reports-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}

.reports-total{ opacity:.85; }
.reports-pager{ display:flex; align-items:center; gap:10px; }
.reports-page{ opacity:.8; }

/* ===== Modal ===== */
.reports-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);
  z-index:9999;
}

.reports-modal-card{
  width:min(1100px, 95vw);
  max-height:85vh;
  overflow:auto;
  background:#fff;
  border-radius:14px;
  padding:14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.reports-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.reports-modal-body{ margin-top:12px; }

.reports-detail-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap:10px 14px;
  margin-bottom:12px;
}

.reports-detail-title{
  margin:10px 0 8px;
}

/* Responsive */
@media (max-width: 1100px){
  .report-kpi{ grid-column: span 4; }
}

@media (max-width: 900px){
  .rf-group{ min-width:160px; }
  .report-kpi{ grid-column: span 6; }
  .reports-detail-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

@media (max-width: 520px){
  .rf-actions{ width:100%; }
  .rf-actions .rf-btn{ flex:1; }
  .report-kpi{ grid-column: span 12; }
  .reports-detail-grid{ grid-template-columns: 1fr; }
}























/*lang.js cssleri*/


/* css/style.css (veya uygun dosya) */
.lang-switcher { position: relative; margin-right: 12px; }
.lang-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:200px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  z-index:60;
}
.lang-item{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-weight:800;
}
.lang-item:hover{ background:var(--surface2); }
.lang-flag-img{ width:22px; height:16px; object-fit:cover; border-radius:3px; border:1px solid var(--border); }




/*mobil alt kısım cssi*/


/* ===== Mobile bottom-nav: yatay kaydırılabilir ===== */
@media (max-width: 992px){
  .bottom-nav{
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox */
  }
  .bottom-nav::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

  .bottom-nav a{
    flex: 0 0 auto;                  /* flex:1'i ez */
    min-width: 78px;                 /* item genişliği */
    padding: 8px 10px;
    white-space: nowrap;
  }
}

/*online.js cssleri*/
/* ===== MOBILE BOTTOM NAV (FULL SCROLL) ===== */
@media (max-width: 992px){

  .bottom-nav{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    padding: 0 10px;
    height: 64px;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }

  .bottom-nav::-webkit-scrollbar{
    display: none; /* Chrome / Safari */
  }

  .bottom-nav a{
    flex: 0 0 auto !important;   /* ÖNEMLİ */
    min-width: 78px;
    padding: 8px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    font-size: 11px;
    color: var(--muted);
  }

  .bottom-nav a.active{
    color: var(--primary);
    font-weight: 700;
  }
}




/* ===== ONLINE COUNT BADGE ===== */
.online-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 20px;
  height: 20px;
  padding: 0 6px;

  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;

  background: rgba(34,197,94,.18);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.35);
}






/*users cssleri*/






/* --- Light Theme Users Module Fixes --- */

:root[data-theme="light"] #users-main-container .btn {
  /* Renk geçişlerini yumuşatır */
  transition: all 0.2s ease-in-out;
  /* İçerik hizalamasını garantiye alır */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* İkon ve yazı arası boşluk */
}

/* İkonların rengini otomatik olarak butonun metin renginden (color) almasını sağlar */
:root[data-theme="light"] #users-main-container .btn i,
:root[data-theme="light"] #users-main-container .btn svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* --- Danger (Sil/İptal) Butonu --- */
:root[data-theme="light"] #users-main-container .btn.btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
}

/* Danger Hover Durumu (Kullanıcı üzerine gelince hafif koyulaşır) */
:root[data-theme="light"] #users-main-container .btn.btn-danger:hover,
:root[data-theme="light"] #users-main-container .btn.btn-danger:focus {
  background-color: #bb2d3b !important;
  border-color: #b02a37 !important;
}

/* --- Success (Onay/Ekle) Butonu --- */
:root[data-theme="light"] #users-main-container .btn.btn-success {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #ffffff !important;
}

/* Success Hover Durumu */
:root[data-theme="light"] #users-main-container .btn.btn-success:hover,
:root[data-theme="light"] #users-main-container .btn.btn-success:focus {
  background-color: #157347 !important;
  border-color: #146c43 !important;
}



/*messages cssleri*/

/* ===== Ortak Page Yapısı ===== */
.page {
  display: block;
  width: 100%;
}

.page h2 {
  font-size: 18px;
  font-weight: 700;
}

/* ===== Card ===== */
.card {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  border: 1px solid var(--border, #e5e7eb);
}

.card-body {
  padding: 16px;
}

/* ===== Input / Select / Textarea ===== */
.input,
.settings-input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #d1d5db);
  background: #fff;
  font-size: 14px;
}

.input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary, #2563eb);
}

/* ===== Table ===== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th {
  text-align: left;
  padding: 10px;
  font-weight: 700;
  border-bottom: 1px solid var(--border, #e5e7eb);
  white-space: nowrap;
}

.table td {
  padding: 10px;
  border-bottom: 1px solid var(--border, #f1f5f9);
  vertical-align: top;
}

.table tr:hover {
  background: rgba(0,0,0,0.02);
}

/* ===== Buttons ===== */
.btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border, #d1d5db);
  background: #f9fafb;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.btn:hover {
  background: #f3f4f6;
}

.btn-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-success {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.btn-danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.btn-sm {
  padding: 6px 10px;
  font-size: 12px;
}

/* ===== Modal İçerik Uyumu ===== */
.modal-content textarea,
.modal-content input {
  width: 100%;
}

/* ===== Mobil ===== */
@media (max-width: 768px) {
  .table th,
  .table td {
    padding: 8px;
    font-size: 13px;
  }

  .btn {
    width: 100%;
  }
}

/*messages gelen giden cssleri*/
.msg-page {
  display: block;
}

.msg-card {
  background: #0b1220;
  border: 1px solid #182235;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ---------- Header ---------- */
.msg-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px 14px;
  border-bottom: 1px solid #182235;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.msg-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.msg-title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #e5e7eb;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-subtitle {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Search Bar (HİZALI / DÜZENLİ) ---------- */
.msg-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.msg-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.msg-search-input {
  width: 360px;
  max-width: 52vw;
  height: 40px;
  box-sizing: border-box;

  background: #050b16;
  border: 1px solid #22314a;
  color: #e5e7eb;

  padding: 0 12px;
  border-radius: 10px;

  font-size: 14px;
  font-weight: 700;
  outline: none;

  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.msg-search-input:focus {
  border-color: rgba(37,99,235,.75);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

.msg-search-input::placeholder {
  color: #94a3b8;
  font-weight: 600;
}

.msg-search-btn {
  height: 40px;
  padding: 0 14px;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);

  background: #2563eb;
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  cursor: pointer;
  user-select: none;
  transition: filter .15s ease, transform .05s ease;
}

.msg-search-btn:hover { filter: brightness(1.06); }
.msg-search-btn:active { transform: translateY(1px); }

/* ---------- Body ---------- */
.msg-card-body {
  padding: 14px;
}

/* Loading / Empty / Error */
.msg-state {
  padding: 14px;
  border: 1px dashed #22314a;
  border-radius: 12px;
  color: #cbd5e1;
  background: rgba(255,255,255,.02);
  font-weight: 800;
}

.msg-state.muted { color: #9ca3af; }
.msg-state.error {
  border-color: rgba(239,68,68,.35);
  color: #fecaca;
  background: rgba(239,68,68,.08);
}

/* ---------- Table wrapper (scroll fix) ---------- */
.msg-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #182235;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}

/* ---------- Table ---------- */
.msg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 820px; /* tablo taşmasın, wrap scroll etsin */
}

.msg-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;

  text-align: left;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 900;
  letter-spacing: .35px;

  background: #0b1220;
  border-bottom: 1px solid #182235;
  padding: 12px 12px;
  white-space: nowrap;
}

.msg-table tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(24,34,53,.7);
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
}

.msg-table tbody tr:hover td {
  background: rgba(37,99,235,.06);
}

/* Cells */
.msg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.msg-right { text-align: right; }
.msg-muted { color: #94a3b8; font-weight: 700; }

/* Username cell */
.msg-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
}
.msg-user strong {
  font-weight: 950;
  color: #e5e7eb;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Subject / Title cell trimming */
.msg-subject {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Badges ---------- */
.msg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 22px;
  padding: 0 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;

  border: 1px solid rgba(255,255,255,.08);
}

.msg-badge.ok {
  background: rgba(16,185,129,.14);
  color: #a7f3d0;
  border-color: rgba(16,185,129,.28);
}

.msg-badge.pending {
  background: rgba(245,158,11,.14);
  color: #fde68a;
  border-color: rgba(245,158,11,.28);
}

.msg-badge.muted {
  background: rgba(148,163,184,.10);
  color: #cbd5e1;
  border-color: rgba(148,163,184,.20);
}

.msg-badge.danger {
  background: rgba(239,68,68,.12);
  color: #fecaca;
  border-color: rgba(239,68,68,.24);
}

/* ---------- Buttons in table ---------- */
.msg-btn {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: #e5e7eb;

  cursor: pointer;
  font-weight: 900;
  font-size: 12px;

  transition: background .15s ease, transform .05s ease, filter .15s ease;
}

.msg-btn:hover {
  background: rgba(255,255,255,.06);
}

.msg-btn:active { transform: translateY(1px); }

.msg-btn.primary {
  background: #2563eb;
  color: #fff;
  border-color: rgba(255,255,255,.10);
}
.msg-btn.primary:hover { filter: brightness(1.06); }

.msg-btn.success {
  background: rgba(16,185,129,.18);
  color: #a7f3d0;
  border-color: rgba(16,185,129,.25);
}

/* ---------- Composer (Admin -> User send form) ---------- */
.msg-compose {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.msg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg-label {
  font-size: 12px;
  font-weight: 900;
  color: #94a3b8;
  letter-spacing: .3px;
}

.msg-input,
.msg-textarea,
.msg-select {
  width: 100%;
  box-sizing: border-box;

  background: #050b16;
  border: 1px solid #22314a;
  color: #e5e7eb;

  border-radius: 10px;
  padding: 10px 12px;

  font-size: 14px;
  font-weight: 700;
  outline: none;

  transition: border-color .15s ease, box-shadow .15s ease;
}

.msg-input:focus,
.msg-textarea:focus,
.msg-select:focus {
  border-color: rgba(37,99,235,.75);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

.msg-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.35;
}

.msg-compose-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}

/* ---------- Modal body content for message detail ---------- */
.msg-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg-detail-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid #182235;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}

.msg-detail-item {
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 800;
}

.msg-detail-item b {
  color: #e5e7eb;
  font-weight: 950;
}

.msg-detail-body {
  padding: 12px;
  border: 1px solid #182235;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  color: #e5e7eb;
  font-weight: 700;
  white-space: pre-wrap;
  line-height: 1.45;
}

/* ---------- Responsive fixes ---------- */
@media (max-width: 860px) {
  .msg-card-header {
    flex-direction: column;
    align-items: stretch;
  }

  .msg-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .msg-search {
    width: 100%;
  }

  .msg-search-input {
    width: 100%;
    max-width: none;
    flex: 1;
  }

  .msg-compose {
    grid-template-columns: 1fr;
  }

  .msg-detail-head {
    grid-template-columns: 1fr;
  }
}







/*sol sidebar kaydırma cssleri*/
/* Sidebar kendi içinde kayabilsin */
.sidebar{
  height: 100vh;
  overflow-y: auto;
}

/* Eğer sidebar fixed ise (çoğu panelde öyle) */
.sidebar{
  position: fixed;
  top: 0;
  bottom: 0;      /* height:100vh yerine de olur */
}

/* Menü çok uzarsa nav kısmı kayabilsin */
.sidebar-nav{
  overflow-y: auto;
  max-height: calc(100vh - 140px); /* header+footer payı (gerekirse 140'ı ayarla) */
}