/* ===== أساسيات ===== */
* { margin:0; padding:0; box-sizing:border-box; }

:root {
    --bg:#0d0d0d;
    --panel:#1a1a1a;
    --panel-2:#222;
    --panel-3:#2a2a2a;
    --border:#333;
    --text:#eee;
    --muted:#9a9a9a;
    --accent:#ff2a2a;
    --accent-dark:#d92525;
    --green:#2f9e44;
    --radius:12px;
}

html { direction:rtl; color-scheme:dark; }

body {
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    background:var(--bg);
    color:var(--text);
    display:flex;
    min-height:100vh;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

/* الحاوية الرئيسية: تملا الشاشة والقائمة جنب المحتوى */
#app {
    display:flex;
    flex:1;
    min-width:0;
    min-height:100vh;
}

/* ===== الحقول والأزرار ===== */
input, select, button, textarea {
    font-family:inherit;
    font-size:16px; /* يمنع الزوم التلقائي في iOS */
}

input, select {
    width:100%;
    padding:12px 14px;
    background:var(--panel-3);
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--text);
    outline:none;
    transition:border-color .2s, box-shadow .2s;
    -webkit-appearance:none;
    appearance:none;
}

input:focus, select:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(255,42,42,.15);
}

input::placeholder { color:var(--muted); }

/* ===== زر عرض/إخفاء الباسورد ===== */
.pass-wrap {
    position:relative;
    display:flex;
    align-items:center;
}

.pass-wrap input { padding-inline-end:44px; }

.pass-toggle {
    position:absolute;
    inset-inline-end:8px;
    background:transparent;
    border:none;
    color:var(--muted);
    font-size:1.1rem;
    padding:4px;
    cursor:pointer;
    line-height:1;
    z-index:1;
}

.pass-toggle:hover { color:var(--text); background:transparent; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color:var(--text);
    -webkit-box-shadow:0 0 0 1000px var(--panel-3) inset;
    transition:background-color 9999s ease-in-out 0s;
}

select {
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ddd' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:left 12px center;
    padding-inline-start:14px;
    padding-inline-end:38px;
    cursor:pointer;
}

button {
    cursor:pointer;
    border:none;
    border-radius:10px;
    color:#fff;
    padding:10px 18px;
    background:var(--accent);
    transition:background .2s, transform .1s;
}

button:hover { background:var(--accent-dark); }
button:active { transform:scale(.98); }
button:disabled { opacity:.5; cursor:not-allowed; }

/* ===== الشريط الجانبي ===== */
#sidebar {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:230px;
    background:var(--panel);
    padding:20px 12px;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    z-index:999;
    transition:transform .3s ease;
    box-shadow:-10px 0 40px rgba(0,0,0,.5);
    border-inline-end:1px solid var(--border);
}

#sidebar.open { transform:translateX(0); }

#sidebar .logo {
    font-size:1.4rem;
    color:var(--accent);
    text-align:center;
    margin-bottom:28px;
    font-weight:700;
}

#sidebar ul { list-style:none; flex:1; }

#sidebar ul li {
    padding:12px 16px;
    cursor:pointer;
    border-radius:10px;
    margin-bottom:4px;
    transition:background .2s, color .2s;
}

#sidebar ul li:hover { background:var(--panel-2); }

#sidebar ul li.active {
    background:rgba(255,42,42,.12);
    border-inline-start:3px solid var(--accent);
    color:var(--accent);
}

#logoutBtn {
    background:var(--panel-3);
    color:var(--text);
    border:1px solid var(--border);
    padding:10px;
    border-radius:10px;
    cursor:pointer;
    margin-top:20px;
    transition:background .2s;
}

#logoutBtn:hover { background:var(--panel-2); }

/* ===== المحتوى ===== */
#mainContent {
    flex:1;
    padding:64px 24px 24px;
    overflow-y:auto;
    min-width:0;
    transition:padding .3s ease;
}

@media (min-width:769px) {
    body.sidebar-open #mainContent { padding-inline-start:254px; }
}

.page { display:none; }
.page.active { display:block; animation:fadeIn .25s ease; }

@keyframes fadeIn {
    from { opacity:0; transform:translateY(4px); }
    to   { opacity:1; transform:translateY(0); }
}

.page h2 { margin-bottom:18px; font-size:1.4rem; }

/* ===== الداشبورد ===== */
.stats {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:16px;
    margin:20px 0;
}

.stat-card {
    background:var(--panel);
    padding:20px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    text-align:center;
}

.stat-card span {
    display:block;
    font-size:2rem;
    font-weight:700;
    color:var(--accent);
    margin-bottom:4px;
}

.quick-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }

/* ===== البوتات ===== */
#createBotBtn { margin-bottom:16px; }

#botList { margin-top:20px; display:flex; flex-direction:column; gap:12px; }

.bot-card {
    background:var(--panel);
    padding:16px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    border-inline-start:4px solid #555;
}

