/* Zajel (زاجل) identity layer. Loaded last: retunes the saas.css tokens to the Zajel logo colours and styles the login. */

/* ---------- Tokens: Zajel blue (logo Z) + cyan (logo pigeon) ---------- */
:root,html[data-theme="light"]{
 --z-blue:#0D4F9E;--z-blue-deep:#083A78;--z-cyan:#14B8CC;--z-ink:#0F172A;
 --s-bg:#F8FAFC;--s-surface:#FFFFFF;--s-surface-2:#F1F5F9;--s-surface-3:#E2E8F0;
 --s-brand:#0D4F9E;--s-brand-hover:#083A78;--s-brand-soft:#E8F0FA;--s-brand-soft-2:#D3E2F5;--s-on-brand:#FFFFFF;
 --s-text:#0F172A;--s-text-2:#475569;--s-text-3:#64748B;--s-border:#E2E8F0;--s-border-strong:#CBD5E1;
 --s-out-bubble:#D6E6FB;--s-out-border:#BFD6F5;--s-in-bubble:#F1F5F9;--s-thread:#FFFFFF;
 --s-ring:0 0 0 3px rgba(13,79,158,.22);
 --s-font-ar:"IBM Plex Sans Arabic","Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
 --s-font-en:"Plus Jakarta Sans","Inter","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-theme="dark"]{
 --z-blue:#1D64C2;--z-blue-deep:#0D4F9E;--z-cyan:#22D3EE;--z-ink:#F8FAFC;
 --s-bg:#0B1120;--s-surface:#111827;--s-surface-2:#1E293B;--s-surface-3:#273449;
 --s-brand:#4A8FE0;--s-brand-hover:#6FA8EC;--s-brand-soft:rgba(74,143,224,.14);--s-brand-soft-2:rgba(74,143,224,.24);--s-on-brand:#FFFFFF;
 --s-text:#F8FAFC;--s-text-2:#CBD5E1;--s-text-3:#94A3B8;--s-border:#334155;--s-border-strong:#475569;
 --s-out-bubble:#0D4F9E;--s-out-border:#0D4F9E;--s-in-bubble:#1E293B;--s-thread:#0B1120;
 --s-ring:0 0 0 3px rgba(74,143,224,.35);
}

/* ---------- Login ---------- */
html #loginPage.zj-login{
 position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;box-sizing:border-box;
 background:radial-gradient(900px 600px at 85% -10%,rgba(20,184,204,.16),transparent 60%),radial-gradient(800px 600px at -10% 110%,rgba(20,99,200,.14),transparent 60%),var(--s-bg)!important;
 font-family:var(--s-font-ar);overflow:auto
}
html[lang="en"] #loginPage.zj-login{font-family:var(--s-font-en)}
html #loginPage.zj-login::before,html #loginPage.zj-login::after{display:none!important}
html #loginPage.zj-login .zj-login-card{
 position:relative;display:grid;grid-template-columns:1.05fr 1fr;width:100%;max-width:940px;min-height:540px;padding:0!important;margin:0;
 background:var(--s-surface)!important;border:1px solid var(--s-border);border-radius:20px!important;box-shadow:0 24px 60px rgba(15,23,42,.10),0 2px 8px rgba(15,23,42,.05)!important;overflow:hidden;backdrop-filter:none
}
html #loginPage.zj-login .zj-login-card::before,html #loginPage.zj-login .zj-login-card::after{display:none!important}

/* Brand side: white so the logo's white background blends in, in both themes. */
html #loginPage.zj-login .zj-login-brand{
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 32px;background:#FFFFFF;border-inline-end:1px solid var(--s-border);text-align:center
}
html #loginPage.zj-login .zj-login-logo{width:100%;max-width:330px;height:auto;aspect-ratio:1;object-fit:contain;display:block}
html #loginPage.zj-login .zj-login-tagline,html #loginPage.zj-login .zj-login-tagline span{margin:-8px 0 0;color:#0D4F9E!important;font-size:18px;font-weight:700;line-height:1.6}
html #loginPage.zj-login .zj-login-tagline span{margin:0}
html #loginPage.zj-login .zj-login-channels{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
html #loginPage.zj-login .zj-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid #E2E8F0!important;color:#334155!important;background:#F8FAFC!important}
html #loginPage.zj-login .zj-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
html #loginPage.zj-login .zj-wa::before{background:#22C55E}
html #loginPage.zj-login .zj-ms::before{background:#3B82F6}
html #loginPage.zj-login .zj-fb::before{background:#1877F2}
html #loginPage.zj-login .zj-ig::before{background:#E1306C}

