/* ==========================================================================
   SKYDO Bot — PHP edition add-on styles
   Loaded AFTER style.css. Keeps the original emerald/glass look.
   ========================================================================== */

.wrap        { width: 100%; max-width: 1240px; margin: 0 auto; }
.page-title  { font-size: 1.6rem; font-weight: 800; letter-spacing: -.5px; }
.page-sub    { color: var(--text-secondary); font-size: .95rem; margin-top: .25rem; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.wrapf{flex-wrap:wrap}
.muted{color:var(--text-secondary)}.small{font-size:.82rem}
.hidden{display:none !important}
.text-right{text-align:right}.text-center{text-align:center}

/* ---------- Card ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid rgba(203,213,225,.6);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
}
.card + .card { margin-top: 1.5rem; }
.card h2, .card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .25rem; }

/* ---------- Grid ---------- */
.grid { display: grid; gap: 1.5rem; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split { grid-template-columns: 380px minmax(0,1fr); }
@media (max-width: 1024px){ .split,.g3,.g4{grid-template-columns:1fr} }
@media (max-width: 720px){ .g2{grid-template-columns:1fr} }

/* ---------- Maintenance banner ---------- */
.maint-banner {
  display: flex; align-items: center; gap: .9rem;
  background: linear-gradient(135deg,#fff7ed,#ffedd5);
  border: 1px solid #fdba74; color: #7c2d12;
  border-radius: 16px; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  box-shadow: 0 6px 18px -8px rgba(234,88,12,.4);
}
.maint-banner .ico { font-size: 1.6rem; line-height: 1; }
.maint-banner b { display: block; font-size: 1rem; }
.maint-banner span { font-size: .85rem; opacity: .9; }

.maint-box {
  text-align: center; padding: 2.5rem 1.5rem;
  border: 2px dashed #fdba74; border-radius: 18px;
  background: #fffbeb; color: #7c2d12;
}
.maint-box .ico { font-size: 3rem; }
.maint-box h3 { font-size: 1.15rem; margin: .75rem 0 .35rem; }

/* ---------- Agent pill ---------- */
.agent-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .8rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
}
.agent-pill.on  { background:#dcfce7; color:#166534; }
.agent-pill.off { background:#fee2e2; color:#991b1b; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.agent-pill.on .dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ---------- Stat tiles ---------- */
.stat {
  background: var(--bg-card); border-radius: 16px; padding: 1.25rem;
  border: 1px solid rgba(203,213,225,.6); box-shadow: var(--card-shadow);
}
.stat .label { font-size: .78rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; }
.stat .value { font-size: 1.7rem; font-weight: 800; margin-top: .35rem; }
.stat .value.green { color: #059669; } .stat .value.red { color:#dc2626; } .stat .value.blue{color:#2563eb;}

/* ---------- Forms ---------- */
.field { margin-bottom: 1rem; }
.field label { display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem; color:var(--text-secondary); }
.input, select.input, textarea.input {
  width: 100%; padding: .8rem 1rem; font-family: var(--font-family); font-size: .95rem;
  border: 1px solid var(--border-color); border-radius: 12px; background: var(--input-bg);
  color: var(--text-primary); transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline:none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
textarea.input { min-height: 130px; resize: vertical; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.3rem; border:none; border-radius:12px; font-family:var(--font-family);
  font-weight:600; font-size:.92rem; cursor:pointer; transition:transform .12s, box-shadow .12s, opacity .12s;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.btn.primary { background: var(--primary-gradient); color:#fff; box-shadow: 0 8px 20px -8px var(--primary-shadow); }
.btn.danger  { background: var(--danger-gradient); color:#fff; box-shadow: 0 8px 20px -8px var(--danger-shadow); }
.btn.ghost   { background: #fff; color: var(--text-primary); border:1px solid var(--border-color); }
.btn.dark    { background:#0f172a; color:#fff; }
.btn.full    { width:100%; }
.btn.sm      { padding:.5rem .85rem; font-size:.8rem; border-radius:10px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; border-radius:14px; border:1px solid rgba(203,213,225,.7); }
table.tbl { width:100%; border-collapse:collapse; font-size:.88rem; background:#fff; }
table.tbl th {
  text-align:left; padding:.85rem 1rem; background:#f8fafc; font-weight:700;
  color:var(--text-secondary); font-size:.75rem; text-transform:uppercase; letter-spacing:.4px;
  white-space:nowrap; border-bottom:1px solid var(--border-color);
}
table.tbl td { padding:.8rem 1rem; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
table.tbl tr:last-child td { border-bottom:none; }
table.tbl tbody tr:hover { background:#f8fafc; }

.badge { display:inline-block; padding:.28rem .65rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge.ok    { background:#dcfce7; color:#166534; }
.badge.warn  { background:#fef9c3; color:#854d0e; }
.badge.err   { background:#fee2e2; color:#991b1b; }
.badge.info  { background:#dbeafe; color:#1e40af; }
.badge.grey  { background:#f1f5f9; color:#475569; }

/* ---------- QR panel ---------- */
.qr-box {
  display:flex; align-items:center; justify-content:center;
  min-height: 290px; border-radius:16px; background:#f8fafc;
  border:2px dashed var(--border-color); padding:1rem; text-align:center;
}
.qr-box img { width:100%; max-width:270px; border-radius:10px; }
.qr-hint { font-size:.8rem; color:var(--text-secondary); margin-top:.75rem; text-align:center; }

.conn-state {
  display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 1.1rem;
  border-radius:999px; font-weight:700; font-size:.9rem;
}
.conn-state.connected    { background:#dcfce7; color:#166534; }
.conn-state.disconnected { background:#fee2e2; color:#991b1b; }
.conn-state.qr,
.conn-state.initializing { background:#fef9c3; color:#854d0e; }

/* ---------- Toast ---------- */
#toast-wrap { position:fixed; top:1.25rem; right:1.25rem; z-index:9999; display:flex; flex-direction:column; gap:.6rem; }
.toast {
  background:#0f172a; color:#fff; padding:.85rem 1.15rem; border-radius:12px;
  font-size:.88rem; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); max-width:340px;
  animation: slideIn .25s ease;
}
.toast.ok  { background: linear-gradient(135deg,#059669,#10b981); }
.toast.err { background: linear-gradient(135deg,#dc2626,#ef4444); }
.toast.warn{ background: linear-gradient(135deg,#d97706,#f59e0b); }
@keyframes slideIn { from{opacity:0; transform:translateX(30px)} to{opacity:1;transform:none} }

/* ---------- Nav ---------- */
.topnav {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.5rem; background:rgba(255,255,255,.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius:18px; box-shadow: var(--card-shadow); margin-bottom:1.75rem;
}
.topnav .brand img { height:38px; display:block; }
.navlinks { display:flex; gap:.25rem; flex-wrap:wrap; }
.navlinks a {
  padding:.55rem .9rem; border-radius:10px; text-decoration:none; font-size:.88rem;
  font-weight:600; color:var(--text-secondary);
}
.navlinks a:hover { background:#f1f5f9; color:var(--text-primary); }
.navlinks a.active { background: var(--primary-gradient); color:#fff; }
.navright { display:flex; align-items:center; gap:.75rem; }

/* ---------- Footer ---------- */
.site-footer { margin-top:3rem; padding:2rem 0; text-align:center; color:var(--text-secondary); font-size:.85rem; }
.site-footer a { color: var(--primary-color); text-decoration:none; }

/* ---------- Landing ---------- */
.hero-wrap { text-align:center; padding:3.5rem 1rem 2rem; }
.hero-badge {
  display:inline-block; padding:.4rem 1rem; border-radius:999px; background:#dcfce7;
  color:#166534; font-size:.8rem; font-weight:700; margin-bottom:1rem;
}
.feature { background:#fff; border-radius:16px; padding:1.5rem; border:1px solid rgba(203,213,225,.6); }
.feature .ico { font-size:1.8rem; }
.feature h3 { margin:.6rem 0 .35rem; font-size:1rem; }
.feature p { font-size:.88rem; color:var(--text-secondary); }

.plan-card { background:#fff; border-radius:20px; padding:2rem 1.5rem; border:1px solid var(--border-color); position:relative; }
.plan-card.popular { border:2px solid var(--primary-color); box-shadow:0 18px 40px -18px var(--primary-shadow); }
.plan-card .tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--primary-gradient); color:#fff; padding:.28rem .9rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.plan-card .price { font-size:2.2rem; font-weight:800; }
.plan-card ul { list-style:none; margin:1.25rem 0; display:flex; flex-direction:column; gap:.55rem; font-size:.88rem; }

/* ---------- Code block ---------- */
pre.code {
  background:#0f172a; color:#e2e8f0; padding:1.1rem; border-radius:12px;
  overflow-x:auto; font-size:.82rem; line-height:1.55; font-family: ui-monospace, Menlo, Consolas, monospace;
}
pre.code .k { color:#5eead4; }

/* ==========================================================================
   SKYDO Bot — brand palette (from the SDBOT logo) + layout fixes
   This block loads after style.css and intentionally overrides it.
   ========================================================================== */
:root {
  --brand-blue:      #0060f0;
  --brand-blue-dark: #0047b8;
  --brand-navy:      #001848;
  --brand-green:     #18a848;

  --primary-color:    #0060f0;
  --primary-gradient: linear-gradient(135deg, #0060f0 0%, #3b86ff 100%);
  --primary-shadow:   rgba(0, 96, 240, .32);

  --text-primary:   #001848;
  --text-secondary: #4b5b7a;
}

body {
  background-image:
    radial-gradient(at 0% 0%,   rgba(0, 96, 240, .07) 0px, transparent 55%),
    radial-gradient(at 100% 0%, rgba(24, 168, 72, .06) 0px, transparent 50%) !important;
}

/* ---------- Navbar: one row, never wraps ---------- */
.topnav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  padding: .7rem 1.1rem;
  border: 1px solid rgba(0, 96, 240, .10);
}
.topnav .brand { flex: 0 0 auto; display: flex; align-items: center; }
.topnav .brand img { height: 34px; width: auto; display: block; }

.navlinks {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: .15rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px;
}
.navlinks::-webkit-scrollbar { display: none; }
.navlinks a {
  flex: 0 0 auto;
  padding: .5rem .68rem;
  font-size: .845rem;
  font-weight: 600;
  border-radius: 10px;
  white-space: nowrap;
  color: var(--text-secondary);
  text-decoration: none;
}
.navlinks a:hover  { background: #eef4ff; color: var(--brand-blue); }
.navlinks a.active { background: var(--primary-gradient); color: #fff; box-shadow: 0 4px 12px -4px var(--primary-shadow); }
.navlinks .nav-ico { margin-right: .3rem; }

.navright { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; }

/* status pill never breaks onto two lines */
.agent-pill {
  white-space: nowrap;
  font-size: .74rem;
  padding: .42rem .75rem;
  line-height: 1;
}
.agent-pill.on  { background: #e8f7ee; color: #12703a; }
.agent-pill.off { background: #fdeaea; color: #a4222a; }

/* avatar drawn in CSS — no external image service, so it can never break */
.avatar-initial {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-blue));
  color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: .3px;
  text-decoration: none; flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(0, 24, 72, .25);
}
.avatar-initial:hover { filter: brightness(1.12); }

@media (max-width: 1100px) {
  .navlinks a { padding: .5rem .55rem; font-size: .8rem; }
  .navlinks .nav-ico { display: none; }
}
@media (max-width: 780px) {
  .topnav { flex-wrap: wrap; row-gap: .6rem; }
  .navlinks { order: 3; width: 100%; }
  .agent-pill .pill-text { display: none; }
  .agent-pill { padding: .45rem; }
}

/* ---------- Hero ---------- */
.hero-title {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 55%, var(--brand-green) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-badge { background: #e8f0ff; color: var(--brand-blue-dark); }
.hero-wrap  { padding-top: 2.5rem; }
.hero-logo  { height: 76px; width: auto; margin-bottom: 1.25rem; }

/* ---------- Buttons ---------- */
.btn.primary { background: var(--primary-gradient); box-shadow: 0 8px 20px -8px var(--primary-shadow); }
.btn.dark    { background: var(--brand-navy); }
.btn.ghost   { border-color: #d7e0ee; }
.btn.ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.btn.whatsapp { background: linear-gradient(135deg, #18a848, #25d366); color: #fff; }

/* ---------- Cards / tables ---------- */
.card    { border-color: rgba(0, 96, 240, .10); }
.feature { border-color: rgba(0, 96, 240, .10); }
.feature .ico { color: var(--brand-blue); }
table.tbl th { color: #5b6b88; }
.badge.info { background: #e5efff; color: var(--brand-blue-dark); }
.stat .value.blue  { color: var(--brand-blue); }
.stat .value.green { color: var(--brand-green); }

.plan-card.popular { border-color: var(--brand-blue); }
.plan-card .tag    { background: var(--primary-gradient); }

/* ---------- Focus ring in brand blue ---------- */
.input:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0, 96, 240, .15); }

/* ---------- Footer ---------- */
.site-footer a { color: var(--brand-blue); }
.footer-logo { height: 26px; opacity: .55; display: block; margin: 0 auto .6rem; }