/* =============================================================================
   Cher's LLC WhatsApp Dashboard — styled to match register.chersllc.com
   Soft-blue palette, Poppins font, frosted-glass cards, wavy background.
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --primary:#5b7fc7;
  --primary-light:#93b4e8;
  --primary-dark:#3b5998;
  --accent:#7ba3d8;
  --success:#22c55e;
  --danger:#ef4444;
  --warn:#f59e0b;
  --bg-light:#ffffff;
  --bg-card:rgba(255,255,255,0.95);
  --text:#1e293b;
  --text-muted:#64748b;
  --border:rgba(147,180,232,0.4);
  --input-border:#cbd5e1;
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:'Poppins', sans-serif;
  color:var(--text);
  line-height:1.55;
  background:var(--bg-light);
  /* Same gentle wave pattern as the registration site */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M-50 150 Q200 50 400 200 Q600 350 800 200 Q1000 50 1200 200 Q1400 350 1500 250' fill='none' stroke='%2393b4e8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M-100 350 Q100 250 300 400 Q500 550 700 400 Q900 250 1100 400 Q1300 550 1500 450' fill='none' stroke='%2393b4e8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M0 550 Q200 450 400 600 Q600 750 800 600 Q1000 450 1200 600 Q1400 750 1500 650' fill='none' stroke='%2393b4e8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M-80 750 Q150 650 350 800 Q550 950 750 800 Q950 650 1150 800 Q1350 950 1500 850' fill='none' stroke='%2393b4e8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M100 50 Q350 150 500 50 Q700 -50 900 50 Q1100 150 1300 50 Q1450 -30 1500 30' fill='none' stroke='%2393b4e8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M-50 500 Q150 400 350 500 Q550 600 750 500 Q950 400 1150 500 Q1350 600 1500 520' fill='none' stroke='%2393b4e8' stroke-width='2' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

a { color:var(--primary-dark); }