/* Form side */
html #loginPage.zj-login .zj-login-form{display:flex;flex-direction:column;justify-content:center;gap:0;padding:40px 44px!important;background:var(--s-surface)!important;border:0!important;box-shadow:none!important;min-height:0}
html #loginPage.zj-login .zj-login-top{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:28px}
html #loginPage.zj-login .zj-login-mini{display:none;width:44px;height:44px;border-radius:12px;object-fit:cover;object-position:50% 38%;margin-inline-end:auto}
html #loginPage.zj-login .cc-language-toggle{position:static!important;margin:0!important;padding:6px 14px!important;border-radius:999px!important;border:1px solid var(--s-border)!important;background:var(--s-surface)!important;color:var(--s-text-2)!important;font-size:12px!important;font-weight:600!important;box-shadow:none!important}
html #loginPage.zj-login .login-title{text-align:start;margin:0 0 26px}
html #loginPage.zj-login .login-title h2{margin:0;color:var(--s-text);font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-.2px}
html #loginPage.zj-login .login-title p{margin:6px 0 0;color:var(--s-text-3);font-size:14px;font-weight:500}
html #loginPage.zj-login .login-field-label{display:block;margin:0 0 8px;color:var(--s-text-2);font-size:13px;font-weight:600}
html #loginPage.zj-login .login-input-group{position:relative;margin-bottom:18px}
html #loginPage.zj-login .login-input-group .input{
 width:100%;box-sizing:border-box;height:48px;margin:0;padding-block:0;padding-inline:44px 14px!important;border:1px solid var(--s-border)!important;border-radius:12px!important;
 background:var(--s-surface-2)!important;color:var(--s-text)!important;font-size:15px;font-weight:500;box-shadow:none!important;transform:none!important;transition:border-color .15s,box-shadow .15s,background .15s
}
html #loginPage.zj-login .login-input-group .input::placeholder{color:var(--s-text-3);font-weight:400}
html #loginPage.zj-login .login-input-group .input:focus{background:var(--s-surface)!important;border-color:var(--s-brand)!important;box-shadow:var(--s-ring)!important;outline:none}
html #loginPage.zj-login .login-icon{position:absolute;inset-inline-start:14px;right:auto;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:var(--s-text-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:none;font-size:0}
html[dir="rtl"] #loginPage.zj-login .login-icon{right:14px;left:auto}
html #loginPage.zj-login .login-input-group .input:focus~.login-icon,html #loginPage.zj-login .login-input-group:focus-within .login-icon{stroke:var(--s-brand)}
html #loginPage.zj-login .login-btn{
 display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;margin-top:6px;padding:0;border:0;border-radius:12px!important;
 background:linear-gradient(135deg,var(--z-blue),var(--z-blue-deep))!important;color:#fff!important;font-size:15px;font-weight:700;box-shadow:0 10px 24px rgba(13,79,158,.25)!important;cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s
}
html #loginPage.zj-login .login-btn::before,html #loginPage.zj-login .login-btn::after{display:none!important}
html #loginPage.zj-login .login-btn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 14px 28px rgba(13,79,158,.32)!important}
html #loginPage.zj-login .login-btn:disabled{opacity:.7;cursor:wait;transform:none}
html #loginPage.zj-login .zj-login-divider{display:flex;align-items:center;gap:12px;margin:26px 0 14px;color:var(--s-text-3);font-size:13px}
html #loginPage.zj-login .zj-login-divider::before,html #loginPage.zj-login .zj-login-divider::after{content:"";flex:1;height:1px;background:var(--s-border)}
html #loginPage.zj-login .zj-login-signup{display:flex;align-items:center;justify-content:center;height:46px;border-radius:12px;border:1px solid var(--s-border-strong);color:var(--s-brand);background:transparent;font-size:14px;font-weight:700;text-decoration:none;transition:background .15s,border-color .15s}
html #loginPage.zj-login .zj-login-signup:hover{background:var(--s-brand-soft);border-color:var(--s-brand)}
html #loginPage.zj-login .zj-login-note{margin:12px 0 0;color:var(--s-text-3);font-size:12px;text-align:center}
html #loginPage.zj-login .login-loading{padding:30px 0;color:var(--s-text-3);text-align:center}
html #loginPage.zj-login .login-loading .spinner{border-color:var(--s-border);border-top-color:var(--s-brand)}

html[data-theme="dark"] #loginPage.zj-login .zj-login-card{box-shadow:0 24px 60px rgba(0,0,0,.45)!important}

