/* ==========================================================================
   Wakeel — app styles (RTL, Bootstrap 5.3)
   ========================================================================== */
:root {
  --wk-primary: #6d5ef8;
  --wk-primary-600: #5a4be6;
  --wk-primary-50: #f1efff;
  --wk-primary-100: #e4e0ff;
  --wk-gold: #ffb020;
  --wk-ink: #10122b;
  --wk-text: #2a2d45;
  --wk-muted: #6b7091;
  --wk-bg: #f5f6fb;
  --wk-card: #ffffff;
  --wk-border: #e6e8f2;
  --wk-sidebar: #12112a;
  --wk-sidebar-2: #1b1a3a;
  --wk-radius: 16px;
  --wk-shadow: 0 1px 2px rgba(16, 18, 43, .04), 0 6px 24px rgba(16, 18, 43, .06);
  --wk-shadow-lg: 0 20px 60px rgba(16, 18, 43, .14);

  --st-draft: #8a8fad;   --st-draft-bg: #f0f1f7;
  --st-review: #c47f00;  --st-review-bg: #fff4dc;
  --st-approved: #2563eb; --st-approved-bg: #e5eeff;
  --st-published: #0f9d6b; --st-published-bg: #dcf7ec;

  --bs-primary: var(--wk-primary);
  --bs-primary-rgb: 109, 94, 248;
  --bs-body-font-family: 'Cairo', system-ui, sans-serif;
  --bs-body-color: var(--wk-text);
  --bs-body-bg: var(--wk-bg);
  --bs-border-color: var(--wk-border);
  --bs-link-color: var(--wk-primary);
  --bs-link-color-rgb: 109, 94, 248;
  --bs-link-hover-color: var(--wk-primary-600);
}

/* 15px instead of the browser's 16px: every rem size (text, headings, spacing) scales down together.
   A percentage, so a reader who enlarged their browser's text still gets it. */
html { font-size: 93.75%; }
html, body { overflow-x: clip; }
body { overflow-wrap: break-word; font-family: var(--bs-body-font-family); background: var(--wk-bg); color: var(--wk-text); }
h1, h2, h3, h4, h5, h6, .fw-display { color: var(--wk-ink); font-weight: 700; }
a { text-decoration: none; }
.text-muted { color: var(--wk-muted) !important; }
.small-muted { font-size: .85rem; color: var(--wk-muted); }
::selection { background: var(--wk-primary-100); }

/* ---------- Buttons & forms ---------- */
.btn { border-radius: 12px; font-weight: 600; padding: .55rem 1.1rem; }
.btn-sm { border-radius: 10px; padding: .35rem .8rem; }
.btn-lg { border-radius: 14px; padding: .8rem 1.5rem; }
.btn-primary { --bs-btn-bg: var(--wk-primary); --bs-btn-border-color: var(--wk-primary); --bs-btn-hover-bg: var(--wk-primary-600);
  --bs-btn-hover-border-color: var(--wk-primary-600); --bs-btn-active-bg: var(--wk-primary-600); --bs-btn-disabled-bg: var(--wk-primary);
  --bs-btn-disabled-border-color: var(--wk-primary); box-shadow: 0 6px 18px rgba(109, 94, 248, .28); }
