/* EasyClinic — Telegram notifications UI (RTL, Tajawal). Uses dashboard CSS vars with fallbacks. */
.tg-scope, .tg-modal { --tg-blue:#2AABEE; --tg-blue-d:#229ED9; --tg-card:var(--card,#1e293b); --tg-card2:var(--card2,#243044);
  --tg-border:var(--border,#334155); --tg-text:var(--text,#f1f5f9); --tg-text2:var(--text2,#94a3b8); --tg-green:var(--green,#10b981);
  --tg-red:var(--red,#ef4444); --tg-orange:var(--orange,#f59e0b); font-family:Tajawal,system-ui,sans-serif; }
.tg-hero { display:flex; align-items:center; gap:18px; padding:22px 24px; border-radius:18px; color:#fff; margin-bottom:18px;
  background:linear-gradient(135deg,#229ED9 0%,#2AABEE 45%,#5b8def 100%); box-shadow:0 10px 30px rgba(42,171,238,.25); position:relative; overflow:hidden; }
.tg-hero::after { content:""; position:absolute; left:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.08); }
.tg-hero-ico { width:62px; height:62px; border-radius:18px; background:rgba(255,255,255,.18); display:grid; place-items:center; flex:none; }
.tg-hero h2 { margin:0 0 4px; font-size:1.35rem; font-weight:700; }
.tg-hero p { margin:0; opacity:.92; font-size:.92rem; }
.tg-hero .tg-pill { margin-inline-start:auto; z-index:1; }
.tg-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:.8rem; font-weight:700; background:rgba(255,255,255,.2); color:#fff; white-space:nowrap; }
.tg-pill .dot { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.3); }
.tg-pill.off .dot { background:#f87171; box-shadow:0 0 0 3px rgba(248,113,113,.3); }
.tg-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:18px; }
.tg-stat { background:var(--tg-card); border:1px solid var(--tg-border); border-radius:14px; padding:16px; display:flex; gap:12px; align-items:center; }
.tg-stat .si { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.25rem; flex:none; }
.tg-stat b { display:block; font-size:1.45rem; color:var(--tg-text); line-height:1.1; }
.tg-stat span { color:var(--tg-text2); font-size:.82rem; }
.tg-progress { height:6px; border-radius:6px; background:var(--tg-border); margin-top:6px; overflow:hidden; }
.tg-progress i { display:block; height:100%; background:var(--tg-blue); border-radius:6px; }
.tg-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:18px; margin-bottom:18px; }
@media (max-width:1100px){ .tg-grid { grid-template-columns:1fr; } }
.tg-card { background:var(--tg-card); border:1px solid var(--tg-border); border-radius:16px; padding:20px; }
.tg-card h3 { margin:0 0 4px; font-size:1.05rem; color:var(--tg-text); display:flex; align-items:center; gap:8px; }
.tg-card .sub { color:var(--tg-text2); font-size:.83rem; margin:0 0 14px; }
.tg-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px dashed var(--tg-border); }
.tg-toggle-row:last-child { border-bottom:0; }
.tg-toggle-row .t { color:var(--tg-text); font-weight:500; font-size:.92rem; }
.tg-toggle-row .d { color:var(--tg-text2); font-size:.78rem; margin-top:2px; }
.tg-switch { position:relative; width:46px; height:26px; flex:none; }
.tg-switch input { opacity:0; width:0; height:0; }
.tg-switch span { position:absolute; inset:0; border-radius:26px; background:var(--tg-border); cursor:pointer; transition:.2s; }
.tg-switch span::before { content:""; position:absolute; width:20px; height:20px; top:3px; right:3px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.tg-switch input:checked + span { background:var(--tg-blue); }
.tg-switch input:checked + span::before { transform:translateX(-20px); }
.tg-tabs { display:flex; gap:6px; background:var(--tg-card2); padding:5px; border-radius:12px; margin-bottom:12px; flex-wrap:wrap; }
.tg-tabs button { flex:1; border:0; background:transparent; color:var(--tg-text2); padding:8px 10px; border-radius:9px; cursor:pointer; font-family:inherit; font-size:.85rem; font-weight:500; }
.tg-tabs button.active { background:var(--tg-blue); color:#fff; }
.tg-editor textarea { width:100%; min-height:190px; resize:vertical; background:var(--tg-card2); border:1px solid var(--tg-border); color:var(--tg-text);
  border-radius:12px; padding:12px; font-family:inherit; font-size:.92rem; line-height:1.7; box-sizing:border-box; }
.tg-editor textarea:focus { outline:0; border-color:var(--tg-blue); box-shadow:0 0 0 3px rgba(42,171,238,.2); }
.tg-chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.tg-chip { border:1px solid var(--tg-border); background:var(--tg-card2); color:var(--tg-text); padding:4px 10px; border-radius:999px; font-size:.78rem; cursor:pointer; font-family:inherit; }
.tg-chip:hover { border-color:var(--tg-blue); color:var(--tg-blue); }
.tg-phone { border-radius:22px; overflow:hidden; border:1px solid var(--tg-border); background:#0e1621; }
.tg-phone-hd { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#17212b; color:#fff; }
.tg-phone-hd .av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#2AABEE,#5b8def); display:grid; place-items:center; font-weight:700; }
.tg-phone-hd small { display:block; color:#6c7883; font-size:.75rem; }
.tg-chat { min-height:300px; padding:18px 14px; background-color:#0e1621;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size:18px 18px; display:flex; flex-direction:column; align-items:flex-start; }
.tg-bubble { max-width:88%; background:#182533; color:#e9eef3; padding:10px 12px 6px; border-radius:14px 14px 14px 4px; font-size:.9rem; line-height:1.75;
  white-space:pre-wrap; word-break:break-word; box-shadow:0 1px 2px rgba(0,0,0,.3); direction:rtl; text-align:right; }
.tg-bubble b { color:#fff; }
.tg-bubble .meta { display:block; text-align:left; color:#6c7883; font-size:.7rem; margin-top:2px; }
.tg-kb { display:flex; gap:4px; margin-top:4px; max-width:88%; width:88%; }
.tg-kb span { flex:1; text-align:center; background:rgba(24,37,51,.85); color:#fff; padding:8px 6px; border-radius:8px; font-size:.8rem; }
.tg-reasons { display:flex; flex-direction:column; gap:8px; }
.tg-reason { display:flex; align-items:center; gap:10px; background:var(--tg-card2); border:1px solid var(--tg-border); border-radius:10px; padding:9px 12px; color:var(--tg-text); }
.tg-reason .n { width:24px; height:24px; border-radius:7px; background:rgba(42,171,238,.15); color:var(--tg-blue); display:grid; place-items:center; font-size:.75rem; font-weight:700; flex:none; }
.tg-reason .x { margin-inline-start:auto; background:transparent; border:0; color:var(--tg-text2); cursor:pointer; font-size:1.1rem; }
.tg-reason .x:hover { color:var(--tg-red); }
.tg-add { display:flex; gap:8px; margin-top:10px; }
.tg-add input, .tg-input { flex:1; background:var(--tg-card2); border:1px solid var(--tg-border); color:var(--tg-text); border-radius:10px; padding:9px 12px; font-family:inherit; font-size:.88rem; box-sizing:border-box; }
.tg-btn { border:0; border-radius:10px; padding:9px 16px; font-family:inherit; font-weight:700; font-size:.86rem; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.tg-btn-primary { background:var(--tg-blue); color:#fff; } .tg-btn-primary:hover { background:var(--tg-blue-d); }
.tg-btn-ghost { background:var(--tg-card2); color:var(--tg-text); border:1px solid var(--tg-border); }
.tg-btn-danger { background:var(--tg-red); color:#fff; }
.tg-btn:disabled { opacity:.55; cursor:not-allowed; }
.tg-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
.tg-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.tg-table th { text-align:right; color:var(--tg-text2); font-weight:500; padding:10px; border-bottom:1px solid var(--tg-border); white-space:nowrap; }
.tg-table td { padding:10px; border-bottom:1px solid var(--tg-border); color:var(--tg-text); }
.tg-st { padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:700; white-space:nowrap; }
.tg-st.sent { background:rgba(16,185,129,.15); color:var(--tg-green); } .tg-st.failed { background:rgba(239,68,68,.15); color:var(--tg-red); }
.tg-st.skipped { background:rgba(148,163,184,.15); color:var(--tg-text2); } .tg-st.received, .tg-st.linked { background:rgba(42,171,238,.15); color:var(--tg-blue); }
.tg-filters { display:flex; gap:8px; flex-wrap:wrap; }
.tg-filters select { background:var(--tg-card2); border:1px solid var(--tg-border); color:var(--tg-text); border-radius:9px; padding:7px 10px; font-family:inherit; }
.tg-badge { display:inline-flex; align-items:center; gap:3px; margin-inline-start:6px; padding:1px 7px; border-radius:999px; font-size:.68rem; font-weight:700;
  background:rgba(42,171,238,.15); color:#2AABEE; vertical-align:middle; cursor:default; }
.tg-badge.off { background:rgba(148,163,184,.12); color:#94a3b8; cursor:pointer; }
/* Modals (cancel reason, link QR) */
.tg-modal { position:fixed; inset:0; background:rgba(2,6,23,.65); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:9999; padding:16px; }
.tg-modal.show { display:flex; }
.tg-modal-box { width:100%; max-width:480px; background:var(--tg-card); color:var(--tg-text); border:1px solid var(--tg-border); border-radius:18px; box-shadow:0 30px 60px rgba(0,0,0,.4); overflow:hidden; direction:rtl; }
.tg-modal-hd { padding:18px 20px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--tg-border); }
.tg-modal-hd h3 { margin:0; font-size:1.05rem; } .tg-modal-hd .close { margin-inline-start:auto; background:none; border:0; color:var(--tg-text2); font-size:1.4rem; cursor:pointer; }
.tg-modal-bd { padding:18px 20px; }
.tg-opt { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--tg-border); border-radius:11px; margin-bottom:8px; cursor:pointer; background:var(--tg-card2); }
.tg-opt:has(input:checked) { border-color:var(--tg-blue); background:rgba(42,171,238,.08); }
.tg-opt input { accent-color:#2AABEE; }
.tg-qr-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.tg-qr { background:#fff; padding:12px; border-radius:14px; width:200px; height:200px; display:grid; place-items:center; }
.tg-qr img, .tg-qr canvas { width:176px !important; height:176px !important; }
.tg-link-card { margin:18px auto 0; max-width:420px; border:1px solid rgba(42,171,238,.35); background:rgba(42,171,238,.07); border-radius:16px; padding:16px; text-align:center; font-family:Tajawal,sans-serif; }
.tg-link-card h4 { margin:0 0 6px; color:#2AABEE; font-size:1rem; }
.tg-link-card p { margin:0 0 12px; font-size:.85rem; opacity:.85; }
.tg-link-card .tg-qr { margin:0 auto 12px; }
.tg-open { display:inline-flex; align-items:center; gap:8px; background:#2AABEE; color:#fff !important; text-decoration:none; padding:10px 18px; border-radius:11px; font-weight:700; }