@media (max-width:820px){
 html #loginPage.zj-login{align-items:flex-start;padding:16px}
 html #loginPage.zj-login .zj-login-card{grid-template-columns:1fr;min-height:0;max-width:460px}
 html #loginPage.zj-login .zj-login-brand{padding:24px 24px 18px;gap:12px;border-inline-end:0;border-bottom:1px solid var(--s-border)}
 html #loginPage.zj-login .zj-login-logo{max-width:190px}
 html #loginPage.zj-login .zj-login-tagline{font-size:15px}
 html #loginPage.zj-login .zj-login-form{padding:24px 20px 28px!important}
 html #loginPage.zj-login .zj-login-top{margin-bottom:18px}
 html #loginPage.zj-login .login-title h2{font-size:24px}
}

/* The company code field is typed left-to-right inside the right-to-left form: the icon keeps its side. */
html[dir="rtl"] #loginPage.zj-login .login-input-group .input[dir="ltr"]{padding-left:14px!important;padding-right:44px!important;text-align:left}
html[dir="ltr"] #loginPage.zj-login .login-input-group .input[dir="ltr"]{padding-left:44px!important;padding-right:14px!important}

/* ---------- Company admin: add a channel ---------- */
.zj-add-channel{border:1px dashed var(--s-brand);background:var(--s-brand-soft);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.zj-add-channel strong{display:block;font-size:16px;color:var(--s-text)}
.zj-add-channel small{color:var(--s-text-3)}
.zj-add-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.zj-add-form .input{flex:1 1 180px;min-width:0;margin:0!important}
.zj-add-form select.input{flex:0 1 220px}
.zj-fb-opts{display:flex;gap:12px;align-items:center;color:var(--s-text-2);font-size:13px}
.zj-fb-opts label{display:flex;gap:6px;align-items:center}
.zj-add-status{margin:0;font-size:13px;color:var(--s-text-2)}
.zj-add-status:empty{display:none}
.zj-empty-channels{padding:18px;text-align:center;color:var(--s-text-3)}
.btn-danger{background:#DC2626!important;color:#fff!important;border-color:#DC2626!important}

/* Parts a company wasn't given. */
html[data-zj-no-telegram] #tab-telegram,html[data-zj-no-telegram] #tgFilterTab{display:none!important}
html[data-zj-no-fbcomments] #ccUnifiedTabs [data-mode="comments"],html[data-zj-no-webchat] #ccUnifiedTabs [data-mode="studio"],html[data-zj-company="tenant"] #ccUnifiedTabs [data-mode="archive"]{display:none!important}
html[data-zj-no-webchat] #webChatSettings{display:none!important}
/* channel type picker (logo cards) */
.zj-add-form{flex-direction:column!important;align-items:stretch!important}
.zj-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.zj-kind{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border:1px solid var(--s-border);border-radius:12px;background:var(--s-surface);cursor:pointer;transition:border-color .15s,background .15s;text-align:center}
.zj-kind input{position:absolute;opacity:0;pointer-events:none}
.zj-kind span{display:flex;gap:4px}
.zj-kind img{width:26px;height:26px;border-radius:6px}
.zj-kind b{font-size:13px;color:var(--s-text)}
.zj-kind:has(input:checked){border-color:var(--s-brand);background:var(--s-brand-soft);box-shadow:var(--s-ring)}
.zj-add-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.zj-add-row > .input{flex:1 1 200px}
.zj-web-opts{display:flex;flex-wrap:wrap;gap:8px;flex:2 1 320px}
.zj-web-opts .input{flex:1 1 150px;margin:0!important}
.zj-web-opts[hidden],.zj-fb-opts[hidden]{display:none!important}
.zj-fb-opts img{width:16px;height:16px;border-radius:4px}
.zj-web-hint{color:var(--s-text-3);font-size:12px}
/* management pages: the same light top bar as the chat workspace */
html[data-theme] body #appShell#appShell > .topbar{background:var(--s-surface)!important;color:var(--s-text)!important;border:1px solid var(--s-border)!important;box-shadow:none!important;border-radius:14px!important}
html[data-theme] body #appShell#appShell > .topbar *{color:inherit}
html[data-theme] body #appShell#appShell > .topbar .topbar-title,html[data-theme] body #appShell#appShell > .topbar #curTabLabel{color:var(--s-text)!important}
html[data-theme] body #appShell#appShell > .topbar small,html[data-theme] body #appShell#appShell > .topbar .topbar-kicker{color:var(--s-text-3)!important}
html[data-theme] body #appShell#appShell > .topbar button{background:var(--s-surface)!important;border:1px solid var(--s-border)!important;color:var(--s-text-2)!important;box-shadow:none!important}