.btn-soft { background: var(--wk-primary-50); color: var(--wk-primary-600); border: 0; }
.btn-soft:hover, .btn-soft:focus { background: var(--wk-primary-100); color: var(--wk-primary-600); }
.btn-light { background: #fff; border: 1px solid var(--wk-border); }
.btn-light:hover { background: #f7f7fc; border-color: #d9dcea; }
.btn-ai { background: linear-gradient(135deg, #7c6cff, #4f3bdb); color: #fff; border: 0; box-shadow: 0 8px 22px rgba(79, 59, 219, .3); }
.btn-ai:hover, .btn-ai:focus { color: #fff; filter: brightness(1.07); }
.form-control, .form-select { border-radius: 12px; border-color: var(--wk-border); padding: .6rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--wk-primary); box-shadow: 0 0 0 .22rem rgba(109, 94, 248, .15); }
.form-label { font-weight: 600; font-size: .92rem; color: var(--wk-ink); margin-bottom: .35rem; }
.form-text { color: var(--wk-muted); font-size: .8rem; }
.form-check-input:checked { background-color: var(--wk-primary); border-color: var(--wk-primary); }
input[type=color].form-control { height: 46px; padding: .3rem; width: 100%; cursor: pointer; }

/* ---------- Cards ---------- */
.wk-card { background: var(--wk-card); border: 1px solid var(--wk-border); border-radius: var(--wk-radius); box-shadow: var(--wk-shadow); }
.wk-card-body { padding: 1.35rem; }
.wk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--wk-border); }
.wk-card-head h2, .wk-card-head h3 { font-size: 1.05rem; margin: 0; }
.wk-section-title { font-size: 1.05rem; margin-bottom: .9rem; display: flex; align-items: center; gap: .5rem; }

/* ---------- App layout ---------- */
.wk-app { min-height: 100vh; }
.wk-sidebar { width: 272px; background: var(--wk-sidebar) !important; color: #c9c8e6; position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
  display: flex; flex-direction: column; z-index: 1045; } /* above the offcanvas backdrop (1040) on phones */
.wk-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; height: 100%; }
@media (min-width: 992px) { .wk-main { margin-inline-start: 272px; } }
.wk-brand { display: flex; align-items: center; gap: .7rem; padding: 1.35rem 1.35rem 1rem; color: #fff; }
.wk-brand img { width: 40px; height: 40px; }
.wk-brand__name { font-size: 1.45rem; font-weight: 700; letter-spacing: -.3px; color: #fff; line-height: 1; }
.wk-brand__tag { font-size: .72rem; color: #8f8db8; margin-top: 3px; }

.wk-company-switch { margin: .25rem 1rem 1rem; }
.wk-company-btn { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border-radius: 14px;
  background: var(--wk-sidebar-2); border: 1px solid rgba(255,255,255,.06); color: #fff; text-align: start; }
.wk-company-btn:hover { background: #232149; }
.wk-avatar { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; background: var(--wk-primary); }
.wk-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; }
.wk-company-btn .name { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.wk-company-btn .role { font-size: .74rem; color: #8f8db8; }
.wk-company-menu { min-width: 240px; border-radius: 14px; border: 0; box-shadow: var(--wk-shadow-lg); padding: .4rem; }
.wk-company-menu .dropdown-item { border-radius: 10px; padding: .5rem .65rem; display: flex; align-items: center; gap: .6rem; }
.wk-company-menu .wk-avatar { width: 30px; height: 30px; border-radius: 9px; font-size: .85rem; }

.wk-nav { padding: 0 .75rem; flex: 1; overflow-y: auto; }
.wk-nav__label { font-size: .7rem; letter-spacing: .08em; color: #6f6d98; padding: 1rem .75rem .4rem; font-weight: 600; }
.wk-nav a { display: flex; align-items: center; gap: .75rem; color: #c9c8e6; padding: .62rem .8rem; border-radius: 12px;
  font-weight: 500; font-size: .95rem; margin-bottom: 2px; transition: background .15s, color .15s; }
.wk-nav a i { font-size: 1.1rem; opacity: .85; }
.wk-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.wk-nav a.active { background: linear-gradient(135deg, rgba(124,108,255,.28), rgba(124,108,255,.12)); color: #fff;
  box-shadow: inset -3px 0 0 var(--wk-primary); }
.wk-nav a.active i { color: #b3aaff; opacity: 1; }
.wk-nav .badge { margin-inline-start: auto; }

.wk-sidebar-foot { padding: 1rem; border-top: 1px solid rgba(255,255,255,.06); }
.wk-ai-status { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #a3a1c9; margin-bottom: .75rem; }
.wk-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.wk-dot.off { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.wk-user { display: flex; align-items: center; gap: .6rem; color: #fff; }
.wk-user .wk-avatar { width: 34px; height: 34px; border-radius: 50%; background: #2c2a57; font-size: .9rem; }
.wk-user a { color: #8f8db8; }
.wk-user a:hover { color: #fff; }

/* Top bar: the page title on one side; its actions, then the language toggle and notifications, on the other. */
.wk-topbar { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 2rem; }
.wk-topbar__title { flex: 1; min-width: 0; }
.wk-topbar h1 { font-size: 1.45rem; margin: 0; line-height: 1.3; }
.wk-topbar .subtitle { color: var(--wk-muted); font-size: .9rem; margin-top: .15rem; }
.wk-topbar .actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.wk-topbar .actions:not(:has(> *)) { display: none; }
.wk-topbar__tools { display: flex; align-items: center; gap: .5rem; flex: none; }
@media (min-width: 992px) {
  .wk-topbar { position: sticky; top: 0; z-index: 1020; min-height: 76px; background: rgba(245, 246, 251, .86);
    backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--wk-border); }
  .wk-topbar .actions:has(> *) + .wk-topbar__tools { padding-inline-start: 1rem; border-inline-start: 1px solid var(--wk-border); }
  .wk-impersonating .wk-topbar { top: 48px; }
  /* Sticky columns start below the top bar (its height is kept in --wk-topbar-h by app.js). */
  .wk-app .wk-preview-wrap { top: calc(var(--wk-topbar-h, 76px) + 1rem); }
  .wk-impersonating .wk-preview-wrap { top: calc(var(--wk-topbar-h, 76px) + 48px + 1rem); }
}
.wk-content { padding: 1.5rem 2rem 3rem; }
.wk-menu-btn { border: 1px solid var(--wk-border); background: #fff; border-radius: 12px; width: 42px; height: 42px; }
@media (max-width: 991.98px) {
  .wk-topbar { padding: 1rem 1rem .5rem; }
  .wk-content { padding: .75rem 1rem 3rem; }
  .wk-sidebar.offcanvas-lg { width: 280px; }
}
/* Phones: page actions fill the width, two per row (a lone or odd last one spans the row). */
@media (max-width: 767.98px) {
  .wk-topbar { align-items: flex-start; column-gap: .75rem; }
  .wk-topbar h1 { font-size: 1.3rem; min-height: 42px; display: flex; align-items: center; }
  .wk-menu-btn, .wk-bell { flex: none; }
  .wk-topbar .actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-inline-start: 0; gap: .6rem; }
  .wk-topbar .actions > :only-child, .wk-topbar .actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .wk-topbar .actions > *, .wk-topbar .actions .btn, .wk-topbar .actions form, .wk-topbar .actions .dropdown { width: 100%; }
  .wk-topbar .actions .btn { justify-content: center; display: inline-flex; align-items: center; gap: .4rem; padding-block: .7rem;
    white-space: nowrap; font-size: .9rem; }
  .wk-topbar .actions > :empty { display: none; }
  /* Post editor: the status buttons (approve / request changes) get their own full row on top. */
  #statusActions { grid-column: 1 / -1; order: -1; }
  #statusActions .btn { flex: 1; }
  .wk-topbar .actions .btn-group .btn { width: auto; flex: 1; }
  .wk-topbar .actions .dropdown-menu { width: 100%; }
  .wk-stat { padding: .9rem; gap: .7rem; }
  .wk-stat__icon { width: 42px; height: 42px; font-size: 1.15rem; border-radius: 12px; }
  .wk-stat__value { font-size: 1.4rem; }
  .wk-stat .wk-stat__label { font-size: .78rem; white-space: normal; line-height: 1.35; }
  .wk-stat > div:last-child { min-width: 0; }
}

/* ---------- Alerts / toasts ---------- */
.alert { border-radius: 14px; border: 0; }
.wk-toasts { position: fixed; bottom: 1.25rem; inset-inline-end: 1.25rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; }
.wk-toast { background: var(--wk-ink); color: #fff; padding: .75rem 1.1rem; border-radius: 12px; box-shadow: var(--wk-shadow-lg);
  font-size: .92rem; display: flex; align-items: center; gap: .6rem; animation: wkIn .25s ease-out; max-width: 380px; }
.wk-toast.error { background: #b42318; }
.wk-toast.success i { color: #4ade80; }
@keyframes wkIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Stats ---------- */
.wk-stat { padding: 1.2rem 1.3rem; display: flex; align-items: center; gap: 1rem; height: 100%; color: inherit; transition: transform .15s, box-shadow .15s; }
a.wk-stat:hover { transform: translateY(-2px); box-shadow: var(--wk-shadow-lg); color: inherit; }
.wk-stat__label { white-space: nowrap; }
.wk-stat__icon { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.wk-stat__value { font-size: 1.7rem; font-weight: 700; color: var(--wk-ink); line-height: 1.1; }
.wk-stat__label { color: var(--wk-muted); font-size: .85rem; }
.tone-primary { background: var(--wk-primary-50); color: var(--wk-primary); }
.tone-review { background: var(--st-review-bg); color: var(--st-review); }
.tone-approved { background: var(--st-approved-bg); color: var(--st-approved); }
.tone-published { background: var(--st-published-bg); color: var(--st-published); }

/* ---------- Status pills ---------- */
.wk-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; padding: .22rem .6rem;
  border-radius: 999px; white-space: nowrap; }
.wk-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wk-status.draft { color: var(--st-draft); background: var(--st-draft-bg); }
.wk-status.review { color: var(--st-review); background: var(--st-review-bg); }
.wk-status.approved { color: var(--st-approved); background: var(--st-approved-bg); }
.wk-status.published { color: var(--st-published); background: var(--st-published-bg); }
.wk-platforms { display: inline-flex; gap: .3rem; color: var(--wk-muted); }
.wk-platforms .bi-facebook { color: #1877f2; }
.wk-platforms .bi-instagram { color: #e1306c; }
.wk-platforms .bi-tiktok { color: #111; }

/* ---------- Hero / AI banner ---------- */
.wk-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 1.8rem 2rem; color: #fff;
  background: radial-gradient(circle at 10% 0%, #8f82ff 0%, transparent 45%), linear-gradient(135deg, #4f3bdb 0%, #6d5ef8 55%, #8a5cf6 100%);
  box-shadow: 0 20px 50px rgba(79, 59, 219, .28); }
.wk-hero h2 { color: #fff; font-size: 1.5rem; }
.wk-hero p { color: rgba(255,255,255,.85); margin: 0; }
.wk-hero .sparkle { position: absolute; inset-inline-end: 2rem; top: 50%; transform: translateY(-50%); font-size: 7rem; opacity: .15; }
.wk-hero .btn-light { border: 0; color: var(--wk-primary-600); font-weight: 700; }

/* ---------- Post cards ---------- */
.wk-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.wk-post { background: #fff; border: 1px solid var(--wk-border); border-radius: 16px; overflow: hidden; box-shadow: var(--wk-shadow);
  display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; position: relative; }
.wk-post:hover { transform: translateY(-3px); box-shadow: var(--wk-shadow-lg); }
.wk-post__thumb { aspect-ratio: 4 / 5; background: #eef0f8; display: flex; align-items: center; justify-content: center;
  color: var(--wk-muted); overflow: hidden; position: relative; }
.wk-post__thumb img { width: 100%; height: 100%; object-fit: contain; }
.wk-post__thumb .video { text-align: center; padding: 1rem; }
.wk-post__thumb .video i { font-size: 2.2rem; color: var(--wk-primary); }
.wk-post__thumb .stale { position: absolute; top: .5rem; inset-inline-end: .5rem; background: rgba(16,18,43,.72); color: #fff; font-size: .7rem;
  padding: .2rem .5rem; border-radius: 8px; }
.wk-post__body { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.wk-post__title { font-weight: 600; color: var(--wk-ink); font-size: .95rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-post__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--wk-muted); }
.wk-post__select { position: absolute; top: .6rem; inset-inline-start: .6rem; z-index: 2; width: 1.3rem; height: 1.3rem; }
.wk-post.selected { outline: 2px solid var(--wk-primary); }
.wk-post-link { position: absolute; inset: 0; z-index: 1; }

/* ---------- Plan ---------- */
.wk-pillar { border: 1px solid var(--wk-border); border-radius: 14px; padding: .9rem 1rem; height: 100%; background: #fcfcff; }
.wk-pillar .share { font-weight: 700; color: var(--wk-primary); }
.wk-pillar .bar { height: 6px; background: var(--wk-primary-50); border-radius: 6px; overflow: hidden; margin-top: .5rem; }
.wk-pillar .bar span { display: block; height: 100%; background: linear-gradient(90deg, #7c6cff, #4f3bdb); border-radius: 6px; }
.wk-keydate { display: flex; gap: .8rem; padding: .7rem 0; border-bottom: 1px dashed var(--wk-border); }
.wk-keydate:last-child { border-bottom: 0; }
.wk-keydate .d { flex-shrink: 0; width: 52px; text-align: center; background: var(--wk-primary-50); color: var(--wk-primary-600);
  border-radius: 12px; padding: .35rem 0; font-weight: 700; line-height: 1.1; }
.wk-keydate .d small { display: block; font-weight: 500; font-size: .7rem; }

.wk-generating { text-align: center; padding: 3.5rem 1.5rem; }
.wk-orb { width: 110px; height: 110px; margin: 0 auto 1.5rem; border-radius: 50%; position: relative;
  background: conic-gradient(from 0deg, #7c6cff, #ffb020, #4f3bdb, #7c6cff); animation: wkSpin 2.4s linear infinite;
  box-shadow: 0 0 60px rgba(124,108,255,.45); }
.wk-orb::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.wk-orb i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--wk-primary);
  z-index: 1; animation: wkSpin 2.4s linear infinite reverse; }
@keyframes wkSpin { to { transform: rotate(360deg); } }
.wk-progress { height: 8px; border-radius: 8px; background: var(--wk-primary-50); overflow: hidden; max-width: 420px; margin: 1.2rem auto .6rem; }
.wk-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7c6cff, #4f3bdb); transition: width .6s; }

/* ---------- Calendar ---------- */
.wk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--wk-border); gap: 1px;
  border: 1px solid var(--wk-border); border-radius: var(--wk-radius); overflow: hidden; box-shadow: var(--wk-shadow); }
.wk-cal__head { background: #fafbff; padding: .65rem; text-align: center; font-weight: 600; font-size: .85rem; color: var(--wk-muted); }
.wk-cal__day { background: #fff; min-height: 138px; padding: .45rem; display: flex; flex-direction: column; gap: .3rem; position: relative; }
.wk-cal__day.out { background: #fafbfd; }
.wk-cal__day.out .num { opacity: .4; }
.wk-cal__day.today .num { background: var(--wk-primary); color: #fff; }
.wk-cal__day.drop { background: var(--wk-primary-50); box-shadow: inset 0 0 0 2px var(--wk-primary); }
.wk-cal__day .num { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 600; }
.wk-cal__add { position: absolute; top: .45rem; inset-inline-end: .45rem; opacity: 0; border: 0; background: var(--wk-primary-50);
  color: var(--wk-primary); width: 26px; height: 26px; border-radius: 8px; transition: opacity .15s; }
.wk-cal__day:hover .wk-cal__add { opacity: 1; }
.wk-chip { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem; border-radius: 10px; font-size: .78rem;
  background: #f6f7fc; border: 1px solid var(--wk-border); color: var(--wk-ink); cursor: grab; line-height: 1.3; }
.wk-chip:hover { border-color: var(--wk-primary); color: var(--wk-ink); }
.wk-chip img, .wk-chip .ph { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; flex-shrink: 0; background: #e8e9f5;
  display: inline-flex; align-items: center; justify-content: center; color: var(--wk-primary); }
.wk-chip .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.wk-chip .time { color: var(--wk-muted); font-size: .7rem; }
.wk-chip.st-review { border-inline-start: 3px solid var(--st-review); }
.wk-chip.st-approved { border-inline-start: 3px solid var(--st-approved); }
.wk-chip.st-published { border-inline-start: 3px solid var(--st-published); }
.wk-chip.st-draft { border-inline-start: 3px solid var(--st-draft); }
.wk-chip.dragging { opacity: .4; }
@media (max-width: 767.98px) {
  .wk-cal { grid-template-columns: 1fr; }
  .wk-cal__head { display: none; }
  .wk-cal__day { min-height: auto; }
  .wk-cal__day.out { display: none; }
}

/* ---------- Post editor ---------- */
.wk-editor { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 1.25rem; align-items: start; }
@media (max-width: 1199.98px) { .wk-editor { grid-template-columns: 1fr; } }
.wk-preview-wrap { position: sticky; top: 1rem; }
.wk-preview { position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: #e9ebf5; box-shadow: var(--wk-shadow-lg); }
.wk-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wk-preview .loading { position: absolute; inset: 0; background: rgba(255,255,255,.55); display: none; align-items: center; justify-content: center; z-index: 2; }
.wk-preview.busy .loading { display: flex; }
.wk-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .6rem; }
.wk-tpl { border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; background: #fff; padding: 0; text-align: center;
  box-shadow: 0 0 0 1px var(--wk-border); position: relative; }
.wk-tpl .frame { aspect-ratio: 1; position: relative; overflow: hidden; pointer-events: none; }
.wk-tpl .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wk-tpl span { display: block; font-size: .75rem; padding: .3rem 0; font-weight: 600; }
.wk-tpl.active { border-color: var(--wk-primary); box-shadow: 0 0 0 3px var(--wk-primary-100); }
.wk-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: .5rem; max-height: 220px; overflow-y: auto; }
.wk-asset { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; padding: 0; background: #eef0f8; }
.wk-asset img { width: 100%; height: 100%; object-fit: cover; }
.wk-asset.active { border-color: var(--wk-primary); box-shadow: 0 0 0 3px var(--wk-primary-100); }
.wk-asset.none { display: flex; align-items: center; justify-content: center; color: var(--wk-muted); font-size: .75rem; }
.wk-seg { display: inline-flex; background: #eff0f7; border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.wk-seg input { display: none; }
.wk-seg label { padding: .35rem .8rem; border-radius: 9px; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--wk-muted); }
.wk-seg input:checked + label { background: #fff; color: var(--wk-ink); box-shadow: 0 1px 4px rgba(16,18,43,.1); }
.wk-chips-toggle { display: flex; flex-wrap: wrap; gap: .5rem; }
.wk-chips-toggle input { display: none; }
.wk-chips-toggle label { border: 1px solid var(--wk-border); padding: .4rem .85rem; border-radius: 999px; cursor: pointer; font-size: .88rem;
  background: #fff; display: inline-flex; align-items: center; gap: .4rem; }
.wk-chips-toggle input:checked + label { border-color: var(--wk-primary); background: var(--wk-primary-50); color: var(--wk-primary-600); font-weight: 600; }
.wk-ai-box { background: linear-gradient(135deg, #f5f3ff, #eef4ff); border: 1px solid #e0dcff; border-radius: 16px; padding: 1rem; }
.wk-ai-box .quick { display: flex; flex-wrap: wrap; gap: .4rem; }
.wk-ai-box .quick button { background: #fff; border: 1px solid #ddd8ff; border-radius: 999px; font-size: .8rem; padding: .3rem .75rem; color: var(--wk-primary-600); }
.wk-ai-box .quick button:hover { background: var(--wk-primary); color: #fff; border-color: var(--wk-primary); }
.wk-savebar { position: sticky; bottom: 0; z-index: 10; background: rgba(245,246,251,.92); backdrop-filter: blur(8px);
  border-top: 1px solid var(--wk-border); padding: .8rem 0; margin-top: 1rem; display: flex; align-items: center; gap: .6rem; }
.wk-counter { font-size: .75rem; color: var(--wk-muted); }
.wk-counter.over { color: #dc2626; font-weight: 600; }
.wk-script { white-space: pre-wrap; font-size: .92rem; line-height: 1.8; }

/* ---------- Media ---------- */
.wk-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.wk-media { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--wk-border); position: relative; }
.wk-media img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.wk-media .cap { padding: .5rem .7rem; font-size: .8rem; color: var(--wk-muted); display: flex; justify-content: space-between; align-items: center; gap: .3rem; }
.wk-drop { border: 2px dashed #cfd2e6; border-radius: 16px; padding: 2rem; text-align: center; background: #fbfbff; cursor: pointer; transition: all .15s; }
.wk-drop:hover, .wk-drop.over { border-color: var(--wk-primary); background: var(--wk-primary-50); }
.wk-drop i { font-size: 2rem; color: var(--wk-primary); }

/* ---------- Empty state ---------- */
.wk-empty { text-align: center; padding: 3rem 1.5rem; }
.wk-empty .icon { width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; background: var(--wk-primary-50); color: var(--wk-primary); }
.wk-empty h3 { font-size: 1.15rem; }
.wk-empty p { color: var(--wk-muted); max-width: 420px; margin: .3rem auto 1.2rem; }

/* ---------- Wizard ---------- */
.wk-steps { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.wk-step { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; background: #fff;
  border: 1px solid var(--wk-border); font-size: .88rem; font-weight: 600; color: var(--wk-muted); cursor: pointer; }
.wk-step .n { width: 24px; height: 24px; border-radius: 50%; background: #eff0f7; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; }
.wk-step.active { border-color: var(--wk-primary); color: var(--wk-primary-600); }
.wk-step.active .n { background: var(--wk-primary); color: #fff; }
.wk-step.done .n { background: #dcf7ec; color: var(--st-published); }
.wk-step.has-error { border-color: #dc3545; }
.wk-step.has-error .n { box-shadow: 0 0 0 2px #dc3545; }
.wk-steps__caption { display: none; }
/* Phones: five numbered dots on one progress line, with the current step named below. */
@media (max-width: 767.98px) {
  .wk-steps { position: relative; flex-wrap: nowrap; justify-content: space-between; gap: 0; margin-bottom: .6rem; --progress: 0; }
  .wk-steps::before, .wk-steps::after { content: ''; position: absolute; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px;
    inset-inline-start: 17px; }
  .wk-steps::before { inset-inline-end: 17px; background: var(--wk-border); }
  .wk-steps::after { width: calc((100% - 34px) * var(--progress)); background: var(--wk-primary); transition: width .25s; }
  .wk-step { position: relative; z-index: 1; padding: 0; border: 0; background: transparent; }
  .wk-step .t { display: none; }
  .wk-step .n { width: 34px; height: 34px; font-size: .9rem; font-weight: 700; background: #fff; color: var(--wk-muted);
    box-shadow: 0 0 0 2px var(--wk-border); }
  .wk-step.done .n { background: var(--wk-primary); color: #fff; box-shadow: none; }
  .wk-step.active .n { background: var(--wk-primary); color: #fff; box-shadow: 0 0 0 4px var(--wk-primary-100); }
  .wk-steps__caption { display: block; text-align: center; font-weight: 700; color: var(--wk-primary-600); font-size: .95rem; margin-bottom: 1rem; }
}
.wk-pane { display: none; }
.wk-pane.active { display: block; animation: wkIn .2s ease-out; }
.wk-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.wk-swatches > .mb-3 { display: flex; flex-direction: column; justify-content: flex-end; }  /* swatches line up even if a label wraps */
.wk-brand-preview { border-radius: 16px; overflow: hidden; aspect-ratio: 1; position: relative; box-shadow: var(--wk-shadow-lg); }
.wk-brand-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wk-font-sample { font-size: 1.6rem; font-weight: 700; padding: .6rem 1rem; border-radius: 12px; background: #fff; border: 1px solid var(--wk-border); }

/* ---------- Tables ---------- */

/* ---------- Auth ---------- */
/* ---------- Auth pages (login, sign-up, password reset, status) ---------- */
.wk-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wk-auth__side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 3rem clamp(2rem, 4vw, 4rem); color: #fff;
  background: radial-gradient(circle at 85% 8%, rgba(143,130,255,.55) 0%, transparent 42%), linear-gradient(160deg, #1b1840 0%, #12112a 62%); }
.wk-auth__orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.wk-auth__orb--1 { width: 340px; height: 340px; inset-inline-start: -120px; bottom: -140px; background: radial-gradient(circle, rgba(255,176,32,.28), transparent 65%); }
.wk-auth__orb--2 { width: 220px; height: 220px; inset-inline-end: 12%; top: 38%; background: radial-gradient(circle, rgba(109,94,248,.35), transparent 65%); }
.wk-auth__brand { position: relative; display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; font-size: 1.35rem; }
.wk-auth__brand:hover { color: #fff; }
.wk-auth__brand img { width: 42px; height: 42px; }
.wk-auth__pitch { position: relative; max-width: 520px; }
.wk-auth__kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  color: #ffd58a; background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.25); margin-bottom: 1rem; }
.wk-auth__pitch h2 { color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; line-height: 1.5; margin-bottom: .8rem; }
.wk-auth__pitch p { color: #bdbbe3; font-size: 1rem; line-height: 1.9; margin-bottom: 1.6rem; }
.wk-auth__feats { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.wk-auth__feats li { display: flex; align-items: center; gap: .75rem; color: #dcdbf5; }
.wk-auth__feats i { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: rgba(255,255,255,.08); color: var(--wk-gold); font-size: 1.05rem; }
.wk-auth__copy { position: relative; font-size: .8rem; color: #7d7aa8; }

.wk-auth__main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 2.5rem 1.5rem;
  background: radial-gradient(circle at 0% 0%, #efeaff 0%, transparent 40%), radial-gradient(circle at 100% 100%, #fff4e0 0%, transparent 38%), var(--wk-bg); }
.wk-auth__card { width: 100%; max-width: 440px; background: #fff; border-radius: 24px; padding: 2.25rem 2rem;
  box-shadow: 0 1px 2px rgba(16,18,43,.04), 0 24px 60px rgba(16,18,43,.1); border: 1px solid var(--wk-border); }
.wk-auth__card--wide { max-width: 560px; }
.wk-auth__foot { font-size: .8rem; color: var(--wk-muted); display: none; }
.wk-auth__head { margin-bottom: 1.5rem; }
.wk-auth__head h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: .35rem; }
.wk-auth__head p { color: var(--wk-muted); margin: 0; line-height: 1.8; }
.wk-auth__icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  background: var(--wk-primary-50); color: var(--wk-primary); margin-bottom: 1rem; }
.wk-auth__icon--ok { background: #dcf7ec; color: var(--st-published); }
.wk-auth__icon--danger { background: #fee4e2; color: #b42318; }
.wk-auth__icon--warn { background: #fff4dc; color: #b27300; }
.wk-auth__section { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--wk-ink); margin: .25rem 0 .9rem; }
.wk-auth__section span { width: 24px; height: 24px; border-radius: 50%; background: var(--wk-primary); color: #fff; font-size: .78rem;
  display: inline-flex; align-items: center; justify-content: center; }
.wk-auth__section:not(:first-of-type) { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--wk-border); }
.wk-auth__submit { padding-block: .8rem; font-weight: 700; font-size: 1.02rem; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.wk-auth__switch { text-align: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--wk-border); color: var(--wk-muted); }
.wk-auth__switch a { font-weight: 700; }

/* Auth fields: icon at the start, password eye at the end */
.wk-afield .form-label { font-weight: 600; font-size: .9rem; }
.wk-afield__box { position: relative; }
.wk-afield__icon { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: .95rem; color: #9a9cb8; font-size: 1.05rem; pointer-events: none; transition: color .15s; }
.wk-afield__box .form-control { padding-inline-start: 2.7rem; min-height: 50px; border-radius: 13px; background: #f7f8fc; border-color: var(--wk-border); }
.wk-afield__box .form-control:focus { background: #fff; border-color: var(--wk-primary); box-shadow: 0 0 0 4px var(--wk-primary-50); }
.wk-afield__box:focus-within .wk-afield__icon { color: var(--wk-primary); }
.wk-afield__box:has(.wk-afield__eye) .form-control { padding-inline-end: 2.8rem; }
.wk-afield__eye { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: .5rem; width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: #9a9cb8; font-size: 1.05rem; }
.wk-afield__eye:hover { background: var(--wk-primary-50); color: var(--wk-primary); }
.wk-afield__box.has-error .wk-afield__icon { color: #dc3545; }

/* Phones: a centred brand header with three feature tiles, and the form as a card rising over it */
@media (max-width: 991.98px) {
  .wk-auth { display: block; background: var(--wk-bg); min-height: 100svh; }
  .wk-auth__side { align-items: center; text-align: center; justify-content: flex-start; gap: 1.1rem;
    padding: calc(1.75rem + env(safe-area-inset-top)) 1.25rem 4.5rem; border-radius: 0 0 32px 32px;
    background: radial-gradient(circle at 50% -10%, rgba(143,130,255,.6) 0%, transparent 55%), linear-gradient(180deg, #1d1a47 0%, #12112a 100%); }
  .wk-auth__side::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px); background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
  .wk-auth__orb--1 { width: 260px; height: 260px; inset-inline-start: -90px; bottom: -120px; }
  .wk-auth__orb--2 { width: 180px; height: 180px; inset-inline-end: -40px; top: -30px; }
  .wk-auth__brand { flex-direction: column; gap: .55rem; font-size: 1.55rem; letter-spacing: -.3px; }
  .wk-auth__brand img { width: 62px; height: 62px; border-radius: 19px; box-shadow: 0 0 0 7px rgba(124,108,255,.18), 0 14px 34px rgba(79,59,219,.55); }
  .wk-auth__pitch { max-width: 360px; }
  .wk-auth__kicker { display: none; }
  .wk-auth__pitch h2 { font-size: 1.05rem; font-weight: 600; line-height: 1.8; color: #d9d7f7; margin-bottom: 1.1rem; }
  .wk-auth__pitch h2 br { display: none; }
  .wk-auth__pitch p { display: none; }
  .wk-auth__feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
  .wk-auth__feats li { flex-direction: column; justify-content: center; gap: .4rem; padding: .7rem .3rem; border-radius: 16px; min-width: 0;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); font-size: .76rem; font-weight: 600; line-height: 1.4; color: #e4e3fa; }
  .wk-auth__feats i { width: 34px; height: 34px; border-radius: 11px; font-size: .95rem; background: rgba(255,176,32,.14); }
  .wk-auth__copy { display: none; }
  .wk-auth__main { display: block; padding: 0 1rem calc(1.5rem + env(safe-area-inset-bottom)); margin-top: -3rem; background: none; position: relative; z-index: 1; }
  .wk-auth__card, .wk-auth__card--wide { max-width: 480px; margin-inline: auto; padding: 1.75rem 1.35rem 1.5rem; border-radius: 26px; border: 0;
    box-shadow: 0 1px 2px rgba(16,18,43,.05), 0 18px 50px rgba(16,18,43,.14); }
  .wk-auth__head { text-align: center; margin-bottom: 1.35rem; }
  .wk-auth__head h1 { font-size: 1.45rem; }
  .wk-auth__head p { font-size: .92rem; }
  .wk-auth__icon { margin-inline: auto; }
  .wk-afield__box .form-control { min-height: 52px; font-size: 16px; }  /* 16px stops iOS zooming into the field */
  .wk-auth__submit { min-height: 54px; }
  .wk-auth__foot { display: block; text-align: center; margin-top: 1.25rem; }
}

/* ---------- Landing ---------- */
.wk-landing { background: #fff; }
.wk-landing nav { padding: 1.2rem 0; }
.wk-landing .hero { padding: 4.5rem 0 3rem; background: radial-gradient(circle at 85% 0%, #efeaff 0%, transparent 45%),
  radial-gradient(circle at 0% 60%, #fff4e0 0%, transparent 35%); }
.wk-landing .hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.35; letter-spacing: -.5px; }
.wk-landing .hero h1 .grad { background: linear-gradient(135deg, #7c6cff, #4f3bdb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wk-landing .lead { color: var(--wk-muted); font-size: 1.15rem; line-height: 1.9; }
.wk-landing .pill { display: inline-flex; align-items: center; gap: .5rem; background: var(--wk-primary-50); color: var(--wk-primary-600);
  padding: .35rem .9rem; border-radius: 999px; font-weight: 600; font-size: .85rem; }
.wk-landing .mock { border-radius: 22px; box-shadow: var(--wk-shadow-lg); overflow: hidden; background: #fff; border: 1px solid var(--wk-border); }
.wk-landing .mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding: .9rem; }
.wk-landing .mock-grid div { aspect-ratio: 1; border-radius: 12px; }
.wk-landing .feature { padding: 1.5rem; border-radius: 20px; border: 1px solid var(--wk-border); height: 100%; background: #fff; }
.wk-landing .feature .ico { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1rem; }
.wk-landing .feature h3 { font-size: 1.1rem; }
.wk-landing .feature p { color: var(--wk-muted); margin: 0; font-size: .95rem; line-height: 1.8; }
.wk-landing .steps .num { width: 40px; height: 40px; border-radius: 12px; background: var(--wk-primary); color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.wk-landing footer { border-top: 1px solid var(--wk-border); padding: 2rem 0; color: var(--wk-muted); }

.wk-filled { background-color: #f5f3ff !important; border-color: #c4bbff !important; }

/* ---------- Confirm modal ---------- */
.wk-modal .modal-content { background: #fff; border: 0; border-radius: 24px; box-shadow: 0 30px 80px rgba(16, 18, 43, .25); }
.wk-modal .modal-body { padding: 2rem 2rem 1.5rem; text-align: center; }
.wk-modal .modal-dialog { max-width: 440px; }
.modal-backdrop.show { opacity: .45; backdrop-filter: blur(2px); }
.wk-modal__icon { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; background: var(--wk-primary-50); color: var(--wk-primary); }
.wk-modal.danger .wk-modal__icon { background: #fee4e2; color: #d92d20; box-shadow: 0 0 0 8px #fef3f2; }
.wk-modal.primary .wk-modal__icon { box-shadow: 0 0 0 8px #f7f6ff; }
.wk-modal__title { font-size: 1.2rem; margin-bottom: .5rem; }
.wk-modal__msg { color: var(--wk-muted); line-height: 1.8; margin-bottom: 0; white-space: pre-line; }
.wk-modal__field { text-align: start; margin-top: 1.1rem; }
.wk-modal__field .form-label { font-size: .85rem; font-weight: 500; color: var(--wk-muted); }
.wk-modal__field .form-label strong { color: var(--wk-ink); }
.wk-modal__actions { display: flex; gap: .6rem; margin-top: 1.6rem; }
.wk-modal__actions .btn { flex: 1; padding: .7rem 1rem; }
.wk-modal.danger .wk-modal__ok { background: #d92d20; border-color: #d92d20; color: #fff; box-shadow: 0 8px 20px rgba(217, 45, 32, .25); }
.wk-modal.danger .wk-modal__ok:hover { background: #b42318; border-color: #b42318; }
.wk-modal.primary .wk-modal__ok { background: var(--wk-primary); border-color: var(--wk-primary); color: #fff; box-shadow: 0 8px 20px rgba(109, 94, 248, .28); }
.wk-modal__ok:disabled { opacity: .45; box-shadow: none !important; }

/* ---------- Notifications ---------- */
.wk-bell__btn { position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--wk-border);
  background: var(--wk-card); color: var(--wk-text); font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; }
.wk-bell__btn:hover { background: var(--wk-primary-50); color: var(--wk-primary-600); }
.wk-bell__count { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #e5484d; color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; }
.wk-bell__menu { width: min(380px, calc(100vw - 32px)); padding: 0; overflow: hidden; border-radius: 14px; box-shadow: var(--wk-shadow-lg); }
.wk-note { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem 1rem; color: var(--wk-text); font-size: .9rem; border-top: 1px solid var(--wk-border); }
.wk-note:hover { background: var(--wk-bg); color: var(--wk-text); }
.wk-note > i { color: var(--wk-primary); font-size: 1.05rem; margin-top: .1rem; }
.wk-note.unread { background: var(--wk-primary-50); }
.wk-note.unread span:first-child { font-weight: 600; }

/* ---------- Review thread ---------- */
.wk-thread { display: flex; flex-direction: column; gap: .75rem; max-height: 420px; overflow-y: auto; }
.wk-comment { border: 1px solid var(--wk-border); border-radius: 12px; padding: .65rem .85rem; background: var(--wk-card); }
.wk-comment.changes { border-color: #fcd9a6; background: #fff9ee; }
.wk-comment.approval { border-color: #bfe9d6; background: #f1fbf6; }
.wk-comment.guest .who::after { content: ' · العميل'; color: var(--wk-muted); font-weight: 400; }
.wk-comment .who { font-weight: 600; font-size: .88rem; }
.wk-comment .when { font-size: .78rem; color: var(--wk-muted); }
.wk-comment .body { white-space: pre-wrap; font-size: .92rem; margin-top: .25rem; overflow-wrap: anywhere; }

/* ---------- Feed preview (Instagram / Facebook mock) ---------- */
.wk-feed { background: #fff; color: #0f1419; border-block: 1px solid var(--wk-border); font-family: system-ui, 'Cairo', sans-serif; font-size: .9rem; }
.wk-feed__head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; }
.wk-feed__head .wk-avatar { width: 36px; height: 36px; font-size: .8rem; }
.wk-feed.ig .wk-feed__head .wk-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e1306c; }
.wk-feed__head .name { display: block; font-size: .88rem; }
.wk-feed__head .sub { display: block; font-size: .75rem; color: #65676b; }
.wk-feed__media { background: #f0f2f5; overflow: hidden; }
.wk-feed__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-feed__media .ph { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  color: #8a8d91; text-align: center; padding: 1rem; }
.wk-feed__media .ph i { font-size: 2.2rem; }
.wk-feed__bar { display: flex; gap: 1rem; padding: .6rem .9rem .2rem; font-size: 1.35rem; }
.wk-feed__bar.fb { justify-content: space-around; font-size: .88rem; color: #65676b; font-weight: 600; border-top: 1px solid #e4e6eb; margin: 0 .9rem; padding: .5rem 0; }
.wk-feed__text { padding: .4rem .9rem .8rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.wk-feed__text .more { border: 0; background: none; padding: 0; color: #65676b; font-weight: 600; }

/* ---------- Client review page ---------- */
.wk-review { max-width: 720px; margin: 0 auto; padding: 0 16px 2rem; }
.wk-review__head { display: flex; align-items: center; gap: .9rem; padding: 1.4rem 0 1.2rem; }
.wk-review__head .wk-avatar { width: 52px; height: 52px; font-size: 1.05rem; border-radius: 14px; flex-shrink: 0; }
.wk-review__post { overflow: hidden; }
.wk-review__media { background: var(--wk-bg); border-bottom: 1px solid var(--wk-border); }
.wk-review__media img { display: block; width: 100%; height: auto; }
.wk-review__script { padding: 1.2rem 1.35rem; white-space: normal; line-height: 1.9; font-size: .92rem; }
.wk-review__caption { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.wk-review .wk-thread { max-height: none; }

/* ---------- Calendar occasions ---------- */
.wk-occasion { display: block; font-size: .72rem; font-weight: 600; color: #8a5a00; background: #fff4dc; border-radius: 6px;
  padding: .1rem .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   System admin console (superusers) — its own navigation and dashboard,
   in the manner of the enjazpms / enjazims admin dashboards.
   ========================================================================== */
.wk-console .wk-sidebar { background: linear-gradient(180deg, #0d0c22 0%, #16143a 100%) !important; }
.wk-console-badge { margin: 0 1rem .75rem; padding: .5rem .75rem; border-radius: 12px; font-size: .82rem; font-weight: 700;
  color: #ffd58a; background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.22); display: flex; align-items: center; gap: .5rem; }
.wk-console .wk-nav a.active { background: linear-gradient(135deg, rgba(255,176,32,.22), rgba(255,176,32,.08)); box-shadow: inset -3px 0 0 var(--wk-gold); }
.wk-console .wk-nav a.active i { color: var(--wk-gold); }
.wk-nav__badge { margin-inline-start: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e5484d;
  color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* Hero banner */
.adm-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 1.6rem 1.8rem; margin-bottom: 1.25rem; color: #fff;
  background: radial-gradient(circle at 12% 0%, rgba(255,176,32,.28), transparent 42%),
              radial-gradient(circle at 88% 120%, rgba(124,108,255,.55), transparent 50%),
              linear-gradient(135deg, #16143a 0%, #231f5c 100%); }
.adm-hero__inner { position: relative; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.adm-hero__icon { width: 58px; height: 58px; border-radius: 16px; background: rgba(255,255,255,.1); display: flex; align-items: center;
  justify-content: center; font-size: 1.6rem; color: var(--wk-gold); flex-shrink: 0; }
.adm-hero__kicker { font-size: .78rem; color: #b9b5f0; font-weight: 600; }
.adm-hero__title { color: #fff; font-size: 1.55rem; margin: .1rem 0 .2rem; }
.adm-hero__desc { color: #cfcbef; margin: 0; font-size: .92rem; }
.adm-hero__kpis { margin-inline-start: auto; display: flex; align-items: center; gap: 1.4rem; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: .9rem 1.4rem; }
.adm-hero__kpi { text-align: center; }
.adm-hero__kpi-num { display: block; font-size: 1.55rem; font-weight: 800; line-height: 1.2; }
.adm-hero__kpi-num--gold { color: var(--wk-gold); }
.adm-hero__kpi-lbl { font-size: .75rem; color: #cfcbef; white-space: nowrap; }
.adm-hero__kpi-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,.14); }

/* KPI cards */
.adm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.adm-kpi { position: relative; overflow: hidden; display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; color: inherit; }
a.adm-kpi:hover { color: inherit; box-shadow: var(--wk-shadow-lg); }
.adm-kpi__icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.adm-kpi__num { font-size: 1.55rem; font-weight: 800; color: var(--wk-ink); line-height: 1.15; }
.adm-kpi__lbl { font-size: .82rem; color: var(--wk-muted); }
.adm-kpi__sub { font-size: .75rem; color: var(--wk-muted); margin-top: .1rem; }
.adm-kpi--alert { border-color: #fecdca; }
.adm-kpi--alert .adm-kpi__num { color: #b42318; }
.tone-danger { background: #fee4e2; color: #b42318; }
.tone-gold { background: #fff4dc; color: #b27300; }

/* Panels */
.adm-grid-3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.adm-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.adm-panel__sub { font-size: .8rem; color: var(--wk-muted); font-weight: 400; margin-top: .1rem; }
.adm-panel__head-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }

/* Column chart: one series, thin columns with a rounded data end, recessive baseline, hover tooltip. */
.adm-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 2px; height: 170px; padding-top: 1.6rem;
  border-bottom: 1px solid var(--wk-border); direction: ltr; }
.adm-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; }
.adm-col__bar { width: min(22px, 70%); min-height: 2px; background: var(--wk-primary); border-radius: 4px 4px 0 0; transition: filter .15s; }
.adm-col__bar.zero { background: var(--wk-border); }
.adm-col:hover .adm-col__bar, .adm-col:focus .adm-col__bar { filter: brightness(1.15); }
.adm-col__tip { position: absolute; bottom: calc(100% - 1.4rem); left: 50%; transform: translateX(-50%); white-space: nowrap; direction: rtl; /* Arabic tooltip inside the LTR chart */
  background: var(--wk-ink); color: #fff; font-size: .75rem; padding: .3rem .55rem; border-radius: 8px; pointer-events: none; z-index: 2;
  display: none; } /* not just transparent: a hidden tip must not widen the page */
.adm-col:hover .adm-col__tip, .adm-col:focus .adm-col__tip { display: block; }
/* Tips of the edge columns open inwards so they stay inside the card. */
.adm-col:nth-child(-n+3) .adm-col__tip { left: 0; transform: none; }
.adm-col:nth-last-child(-n+3) .adm-col__tip { left: auto; right: 0; transform: none; }
.adm-col__cap { position: absolute; font-size: .72rem; font-weight: 700; color: var(--wk-text); white-space: nowrap; }
.adm-col-labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; direction: ltr; margin-top: .35rem; }
.adm-col-labels span { text-align: center; font-size: .72rem; color: var(--wk-muted); }
.adm-chart-foot { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; color: var(--wk-muted); margin-top: .75rem; }

/* Labelled share bars (post statuses) */
.adm-share { display: grid; grid-template-columns: 7.5rem 1fr 3rem; align-items: center; gap: .6rem; font-size: .88rem; margin-bottom: .7rem; }
.adm-share__track { height: 10px; background: var(--wk-bg); border-radius: 5px; overflow: hidden; }
.adm-share__fill { height: 100%; border-radius: 5px; }
.adm-share__fill.draft { background: var(--st-draft); } .adm-share__fill.review { background: var(--st-review); }
.adm-share__fill.approved { background: var(--st-approved); } .adm-share__fill.published { background: var(--st-published); }
.adm-share__n { text-align: end; font-weight: 600; }

/* Service status list */
.adm-status { display: flex; align-items: center; gap: .6rem; padding: .65rem 0; border-top: 1px solid var(--wk-border); font-size: .88rem; }
.adm-status:first-child { border-top: 0; }
.adm-status .wk-dot { flex-shrink: 0; }
.adm-status__val { margin-inline-start: auto; font-weight: 600; text-align: end; }

@media (max-width: 1199.98px) {
  .adm-grid-3 { grid-template-columns: 1fr 1fr; }
  .adm-grid-3 > :first-child { grid-column: 1 / -1; }
  .adm-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .adm-hero { padding: 1.2rem; }
  .adm-hero__kpis { width: 100%; margin-inline-start: 0; justify-content: space-around; gap: .6rem; padding: .75rem; }
  .adm-hero__kpi-num { font-size: 1.25rem; }
  .adm-kpis { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .adm-kpi { padding: .85rem; gap: .6rem; }
  .adm-kpi__icon { width: 38px; height: 38px; font-size: 1.05rem; }
  .adm-kpi__num { font-size: 1.25rem; }
  .adm-grid-3 { grid-template-columns: 1fr; }
  .adm-col-labels span:nth-child(even) { visibility: hidden; }
  .adm-share { grid-template-columns: 6rem 1fr 2.5rem; }
}

/* Status tabs (subscriptions) */
.adm-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.adm-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--wk-border);
  background: var(--wk-card); color: var(--wk-text); font-weight: 600; font-size: .9rem; }
.adm-tab:hover { color: var(--wk-primary-600); border-color: var(--wk-primary-100); }
.adm-tab.active { background: var(--wk-ink); border-color: var(--wk-ink); color: #fff; }
.adm-tab__n { min-width: 22px; padding: 0 6px; border-radius: 10px; background: var(--wk-bg); color: var(--wk-muted); font-size: .78rem; text-align: center; }
.adm-tab.active .adm-tab__n { background: rgba(255,255,255,.18); color: #fff; }
.adm-tab.attention:not(.active) { border-color: #f5c46b; }
.adm-tab.attention .adm-tab__n { background: var(--wk-gold); color: #3b2800; }
.wk-nav__badge--gold { background: var(--wk-gold); color: #3b2800; }

/* A system admin inside a subscriber's account (console "login as") */
.wk-impersonation { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem 1rem;
  background: var(--wk-gold); color: #3b2800; font-size: .9rem; }
@media (min-width: 992px) {
  /* A fixed-height bar pinned above the page, with the fixed sidebar starting under it. */
  .wk-impersonation { position: sticky; top: 0; z-index: 1050; height: 48px; flex-wrap: nowrap; padding-block: 0; }
  .wk-impersonating .wk-sidebar { top: 48px; }
}

/* Row action icon buttons (subscriptions), as in enjazpms */
.adm-acts { display: flex; gap: .3rem; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.adm-acts form { margin: 0; }
.adm-act { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--wk-border); background: var(--wk-card); color: var(--wk-muted);
  display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; padding: 0; }
.adm-act:hover { background: var(--wk-primary-50); color: var(--wk-primary-600); border-color: var(--wk-primary-100); }
.adm-act--approve { background: #16a34a; border-color: #16a34a; color: #fff; }
.adm-act--approve:hover { background: #15803d; color: #fff; border-color: #15803d; }
.adm-act--warn:hover { background: #fff4dc; color: #b27300; border-color: #f5c46b; }
.adm-act--ok:hover { background: #dcf7ec; color: #0f9d6b; border-color: #9fe3c6; }
.adm-act--renew:hover { background: #e5eeff; color: #2563eb; border-color: #b9cffb; }
.adm-act--del:hover { background: #fee4e2; color: #b42318; border-color: #fecdca; }
.adm-act--login:hover { background: #fff4dc; color: #3b2800; border-color: var(--wk-gold); }

/* View dialog */
.adm-view__head { display: flex; align-items: center; gap: .9rem; }
.adm-view__head .wk-avatar { width: 52px; height: 52px; border-radius: 14px; font-size: 1.05rem; flex-shrink: 0; }
.adm-view__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; }
.adm-view__label { font-size: .78rem; color: var(--wk-muted); }
.adm-view__val { font-weight: 600; overflow-wrap: anywhere; }
.adm-statusbar { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: 12px; margin-top: 1rem; }
.adm-statusbar i { font-size: 1.4rem; }
.adm-statusbar.active { background: #dcf7ec; color: #0b6b49; }
.adm-statusbar.soon { background: #fff4dc; color: #8a5a00; }
.adm-statusbar.expired, .adm-statusbar.suspended { background: #fee4e2; color: #b42318; }
.adm-statusbar.pending { background: #fff4dc; color: #8a5a00; }
@media (max-width: 575.98px) { .adm-view__grid { grid-template-columns: 1fr; } }

/* Review progress on the "under review" page */
.wk-track { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0; }
.wk-track li { position: relative; display: flex; gap: .85rem; padding-bottom: 1.1rem; }
.wk-track li:last-child { padding-bottom: 0; }
.wk-track li:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 17px; top: 36px; bottom: 2px; width: 2px; background: var(--wk-border); }
.wk-track li.done:not(:last-child)::before { background: var(--st-published); }
.wk-track li > span { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--wk-bg); color: var(--wk-muted); border: 2px solid var(--wk-border); }
.wk-track li.done > span { background: var(--st-published); border-color: var(--st-published); color: #fff; }
.wk-track li.current > span { background: #fff4dc; border-color: var(--wk-gold); color: #b27300; }
.wk-track strong { display: block; color: var(--wk-ink); }
.wk-track small { color: var(--wk-muted); }
.wk-track li:not(.done):not(.current) strong { color: var(--wk-muted); }

/* ==========================================================================
   DataTables — a table on desktop, cards on phones (templates/_datatable.html, static/js/tables.js)
   ========================================================================== */
.wk-dt { position: relative; }
.wk-dt .dataTables_wrapper { display: flex; flex-direction: column; }
.wk-dt__scroll { overflow-x: auto; }
.wk-dt__table { width: 100% !important; margin: 0 !important; border-collapse: separate; border-spacing: 0; }
.wk-dt__table > thead > tr > th { font-size: .78rem; font-weight: 700; color: var(--wk-muted); background: #fafbff; white-space: nowrap;
  padding: .8rem 1rem; border-bottom: 1px solid var(--wk-border); border-top: 0; }
.wk-dt__table > tbody > tr > td { padding: .85rem 1rem; border-bottom: 1px solid var(--wk-border); border-top: 0; }
.wk-dt__table > tbody > tr:last-child > td { border-bottom: 0; }
.wk-dt__table > tbody > tr:hover > td { background: #fafbff; }
.wk-dt__table > tbody > tr.is-pending > td { background: #fffaeb; }
.wk-dt__table > tbody > tr.is-failed > td { background: #fff8f7; }
/* Sort arrows: DataTables' own, placed at the start in RTL */
table.dataTable.wk-dt__table > thead > tr > th.sorting, table.dataTable.wk-dt__table > thead > tr > th.sorting_asc,
[dir=rtl] table.dataTable.wk-dt__table > thead > tr > th.sorting_desc { padding-left: 1.6rem; padding-right: 1rem; }
table.dataTable.wk-dt__table > thead .sorting:before, table.dataTable.wk-dt__table > thead .sorting:after,
table.dataTable.wk-dt__table > thead .sorting_asc:before, table.dataTable.wk-dt__table > thead .sorting_asc:after,
[dir=rtl] table.dataTable.wk-dt__table > thead .sorting_desc:before, [dir=rtl] table.dataTable.wk-dt__table > thead .sorting_desc:after { left: .6rem; right: auto; }
table.dataTable.wk-dt__table > thead > tr > th.sorting_asc, table.dataTable.wk-dt__table > thead > tr > th.sorting_desc { color: var(--wk-primary-600); }
table.dataTable.wk-dt__table td.dataTables_empty { text-align: center; color: var(--wk-muted); padding: 2.5rem 1rem; }

.wk-dt__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .85rem 1rem;
  border-top: 1px solid var(--wk-border); }
.wk-dt__foot:empty { display: none; }
.wk-dt__foot .dataTables_info { padding: 0 !important; font-size: .82rem; color: var(--wk-muted); }
.wk-dt__foot .pagination { margin: 0 !important; gap: .3rem; }
.wk-dt__foot .page-link { border-radius: 10px !important; border: 1px solid var(--wk-border); color: var(--wk-text); min-width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 600; padding: 0 .6rem; }
.wk-dt__foot .page-item.active .page-link { background: var(--wk-primary); border-color: var(--wk-primary); color: #fff; }
.wk-dt__foot .page-item.disabled .page-link { opacity: .45; }
.wk-dt .dataTables_processing { position: absolute; top: 3.2rem; left: 50%; transform: translateX(-50%); width: auto; margin: 0; padding: .5rem 1rem;
  border-radius: 999px; background: var(--wk-ink); color: #fff; font-size: .85rem; box-shadow: var(--wk-shadow-lg); z-index: 5; }
.wk-dt .dataTables_processing > div:last-child { display: none; }

/* Toolbar above a table: search + filters */
.wk-dt-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .9rem 1rem; border-bottom: 1px solid var(--wk-border); }
.wk-dt-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.wk-dt-search i { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: .85rem; color: #9a9cb8; pointer-events: none; }
.wk-dt-search input { padding-inline-start: 2.4rem; border-radius: 12px; background: #f7f8fc; min-height: 42px; }
.wk-dt-search input:focus { background: #fff; }
.wk-dt-toolbar .form-select { width: auto; border-radius: 12px; min-height: 42px; }
.wk-dt-toolbar .adm-tabs { margin-inline-start: auto; }

/* Cards (phones) */
.wk-dt__cards { display: none; }
.wk-dt__empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 2.5rem 1rem; color: var(--wk-muted); text-align: center; }
.wk-dt__empty i { font-size: 1.8rem; opacity: .6; }
.wk-mcard { background: var(--wk-card); border: 1px solid var(--wk-border); border-radius: 18px; padding: 1rem; box-shadow: 0 1px 2px rgba(16,18,43,.04); }
.wk-mcard.is-pending { border-color: #f5c46b; box-shadow: inset 4px 0 0 var(--wk-gold); }
.wk-mcard.is-failed { border-color: #fecdca; box-shadow: inset 4px 0 0 #e5484d; }
.wk-mcard__head { display: flex; align-items: flex-start; gap: .75rem; }
.wk-mcard__head .wk-avatar { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; }
.wk-mcard__icon { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.wk-mcard__title { font-weight: 800; color: var(--wk-ink); line-height: 1.4; display: block; overflow-wrap: anywhere; }
a.wk-mcard__title:hover { color: var(--wk-primary-600); }
.wk-mcard__sub { font-size: .82rem; color: var(--wk-muted); overflow-wrap: anywhere; }
.wk-mcard__head > .ms-auto { flex-shrink: 0; }
.wk-mcard__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .9rem; margin-top: .9rem; padding-top: .9rem;
  border-top: 1px dashed var(--wk-border); }
.wk-mcard__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wk-mcard__label { font-size: .74rem; color: var(--wk-muted); }
.wk-mcard__val { font-weight: 700; color: var(--wk-text); font-size: .92rem; overflow-wrap: anywhere; }
.wk-mcard__big { font-size: 1.35rem; font-weight: 800; color: var(--wk-ink); line-height: 1.2; }
.wk-mcard__note { margin-top: .8rem; padding: .6rem .75rem; border-radius: 12px; font-size: .84rem; background: var(--wk-bg); }
.wk-mcard__note--danger { background: #fff1f0; color: #9f1f17; }
.wk-mcard__foot { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--wk-border); flex-wrap: wrap; }
.wk-mcard__foot .adm-acts { justify-content: flex-start; flex-wrap: wrap; width: 100%; }
.wk-mcard__foot .adm-act { width: 38px; height: 38px; border-radius: 11px; font-size: 1.05rem; }

@media (max-width: 767.98px) {
  .wk-dt__scroll { display: none; }
  .wk-dt__cards { display: grid; gap: .75rem; padding: .75rem; }
  .wk-card > .wk-dt .wk-dt__cards, .wk-dt--flush .wk-dt__cards { padding: .75rem; }
  .wk-dt__foot { justify-content: center; border-top: 0; padding-top: .25rem; }
  .wk-dt__foot .dataTables_info { width: 100%; text-align: center; }
  .wk-dt-toolbar { padding: .75rem; }
  .wk-dt-search { max-width: none; flex-basis: 100%; }
  .wk-dt-toolbar .adm-tabs { margin-inline-start: 0; flex-wrap: wrap; width: 100%; }
  .wk-dt-toolbar .adm-tabs::-webkit-scrollbar { display: none; }
  .wk-dt-toolbar .adm-tab { flex: none; }
  .wk-dt-toolbar .form-select { flex: 1 1 45%; }
}

/* Status pills with a dot (jobs, subscriptions), as in enjazpms */
.adm-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.adm-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.adm-pill--ok { background: #dcf7ec; color: #0b7a53; }
.adm-pill--warn { background: #fff4dc; color: #9a6300; }
.adm-pill--danger { background: #fee4e2; color: #b42318; }
.adm-pill--muted { background: #eef0f5; color: #5c6080; }
.adm-pill--info { background: #e5eeff; color: #1d4ed8; }
.adm-err summary { cursor: pointer; font-size: .8rem; color: #b42318; max-width: 280px; }
.adm-err pre { margin: .35rem 0 0; padding: .5rem .6rem; border-radius: 8px; background: #fff; border: 1px solid #fecdca; font-size: .74rem;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }

/* ---------- Sign-up requests (console) ---------- */
.wk-signup { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.wk-signup .wk-avatar { width: 44px; height: 44px; border-radius: 50%; font-size: 1.05rem; }
.wk-signup__who { flex: 1; min-width: 0; }
.wk-signup__who .small-muted { overflow-wrap: anywhere; }
.wk-signup__actions { display: flex; gap: .5rem; }
@media (max-width: 575.98px) {
  .wk-signup { flex-wrap: wrap; }
  .wk-signup__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------- Global page spinner (as in enjazpms) ---------- */
.wk-spinner { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .97); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.wk-spinner.active { opacity: 1; pointer-events: auto; }
.wk-spinner__ring { position: relative; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; }
.wk-spinner__ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid rgba(109, 94, 248, .16); border-top-color: var(--wk-primary); border-inline-end-color: var(--wk-gold);
  animation: wk-spin .75s linear infinite; }
.wk-spinner__ring img { width: 34px; height: 34px; border-radius: 10px; animation: wk-pulse 1.5s ease-in-out infinite; }
@keyframes wk-spin { to { transform: rotate(360deg); } }
@keyframes wk-pulse { 50% { transform: scale(.88); opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .wk-spinner__ring::before { animation-duration: 2s; } .wk-spinner__ring img { animation: none; } }

/* ---------- Plan goals: wrap like text, never overflow the card ---------- */
.wk-goal { display: inline-flex; align-items: flex-start; gap: .4rem; max-width: 100%; padding: .45rem .85rem; border-radius: 12px;
  background: #f8f9fc; border: 1px solid var(--wk-border); font-size: .85rem; font-weight: 600; color: var(--wk-ink); line-height: 1.6; }
.wk-goal i { margin-top: .15rem; flex-shrink: 0; }
/* Short status/count badges may still carry long text (e.g. a translated label): let them wrap too. */
.badge { max-width: 100%; white-space: normal; }

/* ---------- Brand colours on phones: one row per colour (label, then swatch) ---------- */
@media (max-width: 575.98px) {
  .wk-swatches { grid-template-columns: 1fr; gap: .6rem; }
  .wk-swatches > .mb-3 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin: 0 !important;
    padding: .55rem .75rem; border: 1px solid var(--wk-border); border-radius: 14px; background: #fbfbfe; }
  .wk-swatches .form-label { margin: 0; white-space: nowrap; }
  .wk-swatches input[type=color].form-control { width: 96px; height: 42px; flex-shrink: 0; }
  .wk-swatches .invalid-feedback, .wk-swatches .form-text { flex-basis: 100%; }
}

/* ---------- What Wakeel learned (brand page) ---------- */
.wk-lessons { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.wk-lessons li { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .85rem; border: 1px solid var(--wk-border); border-radius: 12px; background: #fcfcff; line-height: 1.7; }
.wk-lessons li > i { color: var(--wk-primary); margin-top: .2rem; }
.wk-lessons li > span { flex: 1; min-width: 0; }

/* ---------- Autopilot ---------- */
.wk-autopilot-switch { display: flex; align-items: center; gap: .9rem; cursor: pointer; }
.wk-autopilot-switch .form-check-input { width: 3rem; height: 1.6rem; cursor: pointer; }
.wk-nav__badge--on { background: transparent; color: #4ade80; min-width: 0; padding: 0; font-size: .7rem; }

/* ---------- Install / notifications bar (phones) ---------- */
.wk-appbar { position: fixed; z-index: 1080; inset-inline: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 18px; background: #12112a; color: #fff;
  box-shadow: 0 18px 50px rgba(16, 18, 43, .35); animation: wkIn .25s ease-out; max-width: 520px; margin-inline: auto; }
.wk-appbar[hidden] { display: none; }
.wk-appbar img { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.wk-appbar__text { flex: 1; min-width: 0; line-height: 1.45; }
.wk-appbar__text strong { display: block; font-size: .92rem; }
.wk-appbar__text span { display: block; font-size: .78rem; color: #b6b4dd; }
.wk-appbar__go { flex-shrink: 0; }
.wk-appbar__close { border: 0; background: transparent; color: #8f8db8; padding: .25rem; flex-shrink: 0; }

/* ---------- Left-to-right (English) ---------- */
/* Icons were chosen for Arabic ("next" points left); mirror the directional ones in LTR. */
[dir=ltr] .bi-arrow-left, [dir=ltr] .bi-arrow-right, [dir=ltr] .bi-chevron-left, [dir=ltr] .bi-chevron-right,
[dir=ltr] .bi-arrow-return-right, [dir=ltr] .bi-box-arrow-left, [dir=ltr] .bi-box-arrow-right,
[dir=ltr] .bi-box-arrow-in-left, [dir=ltr] .bi-reply { display: inline-block; transform: scaleX(-1); }
[dir=ltr] .wk-nav a.active { box-shadow: inset 3px 0 0 var(--wk-primary); }
[dir=ltr] body { letter-spacing: -.005em; }

/* ---------- Language switcher ---------- */
.wk-lang { display: inline-flex; }
.wk-lang button { border: 1px solid var(--wk-border); background: #fff; color: var(--wk-ink); border-radius: 10px; padding: .35rem .7rem;
  font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.wk-lang button:hover { border-color: var(--wk-primary); color: var(--wk-primary-600); }
.wk-auth__main { position: relative; }

[dir=ltr] .adm-col__tip { direction: ltr; }

/* ---------- Compact language toggle (phones: top bar and sign-in pages) ---------- */
.wk-langtog { display: inline-flex; align-items: center; height: 42px; padding: 3px; gap: 2px; flex: none;
  border: 1px solid var(--wk-border); border-radius: 12px; background: var(--wk-card); }
.wk-langtog button { border: 0; background: transparent; height: 100%; min-width: 34px; padding: 0 .55rem; border-radius: 9px;
  font-size: .82rem; font-weight: 700; color: var(--wk-muted); line-height: 1; }
.wk-langtog button[lang=ar] { font-family: 'Cairo', var(--bs-body-font-family); font-size: .95rem; }
.wk-langtog button.on { background: var(--wk-primary); color: #fff; box-shadow: 0 2px 8px rgba(109, 94, 248, .35); cursor: default; }
.wk-langtog button:not(.on):hover { color: var(--wk-primary-600); background: var(--wk-primary-50); }
.wk-langtog--float { position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 3; height: 36px; }
@media (max-width: 991.98px) {
  .wk-langtog--float { position: fixed; top: calc(.75rem + env(safe-area-inset-top)); inset-inline-end: .75rem;
    background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); }
  .wk-langtog--float button { color: rgba(255, 255, 255, .75); }
  .wk-langtog--float button.on { background: #fff; color: var(--wk-ink); box-shadow: none; }
  .wk-langtog--float button:not(.on):hover { background: rgba(255, 255, 255, .12); color: #fff; }
}

/* ---------- Phones: while the sidebar is open, only the sidebar scrolls ---------- */
html.wk-scroll-lock, html.wk-scroll-lock body { overflow: hidden !important; overscroll-behavior: none; }
@media (max-width: 991.98px) {
  .wk-sidebar .offcanvas-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}

/* ---------- Phones: top bar as a grid; the subtitle and actions get the full width ---------- */
@media (max-width: 767.98px) {
  .wk-topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: .6rem; row-gap: .35rem; }
  .wk-topbar__title, .wk-topbar__tools { display: contents; }  /* lift the title, subtitle and tools into the grid */
  .wk-topbar h1 { grid-column: 2; grid-row: 1; min-height: 42px; }
  .wk-topbar .wk-menu-btn { grid-column: 1; grid-row: 1; }
  .wk-topbar .wk-langtog, .wk-topbar .wk-bell { grid-row: 1; }
  .wk-topbar .subtitle { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .wk-topbar .actions { grid-column: 1 / -1; grid-row: 3; margin-top: .4rem; }
}

/* ---------- Social accounts setup wizard ---------- */
.wk-setup { max-width: 680px; }
.wk-steps--static .wk-step { cursor: default; }
.wk-setup__body { padding: 2rem; }
.wk-setup__body h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.wk-setup__body > p { color: var(--wk-muted); margin-bottom: 1.25rem; }
.wk-setup__icon { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; background: #e7f0fe; color: #1877f2; }
.wk-setup__icon--ig { background: #fde8f0; color: #e1306c; }
.wk-setup__icon--tiktok { background: #eef0f4; color: #111; }
.wk-setup__icon--ok { background: #dcf7ec; color: var(--st-published); }
.wk-setup__icon--warn { background: #fff4dc; color: #b7791f; }
.wk-setup__choices { display: grid; gap: .65rem; }
.wk-setup__choice { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border: 1px solid var(--wk-border); border-radius: 14px;
  color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.wk-setup__choice:hover { border-color: var(--wk-primary); background: var(--wk-primary-50); color: inherit; }
.wk-setup__choice > i { font-size: 1.35rem; color: var(--wk-primary); }
.wk-setup__choice small { display: block; color: var(--wk-muted); font-size: .85rem; }
.wk-setup__list { padding-inline-start: 1.2rem; line-height: 2; margin-bottom: 1.25rem; }
.wk-setup__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding-top: 1rem;
  border-top: 1px solid var(--wk-border); }
.wk-setup__waiting { display: flex; align-items: center; gap: .85rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: 14px;
  background: var(--wk-primary-50); }
.wk-setup__waiting[hidden] { display: none; }
@media (max-width: 575.98px) { .wk-setup__body { padding: 1.35rem; } }

/* The Facebook connection popup */
.wk-popup { background: #fff; }
.wk-popup__main { max-width: 560px; margin: 0 auto; padding: 1.5rem 1rem; }

/* ---------- Terms and privacy pages ---------- */
.wk-legal__doc { max-width: 780px; padding-block: 2rem 4rem; line-height: 1.95; }
.wk-legal__doc h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin-bottom: .25rem; }
.wk-legal__updated { color: var(--wk-muted); font-size: .9rem; margin-bottom: 2rem; }
.wk-legal__doc h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; }
.wk-legal__doc ul { padding-inline-start: 1.3rem; }
.wk-legal__doc li { margin-bottom: .35rem; }
.wk-auth__legal { font-size: .8rem; text-align: center; margin-top: .5rem; color: var(--wk-muted); }
.wk-auth__legal a { color: inherit; }