/* WhatsApp Campaign Manager — EarnNova-style Blue Mirror-Glass theme
   Deep blue glass surfaces, cyan accents, gold highlights.
   Same class names as before, so no Blade view changes are needed. */
:root{
  --bg:#04122e; --bg2:#071c44;
  --panel:rgba(16,52,110,.55); --panel2:rgba(10,36,80,.72);
  --glass:rgba(120,180,255,.10); --glass-brd:rgba(140,190,255,.35);
  --txt:#eaf3ff; --muted:#a9c3e8;
  --accent:#2f8bff; --accent2:#00defe; --gold:#f5c542;
  --green:#22c55e; --red:#fb4d6d; --amber:#f59e0b;
  --line:rgba(140,190,255,.35); --radius:18px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(0,222,254,.16), transparent 60%),
    radial-gradient(900px 480px at -10% 10%, rgba(47,139,255,.22), transparent 55%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 55%, #030b21 100%);
  background-attachment:fixed; min-height:100vh;
}
a{color:#8ec9ff; text-decoration:none}
a:hover{color:#cfe8ff}
header{
  position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(6,24,56,.88), rgba(6,24,56,.72));
  border-bottom:1px solid var(--glass-brd);
  color:#fff; padding:12px 20px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
header h1{font-size:22px; margin:0; font-weight:800; letter-spacing:.3px}
.header-user{margin-left:auto; display:flex; align-items:center; gap:12px; font-weight:600}
/* EarnNova-style left sidebar: glass panel, vertical links, glowing active pill */
.layout{display:flex; gap:18px; max-width:1240px; margin:20px auto; padding:0 16px 40px; align-items:flex-start}
.sidebar{
  width:262px; flex:0 0 262px; position:sticky; top:76px; border-radius:var(--radius); padding:18px 14px;
  background:linear-gradient(170deg, var(--panel), var(--panel2)); border:1px solid var(--glass-brd);
  box-shadow:var(--shadow); backdrop-filter:blur(10px);
  max-height:calc(100vh - 96px); overflow:auto;
}
.side-profile{display:flex; align-items:center; gap:11px; padding:8px 10px 14px; border-bottom:1px solid var(--glass-brd); margin-bottom:12px}
.side-profile strong{color:#fff}
.side-avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, #7db9ff, #1c5fd6 62%, #0a2c66); color:#fff; font-weight:800; font-size:17px;
  border:2px solid #d7e6ff; box-shadow:0 0 0 3px rgba(140,190,255,.35), 0 6px 14px rgba(0,0,0,.4);
}
.sidebar nav{display:flex; flex-direction:column; gap:4px}
.side-heading{margin:14px 6px 5px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.side-heading:first-child{margin-top:2px}
.side-link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; color:var(--txt);
  font-weight:600; font-size:15px; transition:background .18s, transform .18s, box-shadow .18s;
}
.side-link:hover{background:rgba(120,180,255,.12); transform:translateX(3px); color:#fff}
.side-link.active{
  background:linear-gradient(90deg, rgba(47,139,255,.5), rgba(0,222,254,.22));
  box-shadow:inset 0 0 0 1px rgba(0,222,254,.45), 0 8px 20px rgba(0,120,255,.30); color:#fff;
}
main{flex:1; min-width:0}
h2,h3{color:#fff}
.not-connected{
  background:rgba(110,18,40,.55); border:1px solid rgba(255,110,140,.65); color:#ffe0e6;
  padding:12px 14px; border-radius:14px; margin-bottom:16px;
}
.not-connected strong{font-size:15px}
/* Green glass notification (EarnNova toast style): connected-state notice,
   not a warning banner. Dismissable with the × button. */
.glass-notice{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  background:linear-gradient(165deg, rgba(20,90,50,.55), rgba(10,36,80,.72));
  border:1px solid rgba(52,255,150,.6); border-left:4px solid #22c55e;
  color:#d3ffe2; padding:12px 14px; border-radius:14px; margin-bottom:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.35); backdrop-filter:blur(10px);
  animation:noticeIn .45s cubic-bezier(.2,1.6,.4,1) both;
  transition:opacity .4s ease, transform .4s ease;
}
@keyframes noticeIn{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:translateY(0)}}
.glass-notice-hide{opacity:0; transform:translateY(-8px)}
.glass-notice a{color:#fff; font-weight:700; text-decoration:underline}
/* Bulk Sender info boxes: old light-theme inline colours (#fff3cd / #f1f1f1)
   became unreadable on the dark glass theme (light text on a light box).
   Dark glass versions with readable text: */
.bulk-warning{
  background:rgba(110,75,8,.55); border:1px solid rgba(255,200,80,.6); border-left:4px solid var(--amber);
  color:#fff3d6; padding:12px 14px; border-radius:14px; margin-bottom:16px;
}
.bulk-status{
  background:linear-gradient(165deg, var(--panel), var(--panel2)); border:1px solid var(--glass-brd);
  color:var(--txt); padding:12px 14px; border-radius:14px; margin-bottom:16px;
  box-shadow:var(--shadow); backdrop-filter:blur(10px);
}
.notice-close{
  background:transparent; border:0; color:#d3ffe2; font-size:20px; line-height:1;
  padding:0 2px; cursor:pointer; box-shadow:none;
}
.notice-close:hover{transform:none; box-shadow:none; color:#fff}
.notice-close::after{display:none}
.card{
  background:linear-gradient(165deg, var(--panel), var(--panel2));
  border:1px solid var(--glass-brd); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter:blur(10px);
  padding:22px; margin-bottom:16px; position:relative; overflow:hidden;
}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.stat{
  background:linear-gradient(165deg, var(--panel), var(--panel2));
  border:1px solid var(--glass-brd); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter:blur(10px); padding:18px;
}
.stat b{font-size:28px; display:block; color:#fff}
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:9px 8px; border-bottom:1px solid var(--glass-brd); vertical-align:top}
th{color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.5px}
input,select,textarea{
  width:100%; padding:11px 13px; border-radius:12px; border:1px solid var(--glass-brd);
  color:var(--txt); background:rgba(6,22,52,.65); font:inherit; outline:none;
  transition:box-shadow .2s, border-color .2s;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent2); box-shadow:0 0 0 4px rgba(0,222,254,.18)}
select option{background:#0a2450; color:var(--txt)}
label{font-weight:600; font-size:14px; display:block; margin:10px 0 4px; color:var(--txt)}
button,.btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--glass-brd); cursor:pointer;
  background:linear-gradient(180deg, rgba(80,155,255,.28), rgba(30,90,200,.28));
  color:#fff; font-weight:600; padding:9px 18px; border-radius:12px; font-size:15px;
  text-decoration:none; font:inherit; position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
button:hover,.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,100,255,.35)}
button::after,.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s ease;
}
button:hover::after,.btn:hover::after{transform:translateX(120%)}
button:disabled,.btn.disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn.danger{background:linear-gradient(180deg, rgba(251,77,109,.35), rgba(190,18,60,.35))}
.btn.ghost{background:rgba(255,255,255,.06); color:var(--txt)}
.flash{padding:12px 14px; border-radius:14px; margin-bottom:14px; border:1px solid var(--glass-brd)}
.flash.success{background:rgba(20,90,50,.55); border-color:rgba(52,255,150,.6); color:#d3ffe2}
.flash.error{background:rgba(110,18,40,.55); border-color:rgba(255,110,140,.65); color:#ffe0e6}
.badge{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px;
  border:1px solid var(--glass-brd); background:var(--glass); color:var(--muted);
}
.badge.ok{background:rgba(10,90,45,.55); border-color:rgba(80,255,160,.55); color:#dcffe9}
.badge.warn{background:rgba(110,75,8,.5); border-color:rgba(255,200,80,.6); color:#fff3d6}
.badge.bad{background:rgba(110,18,40,.55); border-color:rgba(255,110,140,.65); color:#ffe0e6}
.progress{height:14px; background:rgba(255,255,255,.08); border-radius:8px; overflow:hidden}
.progress>div{height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2))}
form.inline{display:inline}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row>*{flex:1; min-width:180px}
small,.muted{color:var(--muted)}
footer{color:var(--muted); font-size:13px; text-align:center; padding:20px; border-top:1px solid var(--glass-brd); margin-top:40px; background:rgba(4,16,40,.7)}
@media(max-width:820px){
  .layout{flex-direction:column; padding:0 10px 30px}
  .sidebar{width:100%; flex:none; position:static; max-height:none}
  .sidebar nav{flex-direction:row; flex-wrap:wrap}
  .side-link{flex:1 1 160px}
}
@media(max-width:640px){
  table{font-size:14px}
  header h1{font-size:18px}
  .card,.stat{padding:16px}
}

/* Import preview number list: beautiful flowing chips in one block,
   instead of hundreds of separate lines (498 numbers = 498 lines). */
.chip-list{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; border:1px solid var(--glass-brd); background:var(--glass); color:var(--txt); font-size:13.5px}
.chip-bad{border-color:rgba(255,110,140,.65); background:rgba(110,18,40,.55); color:#ffe0e6}
.chip-warn{border-color:rgba(255,200,80,.6); background:rgba(110,75,8,.5); color:#fff3d6}