* { box-sizing: border-box; margin: 0; padding: 0; }

/* ألوان البوابة كمتغيّرات - الثيم الداكن بيغيّرها بس عن طريق html[data-theme="dark"]
   (التفضيل محفوظ على حساب كل مستخدم، شوف applyTheme في app.js) */
:root {
  color-scheme: light;
  --bg: #f0f2f5;
  --card: #fff;
  --soft: #f0f2f5;
  --border: #e4e6eb;
  --border-soft: #f0f0f0;
  --input-border: #ccd0d5;
  --input-bg: #fff;
  --text: #1c1e21;
  --text-2: #444;
  --muted: #65676b;
  --faint: #999;
  --hover: #f7f7f7;
  --active-bg: #e7f9ee;
  --unread-bg: #eefaf1;
  --chip-bg: #f0f0f0;
  --chip-hover: #e6e6e6;
  --chip-text: #555;
  --bubble-out: #dcf8c6;
  --bubble-in: #f0f0f0;
  --code-bg: #f7f8fa;
  --warn-bg: #fff8e1;
  --warn-text: #8a5a00;
  --success-text: #0a7a3b;
  --msg-error-bg: #fde2e2;
  --msg-error-text: #a1121f;
  --msg-success-bg: #d9f7e6;
  --msg-success-text: #0a7a3b;
  --shadow: rgba(0,0,0,0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b141a;
  --card: #111b21;
  --soft: #202c33;
  --border: #2a3942;
  --border-soft: #1f2c33;
  --input-border: #3b4a54;
  --input-bg: #2a3942;
  --text: #e9edef;
  --text-2: #c5ccd0;
  --muted: #8696a0;
  --faint: #8696a0;
  --hover: #1d282f;
  --active-bg: #2a3942;
  --unread-bg: #12261e;
  --chip-bg: #202c33;
  --chip-hover: #2a3942;
  --chip-text: #c5ccd0;
  --bubble-out: #005c4b;
  --bubble-in: #202c33;
  --code-bg: #0b141a;
  --warn-bg: #3a2e12;
  --warn-text: #f0c060;
  --success-text: #4ade80;
  --msg-error-bg: #4a1c22;
  --msg-error-text: #ffb3b8;
  --msg-success-bg: #12372a;
  --msg-success-text: #7ee2a8;
  --shadow: rgba(0,0,0,0.4);
}


body {
  font-family: -apple-system, Segoe UI, Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container {
  max-width: 480px;
  margin: 60px auto;
  background: var(--card);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 12px var(--shadow);
}

h1 { font-size: 22px; margin-bottom: 6px; }
p.subtitle { color: var(--muted); margin-bottom: 24px; font-size: 14px; }

label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text-2); }
input, textarea, select {
  background: var(--input-bg);
  color: var(--text);
}
input, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
  font-family: inherit;
}
textarea { resize: vertical; min-height: 60px; }

