/* Itna UI Pro - Dark */
:root{
  --bg:#0b1220;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --primary:#2563eb;     /* Itna blue */
  --accent:#22c55e;      /* Itna green */
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --radius:16px;
  --radius2: 12px;
  --ring: 0 0 0 .25rem rgba(37,99,235,.25);
}
html,body{height:100%}
body{
  color:var(--text);
  background:
    radial-gradient(900px 500px at 10% 20%, rgba(37,99,235,.26), transparent 60%),
    radial-gradient(700px 450px at 85% 10%, rgba(34,197,94,.18), transparent 55%),
    radial-gradient(900px 600px at 50% 100%, rgba(59,130,246,.12), transparent 55%),
    var(--bg);
}
a{color:rgba(255,255,255,.9)}
a:hover{color:#fff}
.container{max-width:1180px}
.muted{color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.cardx{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:var(--shadow);
}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.72);
  border-bottom: 1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand-badge{
  width:34px;height:34px;border-radius:12px;
  background: linear-gradient(135deg, var(--primary), #60a5fa);
  box-shadow: 0 12px 30px rgba(37,99,235,.3);
}
.btn{border-radius: var(--radius2)!important}
.btn-primary{
  background:linear-gradient(135deg, var(--primary), #60a5fa)!important;
  border:none!important;
  box-shadow:0 10px 22px rgba(37,99,235,.25);
}
.btn-outline-secondary{
  background:transparent!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
}
.btn-outline-secondary:hover{background:var(--panel2)!important}
.btn-outline-danger{
  border:1px solid rgba(239,68,68,.35)!important;
  color:#fecaca!important;
}
.btn-outline-danger:hover{background:rgba(239,68,68,.12)!important}
.form-control,.form-select{
  border-radius: var(--radius2)!important;
  border:1px solid var(--border)!important;
  background: rgba(255,255,255,.06)!important;
  color: var(--text)!important;
}
.form-control::placeholder{color:rgba(255,255,255,.45)!important}
.form-control:focus,.form-select:focus{box-shadow:var(--ring)!important;border-color:rgba(37,99,235,.55)!important}
.table{color:var(--text)!important}
.table td,.table th{border-color:rgba(255,255,255,.08)!important}
.table thead th{color:rgba(255,255,255,.72)!important;border-bottom:1px solid var(--border)!important}
.badge{border-radius:999px!important;padding:.45em .7em!important;border:1px solid var(--border);background:rgba(255,255,255,.08)}
.sidebar{
  position:sticky; top:74px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.sidebar a{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  text-decoration:none;color:var(--muted);
}
.sidebar a:hover{background:var(--panel2);color:var(--text)}
.sidebar a.active{background:rgba(37,99,235,.18);color:#fff;border:1px solid rgba(37,99,235,.25)}
.kpi{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px
}
.kpi .kpi-label{color:var(--muted);font-size:.9rem}
.kpi .kpi-value{font-size:1.7rem;font-weight:800}
.hrline{height:1px;background:rgba(255,255,255,.10);margin:12px 0}

/* UI Fix: ensure text is readable on dark theme */
.btn-outline-primary{
  color: var(--text) !important;
  border: 1px solid rgba(96,165,250,.55) !important;
  background: rgba(37,99,235,.10) !important;
}
.btn-outline-primary:hover{
  background: rgba(37,99,235,.20) !important;
  color: #fff !important;
}
.btn-outline-info, .btn-outline-success, .btn-outline-warning{
  color: var(--text) !important;
  border-color: rgba(255,255,255,.20) !important;
}
.nav-link, .dropdown-item{ color: var(--text) !important; }
.nav-link:hover, .dropdown-item:hover{ background: var(--panel2) !important; }
.text-dark{ color: var(--text) !important; }
.bg-light{ background: rgba(255,255,255,.06) !important; }

/* UI Fix v1.8.2: topbar theme button + outline visibility */
#themeToggleBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:8px 12px !important;
  line-height:1 !important;
  color: var(--text) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
#themeToggleBtn:hover{ background: rgba(255,255,255,.10) !important; }
.btn-outline-secondary{ color: var(--text) !important; }
.btn-outline-secondary:hover{ color:#fff !important; }


/* UI Fix v1.8.5: ensure conversation buttons text is visible */
.btn-outline-light, .btn-outline-dark, .btn-outline-secondary, .btn-outline-primary,
.btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-danger{
  color: var(--text) !important;
}
.btn-outline-light:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover,
.btn-outline-success:hover, .btn-outline-info:hover, .btn-outline-warning:hover, .btn-outline-danger:hover{
  color: #fff !important;
}
.btn, .btn *{ color: inherit !important; }



/* Online agents pills */
.badge-online{
  background: linear-gradient(135deg, rgba(34,197,94,.85), rgba(16,185,129,.85)) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
.badge-offline{
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.70) !important;
  -webkit-text-fill-color: rgba(255,255,255,.70) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}




/* ==================================================
   UNIQUE "AURORA GLASS" UPGRADE + DARK TABLE FIX
   ================================================== */

/* More unique background layers */
body{
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(99,102,241,.30), transparent 60%),
    radial-gradient(800px 520px at 90% 15%, rgba(34,197,94,.22), transparent 55%),
    radial-gradient(900px 600px at 55% 95%, rgba(14,165,233,.18), transparent 55%),
    linear-gradient(180deg, #070b16 0%, #050814 100%) !important;
}

/* Glass cards look more unique */
.cardx,.card{
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.50) !important;
}

/* Inputs: deeper glass */
.form-control,.form-select{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Buttons: neon edge */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-dark{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(147,197,253,.30) !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover,
.btn-outline-dark:hover{
  background: rgba(37,99,235,.22) !important;
  border-color: rgba(147,197,253,.55) !important;
}

/* ==================================================
   KILL WHITE TABLE BLOCKS (wrapper + table)
   Works for Orders / Plans / Subscriptions / Packs
   ================================================== */

.table-responsive,
.table-responsive-sm,
.table-responsive-md,
.table-responsive-lg,
.table-responsive-xl,
.table-responsive-xxl{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Bootstrap utilities that force white */
.bg-white, .bg-light, .table-light,
.table.bg-white, .table.bg-light{
  background: rgba(255,255,255,.04) !important;
}

/* Force table itself (and nested) */
.table, .table *{
  background: transparent !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

.table thead th{
  background: rgba(255,255,255,.12) !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}
.table tbody tr{
  background: rgba(255,255,255,.04) !important;
}
.table-striped tbody tr:nth-of-type(odd){
  background: rgba(255,255,255,.06) !important;
}
.table-hover tbody tr:hover{
  background: rgba(99,102,241,.22) !important;
}
.table td, .table th{
  border-color: rgba(255,255,255,.10) !important;
}




/* ===== Mobile Cards (lists/tables) ===== */
.desktop-only{display:block}
.mobile-only{display:none}

@media (max-width:768px){
  .desktop-only{display:none}
  .mobile-only{display:block}
}

.mobile-card{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.mobile-card div{
  font-size: .92rem;
  margin-bottom: 6px;
  color: rgba(255,255,255,.92);
}

.mobile-card strong{
  color: rgba(147,197,253,.95);
}