/* --- Masthead / top bar ---------------------------------------------------- */
.topbar {
  background:var(--bg-card);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  box-shadow:0 4px 24px rgba(147,180,232,0.15);
}
.topbar .brand { display:flex; align-items:center; gap:12px; }
.topbar .brand img { height:42px; width:auto; }
.topbar h1 {
  font-size:19px; margin:0; font-weight:600;
  background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.topbar .nav { font-size:14px; color:var(--text-muted); }
.topbar .nav a { color:var(--primary-dark); text-decoration:none; font-weight:500; }
.topbar .nav a:hover { text-decoration:underline; }

.wrap { max-width:1040px; margin:0 auto; padding:22px 18px; }

/* --- Status panel ---------------------------------------------------------- */
.status-panel { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 22px; }
.stat {
  background:var(--bg-card); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:16px;
  padding:14px 16px; flex:1; min-width:155px;
  box-shadow:0 4px 24px rgba(147,180,232,0.15), 0 1px 3px rgba(0,0,0,0.05);
}
.stat .label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:500; }
.stat .value { font-size:19px; font-weight:600; margin-top:3px; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.dot.ok { background:var(--success); } .dot.bad { background:var(--danger); } .dot.warn{ background:var(--warn);}
.stat.money { background:linear-gradient(135deg, rgba(34,197,94,0.12), rgba(91,127,199,0.10)); border-color:rgba(34,197,94,0.35); }
.stat.money .value { color:#15803d; font-size:22px; }

/* --- Cards / tables -------------------------------------------------------- */
.card {
  background:var(--bg-card); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:20px; overflow:hidden;
  box-shadow:0 4px 24px rgba(147,180,232,0.15), 0 1px 3px rgba(0,0,0,0.05);
}
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--border); font-size:14px; }
th { background:rgba(147,180,232,0.10); color:var(--text-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:rgba(147,180,232,0.07); }

.badge { display:inline-block; padding:3px 11px; border-radius:20px; font-size:12px; font-weight:600; }
.badge.new{ background:rgba(147,180,232,0.18); color:var(--primary-dark); }
.badge.info_sent{ background:rgba(123,163,216,0.20); color:var(--primary-dark); }
.badge.registered{ background:rgba(245,158,11,0.14); color:#b45309; }
.badge.paid{ background:rgba(34,197,94,0.14); color:#15803d; }
.badge.human{ background:rgba(239,68,68,0.12); color:var(--danger); }

.filters { margin-bottom:16px; }
.filters a {
  display:inline-block; padding:7px 14px; margin:0 7px 7px 0; border-radius:20px;
  background:var(--bg-card); border:1px solid var(--border); text-decoration:none;
  font-size:13px; font-weight:500; color:var(--text);
}
.filters a:hover { border-color:var(--primary); }
.filters a.active {
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#fff; border-color:transparent;
}

/* --- Conversation ---------------------------------------------------------- */
.chat {
  background:rgba(147,180,232,0.10); border:1px solid var(--border);
  border-radius:18px; padding:16px; max-height:60vh; overflow-y:auto;
}
.msg { max-width:78%; padding:10px 14px; border-radius:14px; margin:8px 0; font-size:14px; white-space:pre-wrap; word-wrap:break-word; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.msg.in  { background:#fff; margin-right:auto; border:1px solid var(--border); }
.msg.out { background:rgba(147,180,232,0.22); margin-left:auto; }
.msg.out.human { background:linear-gradient(135deg, rgba(91,127,199,0.18) 0%, rgba(123,163,216,0.22) 100%); }
.msg .meta { display:block; font-size:11px; color:var(--text-muted); margin-top:5px; }

form.reply { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
textarea, input[type=text], input[type=password], input[type=email], select {
  width:100%; padding:12px 14px; border:1px solid var(--input-border); border-radius:12px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--text);
}
textarea:focus, input:focus, select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,127,199,0.12); }
textarea { min-height:74px; resize:vertical; }

button, .btn {
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#fff; border:none; padding:11px 20px; border-radius:12px;
  font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; text-decoration:none; display:inline-block;
  transition:transform .15s ease, box-shadow .15s ease;
}
button:hover, .btn:hover { box-shadow:0 8px 25px rgba(91,127,199,0.4); transform:translateY(-2px); }
button.secondary, .btn.secondary {
  background:#fff; color:var(--primary-dark); border:1px solid var(--border);
}
button.secondary:hover, .btn.secondary:hover { box-shadow:0 6px 18px rgba(91,127,199,0.18); }

.note { font-size:13px; color:var(--text-muted); }
.flash { padding:12px 16px; border-radius:12px; margin-bottom:16px; font-size:14px; font-weight:500; }
.flash.ok { background:rgba(34,197,94,0.10); color:#15803d; }
.flash.err { background:rgba(239,68,68,0.10); color:var(--danger); }

/* --- Login ----------------------------------------------------------------- */
.login-box {
  max-width:380px; margin:9vh auto;
  background:var(--bg-card); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:20px; padding:34px;
  box-shadow:0 4px 24px rgba(147,180,232,0.15), 0 1px 3px rgba(0,0,0,0.05);
  text-align:center;
}
.login-box img { height:56px; margin-bottom:14px; }
.login-box h1 {
  font-size:22px; margin:0 0 4px; font-weight:600;
  background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.login-box label { display:block; font-size:13px; color:var(--text-muted); margin:14px 0 5px; text-align:left; font-weight:500; }
.login-box .note { margin-top:0; }
.login-box button { width:100%; }

.cust-meta { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px; font-size:14px; align-items:center; }
.cust-meta b { color:var(--text-muted); font-weight:600; }

/* ===========================================================================
   RESPONSIVE — phones & tablets. Desktop styles above are the default.
   =========================================================================== */

/* Tablets and small laptops */
@media (max-width:820px){
  .wrap { padding:18px 14px; }
  .topbar { padding:12px 16px; }
  .topbar h1 { font-size:17px; }
  .chat { max-height:55vh; }
  .msg { max-width:84%; }
}

/* Phones */
@media (max-width:600px){
  .wrap { padding:14px 11px; }
  .topbar { padding:10px 12px; gap:6px; }
  .topbar .brand img { height:32px; }
  .topbar h1 { font-size:15px; }
  .topbar .nav { font-size:12px; }

  /* Status panel: two tiles per row, tighter. */
  .status-panel { gap:8px; margin-bottom:16px; }
  .stat { min-width:calc(50% - 4px); flex:1 1 calc(50% - 4px); padding:11px 12px; border-radius:13px; }
  .stat .value { font-size:16px; }

  .card { border-radius:14px; }
  .msg { max-width:90%; font-size:14px; }
  .filters a { padding:6px 12px; font-size:12px; }

  /* Buttons & inputs: comfortable tap targets, full width where it helps. */
  button, .btn { padding:11px 16px; }
  form.reply button[type=submit] { width:100%; }

  .login-box { margin:5vh auto; padding:24px 20px; border-radius:16px; }

  /* Customer table -> stacked cards (no horizontal scroll). */
  table, thead, tbody, tr, td { display:block; width:100%; }
  thead { position:absolute; left:-9999px; }          /* hide header row */
  tbody tr { border-bottom:1px solid var(--border); padding:10px 4px; }
  tbody tr:last-child { border-bottom:none; }
  tbody tr:hover td { background:none; }
  td { border:none !important; padding:4px 16px; font-size:14px; }
  td[data-label]::before {
    content:attr(data-label) "  ";
    display:inline-block; min-width:96px;
    font-size:11px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--text-muted); font-weight:600;
  }
  td.actioncell { padding-top:8px; }
  td.actioncell::before { content:none; }
  td.actioncell .btn { display:block; text-align:center; }
}

/* Honour reduced-motion preferences. */
@media (prefers-reduced-motion: reduce){
  button, .btn { transition:none; }
  button:hover, .btn:hover { transform:none; }
}