.bot-card.running { border-inline-start-color:var(--green); }
.bot-card.stopped { border-inline-start-color:var(--accent); }

.bot-card .header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.bot-card .name { font-weight:700; font-size:1.1rem; cursor:pointer; }

.bot-card .status {
    font-size:.85rem;
    padding:4px 12px;
    border-radius:20px;
    background:var(--panel-3);
}

.bot-card .status.running { color:#7CFC9B; }
.bot-card .status.stopped { color:#ff6b6b; }

.bot-card .actions { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

.bot-card .actions button {
    background:var(--panel-3);
    color:var(--text);
    border:1px solid var(--border);
    padding:6px 14px;
    font-size:14px;
}

.bot-card .actions button:hover { background:var(--panel-2); }
.bot-card .actions button.start { color:#7CFC9B; }
.bot-card .actions button.stop { color:#ff6b6b; }
.bot-card .actions button.restart { color:#f5c76b; }
.bot-card .actions button.preview { color:#b07cf5; }
.bot-card .actions button.edit { color:#6bc5f5; }
.bot-card .actions button.delete { color:#ff6b6b; }

.bot-card .config {
    margin-top:10px;
    background:#111;
    padding:12px;
    border-radius:10px;
    font-size:.85rem;
    display:none;
    overflow-x:auto;
}

.bot-card .config.show { display:block; }

.bot-card .config pre { direction:ltr; text-align:left; font-size:.8rem; }

/* ===== المودال ===== */
.modal {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
    padding:16px;
}

.modal.hidden { display:none; }

.modal-content {
    background:var(--panel);
    padding:28px;
    border-radius:16px;
    width:min(92%, 520px);
    max-height:88vh;
    overflow-y:auto;
    border:1px solid var(--border);
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.modal-content .close {
    float:left;
    font-size:1.6rem;
    line-height:1;
    cursor:pointer;
    color:var(--muted);
    transition:color .2s;
}

.modal-content .close:hover { color:var(--text); }

.modal-content h3 { margin-bottom:16px; text-align:center; }

#createBotForm { display:flex; flex-direction:column; gap:10px; }

.icon-row {
    display:flex;
    gap:8px;
}

.icon-row input { flex:1; min-width:0; }

.icon-row button {
    flex-shrink:0;
    background:var(--panel-3);
    color:var(--text);
    border:1px solid var(--border);
    white-space:nowrap;
}

.icon-row button:hover { background:var(--panel-2); }

.icon-status {
    font-size:.85rem;
    color:var(--green);
    min-height:1.2em;
}

.icon-status.error { color:#ff6b6b; }

/* ===== السجلات ===== */
#page-logs select { max-width:340px; }

#refreshLogsBtn { margin-inline-start:10px; }

#logContent {
    background:#111;
    padding:15px;
    border-radius:10px;
    white-space:pre-wrap;
    font-family:Consolas,Menlo,monospace;
    font-size:.85rem;
    max-height:400px;
    overflow-y:auto;
    margin-top:12px;
    border:1px solid var(--border);
    direction:ltr;
    text-align:left;
}

/* ===== التضبيطات ===== */
#settingsContent form {
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:400px;
    margin-top:12px;
}

#settingsContent h4 { margin:16px 0 4px; color:var(--muted); }
#settingsContent hr { border:none; border-top:1px solid var(--border); margin:20px 0; }
#settingsContent img { max-width:200px; border-radius:10px; margin-top:10px; }
#totpDisplay p { color:var(--muted); font-size:.9rem; word-break:break-all; }

/* ===== صفحة الدخول ===== */
.login-body {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:16px;
}

.login-wrap { width:100%; max-width:380px; }

.login-box {
    background:var(--panel);
    padding:32px 28px;
    border-radius:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
    border:1px solid var(--border);
    box-shadow:0 20px 60px rgba(0,0,0,.4);
}

.login-box h2 {
    color:var(--accent);
    text-align:center;
    margin-bottom:8px;
    font-size:1.3rem;
}

.login-box button { padding:13px; font-weight:600; }

.login-error { color:#ff6b6b; text-align:center; min-height:1.2em; font-size:.9rem; }

/* ===== زر القائمة (فتح/إغلاق الـ sidebar) ===== */
#menuBtn {
    display:block;
    position:fixed;
    top:10px;
    right:10px;
    background:var(--accent);
    color:#fff;
    border:none;
    font-size:1.4rem;
    padding:6px 14px;
    border-radius:10px;
    z-index:1001;
    cursor:pointer;
    line-height:1.2;
    box-shadow:0 4px 14px rgba(0,0,0,.4);
}

@media (min-width:769px) {
    #menuBtn { transition:right .3s ease; }
    body.sidebar-open #menuBtn { right:240px; }
}

/* ===== المعاينة (محاكاة ديسكورد) ===== */
.preview-content { width:min(94%, 780px); }

.preview-note {
    text-align:center;
    color:var(--muted);
    font-size:.85rem;
    margin:-8px 0 14px;
}

.dc-preview {
    direction:ltr;
    display:flex;
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--border);
    background:#36393f;
    color:#dcddde;
    min-height:380px;
    font-size:13px;
}

.dc-sidebar { width:200px; background:#2f3136; padding:10px; flex-shrink:0; }

.dc-server-top {
    display:flex;
    align-items:center;
    gap:8px;
    padding:4px 6px 10px;
    border-bottom:1px solid #202225;
    margin-bottom:8px;
}

.dc-icon-wrap {
    width:38px;
    height:38px;
    border-radius:50%;
    overflow:hidden;
    background:#202225;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.dc-icon { width:38px; height:38px; object-fit:cover; }

.dc-icon-fallback {
    /* مخفي افتراضيًا: يظهر فقط إذا فشل تحميل الصورة (عبر onerror) */
    display:none;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#5865f2;
    color:#fff;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:16px;
}

.dc-server-name {
    font-weight:700;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.dc-channels { display:flex; flex-direction:column; gap:2px; }

.dc-channel {
    display:flex;
    align-items:center;
    gap:6px;
    color:#8e9297;
    padding:4px 6px;
    border-radius:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.dc-channel.active { background:#393c43; color:#fff; }

.dc-hash { color:#72767d; }

.dc-main { flex:1; display:flex; flex-direction:column; min-width:0; }

.dc-header {
    padding:10px 14px;
    border-bottom:1px solid #2f3136;
    font-weight:700;
    color:#fff;
}

.dc-messages {
    flex:1;
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:14px;
    overflow-y:auto;
}

.dc-msg { display:flex; gap:10px; }

.dc-avatar {
    width:34px;
    height:34px;
    border-radius:50%;
    background:#5865f2;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;
    overflow:hidden;
}

/* صورة أفاتار البوت الحقيقية في معاينة الرسائل */
.dc-avatar-img {
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    flex-shrink:0;
}

/* الحرف البديل: مخفي افتراضيًا، يظهر إذا فشلت صورة الأفاتار */
.dc-avatar-letter {
    display:none;
    width:34px;
    height:34px;
    border-radius:50%;
    align-items:center;
    justify-content:center;
}

.dc-msg-head { display:flex; gap:8px; align-items:baseline; }
.dc-msg-head b { color:#fff; }
.dc-time { color:#72767d; font-size:11px; }

.dc-msg-content {
    margin-top:2px;
    color:#dcddde;
    white-space:pre-wrap;
    word-break:break-word;
}

.dc-everyone {
    background:#f23f43;
    color:#fff;
    border-radius:3px;
    padding:0 4px;
    font-size:11px;
    font-weight:600;
}

.dc-input {
    margin:10px 14px 14px;
    background:#40444b;
    border-radius:8px;
    padding:9px 12px;
    color:#8e9297;
}

.dc-members {
    width:170px;
    background:#2f3136;
    padding:10px;
    flex-shrink:0;
}

.dc-members-title {
    color:#8e9297;
    font-size:11px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.dc-role {
    display:flex;
    align-items:center;
    gap:6px;
    color:#dcddde;
    padding:3px 4px;
    border-radius:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.dc-role-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:#5865f2;
    flex-shrink:0;
}

/* ===== الشاشات الصغيرة: نفس تجربة اللابتوب مع تمرير سلس بدل إخفاء العناصر ===== */
@media (max-width:768px) {
    #sidebar { width:min(60vw, 220px); }

    #mainContent { padding:64px 14px 20px; }
    body.sidebar-open #mainContent { padding-inline-start:calc(min(60vw,220px) + 14px); }
    body.sidebar-open #menuBtn { right:calc(min(60vw,220px) + 10px); transition:right .3s ease; }

    .stats { grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:12px; }

    .modal-content { padding:22px 18px; width:100%; max-height:85vh; }

    /* المعاينة تحافظ على تخطيط اللابتوب الكامل (الرتب تظهر دائمًا)
       مع تمرير أفقي داخل النافذة على الشاشات الضيقة */
    .preview-content { overflow-x:auto; }
    .dc-preview { min-width:640px; }

    .login-box { padding:26px 20px; }

    .quick-actions button { flex:1; }
}

/* ملاحظة نموذج تغيير كلمة المرور الإجباري */
.change-note {
    text-align:center;
    color:var(--muted);
    font-size:.9rem;
    margin:-4px 0 4px;
}

/* ===== قائمة المستخدمين ===== */
.user-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    background:var(--panel-3);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 14px;
    margin-bottom:8px;
    max-width:400px;
}

.user-row .user-name { font-weight:600; }
.user-row em { color:var(--muted); font-style:normal; font-size:.85rem; }

.user-del {
    background:transparent;
    color:#ff6b6b;
    border:1px solid var(--border);
    padding:4px 12px;
    font-size:13px;
}