button {
  width: 100%;
  padding: 11px;
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: #1fb356; }
button.secondary {
  background: var(--card);
  color: #25d366;
  border: 1px solid #25d366;
  margin-top: 8px;
}

.msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.msg.error { background: var(--msg-error-bg); color: var(--msg-error-text); }
.msg.success { background: var(--msg-success-bg); color: var(--msg-success-text); }

.link-row { text-align: center; margin-top: 16px; font-size: 13px; }
.link-row a { color: #25d366; cursor: pointer; text-decoration: none; }

/* dashboard */
.dash { max-width: 900px; margin: 20px auto; display: flex; gap: 16px; height: 85vh; }
.panel { background: var(--card); border-radius: 12px; box-shadow: 0 2px 12px var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.conv-list { flex: 0 0 300px; }
.chat-panel { flex: 1; }
.panel-header { padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.panel-header button { width: auto; padding: 6px 12px; font-size: 12px; }
.conv-filter-btn {
  width: auto;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 16px;
  background: var(--chip-bg);
  color: var(--chip-text);
  border: none;
}
.conv-filter-btn:hover { background: var(--chip-hover); }
.conv-filter-btn.active { background: #25d366; color: #fff; }
.conv-items { flex: 1; overflow-y: auto; }
.conv-item { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.conv-item:hover { background: var(--hover); }
.conv-item.active { background: var(--active-bg); }
.conv-item .phone { font-weight: 600; font-size: 14px; }
.conv-item .status { font-size: 12px; color: var(--muted); }

.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 70%; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.bubble.OUTBOUND { align-self: flex-start; background: var(--bubble-out); }
.bubble.INBOUND { align-self: flex-end; background: var(--bubble-in); }
.bubble .meta { font-size: 10px; color: var(--faint); margin-top: 4px; }

.chat-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.chat-input input { margin: 0; flex: 1; }
.chat-input button { width: auto; padding: 10px 20px; }

.empty-state { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--faint); font-size: 14px; }

.top-bar { max-width: 900px; margin: 16px auto 0; display: flex; justify-content: space-between; align-items: center; padding: 0 4px; flex-wrap: wrap; gap: 8px; }
.top-bar .brand { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.top-bar .brand img { height: 26px; width: auto; display: block; }
.top-bar button { width: auto; padding: 8px 16px; font-size: 13px; white-space: nowrap; }

.conv-item.unread { background: var(--unread-bg); }
.conv-item.unread .phone { font-weight: 700; }
.conv-item.unread .status { color: #1fb356; font-weight: 600; }

.mark-unread-btn {
  width: auto;
  padding: 0;
  background: none;
  border: none;
  color: var(--faint);
  font-size: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
}
.conv-item:hover .mark-unread-btn { opacity: 1; }
.mark-unread-btn:hover { color: #25d366; }

.back-btn { display: none; }

/* mobile: show the conversation list OR the open chat, one full-width panel at a time */
@media (max-width: 760px) {
  .container { margin: 24px auto; padding: 22px; }
  .top-bar { max-width: 100%; margin: 12px auto 0; padding: 0 12px; flex-wrap: wrap; gap: 8px; }
  .dash { max-width: 100%; margin: 12px 0 0; height: calc(100vh - 96px); border-radius: 0; }
  .panel { border-radius: 0; }
  .conv-list { flex: 1 1 auto; width: 100%; }
  .chat-panel { display: none; flex: 1 1 auto; width: 100%; }
  .dash.chat-open .conv-list { display: none; }
  .dash.chat-open .chat-panel { display: flex; }
  .back-btn { display: inline-block; }
  .bubble { max-width: 85%; }
}

/* زرار تبديل الثيم + كتل الكود */
.theme-toggle-btn { width: auto; padding: 6px 10px; font-size: 14px; line-height: 1; }
code { color: inherit; }
html[data-theme="dark"] .bubble a { color: #53bdeb; }

/* تابات أرقام الواتساب (لو العميل عنده أكتر من رقم على نفس الـ WABA) */
.num-tabs { max-width: 900px; margin: 12px auto 0; display: flex; gap: 8px; overflow-x: auto; padding: 0 4px 2px; }
.num-tab {
  width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 20px;
  background: var(--chip-bg); color: var(--chip-text); border: none; cursor: pointer; white-space: nowrap;
  direction: ltr;
}
.num-tab:hover { background: var(--chip-hover); }
.num-tab.active { background: #25d366; color: #fff; }
.num-badge { background: #e0245e; color: #fff; border-radius: 10px; min-width: 18px; padding: 1px 6px; font-size: 11px; line-height: 16px; text-align: center; }
.num-tab.active .num-badge { background: #fff; color: #1fb356; }
.num-tag { display: inline-block; margin-inline-start: 6px; padding: 0 6px; border-radius: 8px; font-size: 10.5px; font-weight: 600; background: var(--chip-bg); color: var(--chip-text); direction: ltr; vertical-align: middle; }
.dash.has-tabs { height: 78vh; }
@media (max-width: 760px) {
  .num-tabs { max-width: 100%; margin: 8px 0 0; padding: 0 12px 2px; }
  .dash.has-tabs { height: calc(100vh - 150px); }
}

/* نص الفقاعة: يحافظ على الأسطر (رسايل القوالب متعددة الفقرات) ويكسر الكلمات الطويلة */
.bubble-text { white-space: pre-wrap; word-break: break-word; }


/* تغيير خطة الاشتراك (صفحة الفريق) */
.plan-note { background: var(--warn-bg); color: var(--warn-text); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; line-height: 1.7; }
.plan-panel { margin: 12px 0; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--soft); }
.plan-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--card); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; color: var(--text); }
.plan-opt.active { border-color: #25d366; background: var(--active-bg); }
.plan-opt input[type="radio"] { width: auto; margin: 0; padding: 0; flex: 0 0 auto; accent-color: #25d366; }
.plan-opt-main { flex: 1; font-size: 14px; }
.plan-opt-price { text-align: end; font-size: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.plan-sub { font-size: 12px; color: var(--muted); }
.plan-tag { margin-inline-start: 8px; font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; }
.plan-badge { background: #25d366; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.plan-total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; font-size: 14px; }
.plan-total b { font-size: 18px; color: var(--success-text); }

/* الدفع اليدوي: اختيار طريقة الدفع (نفس شكل plan-opt) + جدول الفواتير */
.pay-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--card); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; color: var(--text); }
.pay-opt.active { border-color: #25d366; background: var(--active-bg); }
.pay-opt input[type="radio"] { width: auto; margin: 0; padding: 0; flex: 0 0 auto; accent-color: #25d366; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.inv-table th, .inv-table td { text-align: start; padding: 9px 8px; border-bottom: 1px solid var(--border); }
.inv-table th { color: var(--muted); font-weight: 600; font-size: 11px; white-space: nowrap; }
.inv-table .inv-amt { font-weight: 700; white-space: nowrap; }