/* ══════════════════════════════════════════════════
   Spread CRM — Theme (extracted from source palette)
   RTL · Dark Mode · Readex Pro
   ══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&family=Tajawal:wght@400;500;700&display=swap');

:root {
  /* light (default) */
  --bg:#f3f1fb; --card:#ffffff; --sidebar:#f3f1fb; --surface2:#faf8ff;
  --accent:#7c6df2; --accent2:#a89bff; --accent-light:#ebe7ff; --accent-ink:#4a3db8;
  --green:#7ccfb3; --green-bg:#dff4ec; --green-ink:#2a7d5f;
  --red:#f28b8b; --red-bg:#ffe7e7; --red-ink:#b0454a;
  --amber:#f0b967; --amber-bg:#fdefd3; --amber-ink:#a06c1e;
  --blue:#8ec2f0; --blue-bg:#e3efff; --blue-ink:#2f6bb0;
  --rose:#e89ac8; --rose-bg:#fbe6f2;
  --tx:#1e1b3a; --tx2:#4a4670; --tx3:#8b88a8;
  --bd:#ece9f7; --bd2:#e4e0f3;
  --input-bg:#faf8ff; --input-bd:#e4e0f3;
  --shadow:0 2px 8px rgba(76,63,168,.06);
  --shadow-md:0 8px 24px rgba(76,63,168,.08);
  --shadow-lg:0 18px 48px rgba(76,63,168,.10);
  --accent-shadow:0 6px 16px rgba(124,109,242,.28);
  --radius:14px; --radius-lg:18px;
}

html[data-theme="dark"] {
  --bg:#15111f; --card:#1f1a30; --sidebar:#15111f; --surface2:#251e3a;
  --accent:#9b8ff5; --accent2:#b79af0; --accent-light:#2a2346; --accent-ink:#b79af0;
  --green:#7ccfb3; --green-bg:#1d3a2f; --green-ink:#7ccfb3;
  --red:#f28b8b; --red-bg:#3a1d1f; --red-ink:#f28b8b;
  --amber:#f0b967; --amber-bg:#3a2e18; --amber-ink:#f0b967;
  --blue:#8ec2f0; --blue-bg:#1d2d3a; --blue-ink:#8ec2f0;
  --rose:#e89ac8; --rose-bg:#3a1f30;
  --tx:#f0eefa; --tx2:#b8b2d0; --tx3:#7a7596;
  --bd:#2d2743; --bd2:#352e4e;
  --input-bg:#251e3a; --input-bd:#352e4e;
  --shadow:0 2px 8px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 18px 48px rgba(0,0,0,.5);
  --accent-shadow:0 6px 16px rgba(155,143,245,.3);
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:'Readex Pro','Tajawal',sans-serif;
  background:var(--bg); color:var(--tx);
  direction:rtl; font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--bd2); border-radius:8px; }
::-webkit-scrollbar-track { background:transparent; }

/* ── Layout ── */
.app-shell { display:flex; min-height:100vh; }
.sidebar {
  width:248px; background:var(--sidebar); border-inline-start:1px solid var(--bd);
  display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh;
  overflow-y:auto; flex-shrink:0; transition:width .2s;
}
.sidebar .brand { display:flex; align-items:center; gap:10px; padding:6px 10px 18px; }
.sidebar .brand img { width:36px; height:36px; border-radius:10px; object-fit:cover; }
.sidebar .brand span { font-weight:700; font-size:18px; color:var(--tx); }
.nav-item {
  display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:12px;
  color:var(--tx2); cursor:pointer; margin-bottom:3px; font-size:13.5px; font-weight:500;
  transition:all .15s; border:none; background:transparent; width:100%; text-align:right;
}
.nav-item:hover { background:var(--accent-light); color:var(--accent-ink); }
.nav-item.active { background:var(--accent); color:#fff; box-shadow:var(--accent-shadow); }
.nav-item .ic { font-size:17px; width:22px; text-align:center; }

.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar {
  height:62px; background:var(--card); border-bottom:1px solid var(--bd);
  display:flex; align-items:center; justify-content:space-between; padding:0 22px; gap:16px;
  position:sticky; top:0; z-index:20;
}
.topbar h1 { font-size:18px; font-weight:600; margin:0; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.content { padding:22px; flex:1; }

/* ── Cards ── */
.card { background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px 20px; }
.stat-card { display:flex; align-items:center; gap:14px; }
.stat-card .ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.stat-card .val { font-size:20px; font-weight:600; line-height:1.1; }
.stat-card .lbl { font-size:11.5px; color:var(--tx3); margin-top:2px; }
.grid { display:grid; gap:16px; }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }

/* ── Buttons ── */
.btn {
  padding:10px 18px; border-radius:12px; border:none; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:500; transition:all .15s;
  display:inline-flex; align-items:center; gap:7px;
}
.btn-primary { background:var(--accent); color:#fff; box-shadow:var(--accent-shadow); }
.btn-primary:hover { filter:brightness(1.06); }
.btn-ghost { background:var(--accent-light); color:var(--accent-ink); }
.btn-soft { background:var(--surface2); color:var(--tx2); box-shadow:inset 0 0 0 1px var(--bd2); }
.btn-danger { background:var(--red-bg); color:var(--red-ink); }
.btn-success { background:var(--green-bg); color:var(--green-ink); }
.btn-icon { padding:8px; width:36px; height:36px; justify-content:center; }
.btn-sm { padding:6px 12px; font-size:12px; }

/* ── Inputs ── */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field label { font-size:11.5px; font-weight:500; color:var(--tx2); }
.field label .req { color:var(--red); }
.input, .select, .textarea {
  padding:10px 14px; border-radius:12px; background:var(--input-bg); border:none;
  color:var(--tx); font-family:inherit; font-size:13.5px; outline:none; width:100%;
  box-shadow:inset 0 0 0 1px var(--bd2); transition:all .15s;
}
.input:focus, .select:focus, .textarea:focus { box-shadow:inset 0 0 0 1.5px var(--accent); }
.textarea { min-height:72px; resize:vertical; }
.select { cursor:pointer; }

/* ── Badges ── */
.badge { padding:4px 11px; border-radius:20px; font-size:11px; font-weight:500; display:inline-flex; align-items:center; gap:5px; }
.badge-green { background:var(--green-bg); color:var(--green-ink); }
.badge-red { background:var(--red-bg); color:var(--red-ink); }
.badge-amber { background:var(--amber-bg); color:var(--amber-ink); }
.badge-blue { background:var(--blue-bg); color:var(--blue-ink); }
.badge-accent { background:var(--accent-light); color:var(--accent-ink); }

/* ── Tables ── */
table.tbl { width:100%; border-collapse:collapse; }
table.tbl th { text-align:right; font-size:11.5px; color:var(--tx3); font-weight:500; padding:11px 14px; border-bottom:1px solid var(--bd); }
table.tbl td { padding:12px 14px; border-bottom:1px solid var(--bd); font-size:13px; }
table.tbl tr:hover td { background:var(--surface2); }

/* ── Kanban ── */
.kanban { display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; align-items:flex-start; }
.kanban-col { min-width:280px; width:280px; background:var(--surface2); border-radius:var(--radius); padding:12px; flex-shrink:0; }
.kanban-col-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-weight:600; font-size:13.5px; }
.kanban-card {
  background:var(--card); border-radius:12px; padding:13px; margin-bottom:10px; cursor:grab;
  box-shadow:var(--shadow); border-inline-start:3px solid var(--accent); transition:all .15s;
}
.kanban-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.kanban-card.dragging { opacity:.5; }
.kanban-col.drag-over { box-shadow:inset 0 0 0 2px var(--accent); }

/* ── Modal ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(20,15,30,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px;
}
.modal {
  background:var(--card); border-radius:20px; box-shadow:var(--shadow-lg);
  max-width:560px; width:100%; max-height:88vh; overflow-y:auto; padding:24px;
}
.modal-lg { max-width:820px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-head h3 { margin:0; font-size:17px; font-weight:600; }
.modal-close { background:var(--surface2); border:none; width:32px; height:32px; border-radius:9px; cursor:pointer; color:var(--tx2); font-size:16px; }

/* ── Toast ── */
.toast-wrap { position:fixed; bottom:22px; inset-inline-start:22px; z-index:2000; display:flex; flex-direction:column; gap:10px; }
.toast {
  background:var(--card); box-shadow:var(--shadow-lg); border-radius:12px; padding:13px 18px;
  font-size:13.5px; display:flex; align-items:center; gap:10px; border-inline-start:4px solid var(--accent);
  animation:toastIn .25s; min-width:240px;
}
.toast.success { border-color:var(--green); }
.toast.error { border-color:var(--red); }
@keyframes toastIn { from { transform:translateX(-20px); opacity:0; } to { transform:none; opacity:1; } }

/* ── Notifications dropdown ── */
.notif-dropdown {
  position:absolute; top:52px; inset-inline-start:0; width:340px; background:var(--card);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; max-height:420px; overflow-y:auto; z-index:100;
}
.notif-item { padding:11px 13px; border-radius:10px; font-size:13px; cursor:pointer; }
.notif-item:hover { background:var(--surface2); }
.notif-item.unread { background:var(--accent-light); }

/* ── Misc ── */
.empty { text-align:center; padding:50px 20px; color:var(--tx3); }
.empty .ic { font-size:44px; margin-bottom:12px; }
.spinner { width:34px; height:34px; border:3px solid var(--bd2); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin:40px auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.hidden { display:none !important; }
.flex { display:flex; } .items-center { align-items:center; } .justify-between { justify-content:space-between; }
.gap-2 { gap:8px; } .gap-3 { gap:12px; } .mt-3 { margin-top:12px; } .mb-3 { margin-bottom:12px; }
.text-muted { color:var(--tx3); } .fw-600 { font-weight:600; }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.page-head h2 { margin:0; font-size:20px; font-weight:600; }
.filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.filters .select, .filters .input { width:auto; min-width:150px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--accent-light); color:var(--accent-ink); display:grid; place-items:center; font-weight:600; font-size:13px; }
.stars { display:inline-flex; gap:2px; direction:ltr; }
.star { cursor:pointer; width:20px; height:20px; border-radius:5px; display:grid; place-items:center; font-size:11px; font-weight:700; background:transparent; color:#d1d5db; }
.star.on { background:#f59e0b; color:#fff; }

/* ── Mobile ── */
.mobile-toggle { display:none; }
@media (max-width:900px) {
  .sidebar { position:fixed; inset-inline-start:-260px; z-index:1500; transition:inset-inline-start .25s; box-shadow:var(--shadow-lg); }
  .sidebar.open { inset-inline-start:0; }
  .mobile-toggle { display:inline-flex; }
  .content { padding:16px; }
  .kanban-col { min-width:250px; width:250px; }
}

/* ═══════════ Pages additions ═══════════ */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.input-sm{padding:7px 11px;font-size:13px;max-width:220px}
.loading{padding:40px;text-align:center;color:var(--tx3)}

/* grids */
.grid-cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* stat cards */
.stat-card{background:var(--card);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px}
.stat-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.stat-value{font-size:20px;font-weight:700;color:var(--tx);line-height:1.1}
.stat-label{font-size:11.5px;color:var(--tx3);margin-top:3px}

/* card title */
.card-title{font-size:14px;font-weight:600;margin:0 0 14px}

/* template tabs */
.tpl-tabs{display:flex;gap:8px;flex-wrap:wrap}
.tpl-tab{padding:8px 16px;border-radius:12px;border:none;background:var(--surface2);color:var(--tx2);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px var(--bd2);transition:all .15s}
.tpl-tab.active{background:var(--c,var(--accent));color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--c,var(--accent)) 40%,transparent)}

/* generic tabs */
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--bd);flex-wrap:wrap}
.tab{padding:10px 18px;border:none;background:none;color:var(--tx3);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* kanban */
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.kanban-col{background:var(--surface2);border-radius:var(--radius-lg);min-width:270px;max-width:270px;flex-shrink:0}
.kanban-col-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-size:13px;font-weight:600;border-bottom:2px solid var(--c,var(--accent));color:var(--tx)}
.kanban-col-head .count{background:var(--card);border-radius:20px;padding:1px 9px;font-size:11px;color:var(--tx3)}
.kanban-list{padding:10px;min-height:60px;display:flex;flex-direction:column;gap:9px}
.task-card{position:relative;background:var(--card);border-radius:12px;padding:0;overflow:hidden;box-shadow:var(--shadow);cursor:default;transition:transform .12s,box-shadow .12s}
.task-card:hover{box-shadow:var(--shadow-md)}
.task-card.open{box-shadow:0 0 0 2px var(--accent),var(--shadow-md)}
.task-card-body{padding:12px}

/* ── Cover: تظهر كاملة بأبعادها الأصلية (مربعة/طولية/عرضية) بدون قص ── */
.task-cover-wrap{background:var(--surface2);display:flex;align-items:center;justify-content:center;cursor:pointer;max-height:340px;overflow:hidden}
.task-cover{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;border-radius:0}

/* ── بادچ الاستعجال ── */
.task-urgency{position:absolute;top:8px;inset-inline-start:8px;z-index:3;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.22);letter-spacing:.2px}
.task-urgency.red{background:#e02424}
.task-urgency.over{background:#7f1d1d}
.task-urgency.orange{background:#f59e0b;color:#3b2500}

.task-title{font-size:13.5px;font-weight:600;color:var(--tx);line-height:1.4;cursor:pointer}
.task-title:hover{color:var(--accent)}
.task-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.task-client,.task-deadline{font-size:11px;color:var(--tx3);margin-top:5px}

/* ── أزرار الكارد الثلاثة ── */
.task-actions{display:flex;gap:6px;border-top:1px solid var(--bd);padding:8px 10px;background:var(--surface2)}
.ta-btn{flex:1;border:1px solid var(--bd);background:var(--card);border-radius:9px;padding:7px 0;font-size:14px;cursor:pointer;color:var(--tx);transition:background .12s,transform .1s}
.ta-btn:hover:not([disabled]){background:var(--surface2);transform:translateY(-1px)}
.ta-btn[disabled]{opacity:.35;cursor:not-allowed}
.ta-btn.ta-timer.on{background:#e0242422;border-color:#e02424;color:#e02424}

/* ── منطقة الفتح الداخلي (Expandable / Ajax) ── */
.task-expand:empty{display:none}
.task-expand{border-top:1px solid var(--bd);padding:12px;background:var(--surface2);text-align:start}
.tx-timer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tx-sec{margin-top:12px}
.tx-lb{font-size:12.5px;font-weight:700;color:var(--tx);margin-bottom:6px}
.tx-items{display:flex;flex-direction:column;gap:8px}
.tx-item{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:9px}
.tx-item-num{font-size:10.5px;font-weight:700;color:var(--tx3);margin-bottom:6px}
.tx-item-img{width:100%;height:auto;max-height:260px;object-fit:contain;border-radius:8px;background:var(--surface2);display:block;margin-bottom:6px}
.tx-item-text{font-size:12.5px;line-height:1.6;color:var(--tx);white-space:pre-wrap}
.tx-item-note{font-size:11.5px;color:var(--tx3);margin-top:4px}
.tx-item-link{display:inline-block;font-size:11.5px;color:var(--accent);margin-top:5px;word-break:break-all}
.tx-item-when{font-size:10px;color:var(--tx3);margin-top:6px}
.tx-add{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px dashed var(--bd);border-radius:10px;padding:10px;margin-top:8px}

/* ── شريط أدوات المهمة داخل الكارد المفتوح ── */
.tx-tools{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:10px;margin-bottom:4px;border-bottom:1px dashed var(--bd)}
.tx-tools .btn{font-size:11px;padding:5px 9px}

/* ── تعيين صورة إضافة كغلاف ── */
.tx-item-media{position:relative}
.tx-setcover{position:absolute;top:6px;inset-inline-start:6px;background:rgba(0,0,0,.6);color:#fff;border:0;font-size:10px;padding:4px 9px;border-radius:8px;cursor:pointer;opacity:0;transition:opacity .15s}
.tx-item-media:hover .tx-setcover{opacity:1}
@media(hover:none){.tx-setcover{opacity:1}}

/* ── الكارد المفتوح على الديسكتوب: العمود يتوسّع حتى لا تكون المساحة ضيقة ── */
.kanban-col.has-open,
.kanban-col:has(.task-card.open){min-width:420px;max-width:420px;transition:min-width .18s,max-width .18s}

/* ── قسم الفيديو: عملاء ← منشورات ← فيديوهات ── */
.video-groups{display:flex;flex-direction:column;gap:18px}
.vg{background:var(--surface2);border-radius:var(--radius-lg);padding:12px}
.vg-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 10px;border-bottom:2px solid var(--accent);margin-bottom:12px}
.vg-client{font-size:14.5px;font-weight:700;color:var(--tx)}
.vg-count{font-size:11px;color:var(--tx3);background:var(--card);border-radius:20px;padding:2px 10px}
.vg-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;align-items:start}
.vg-post-lb{font-size:11.5px;font-weight:700;color:var(--tx3);margin-bottom:5px}
@media(max-width:768px){.vg-posts{grid-template-columns:1fr}}

.drag-ghost{opacity:.4}

/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:500;background:color-mix(in srgb,var(--c,var(--accent)) 15%,transparent);color:var(--c,var(--accent-ink))}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.form-grid label,.form-col label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500;color:var(--tx2)}
.form-grid label.full{grid-column:1/-1}
.modal-title{font-size:17px;font-weight:700;margin-bottom:4px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn-danger-soft{background:var(--red-bg);color:var(--red-ink)}

/* detail */
.detail-meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.detail-block{margin:14px 0;font-size:13px;line-height:1.7}
.detail-block b{color:var(--tx2)}
.comment{background:var(--surface2);border-radius:10px;padding:9px 12px;margin-top:8px;font-size:12.5px}
.comment-add{display:flex;gap:8px;margin-top:12px}

/* activity */
.activity-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bd);font-size:12.5px}

/* calendar */
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-day{background:var(--card);border-radius:10px;min-height:90px;padding:8px;box-shadow:var(--shadow)}
.cal-day-num{font-size:12px;color:var(--tx3);font-weight:600}

/* client cards */
.client-card{background:var(--card);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow);cursor:pointer;transition:transform .12s}
.client-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* empty */
.empty{padding:36px;text-align:center;color:var(--tx3);font-size:13px}

/* table */
.data-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.data-table th,.data-table td{padding:11px 14px;text-align:right;font-size:13px;border-bottom:1px solid var(--bd)}
.data-table th{background:var(--surface2);font-weight:600;color:var(--tx2)}
.data-table tr:hover td{background:var(--surface2)}

/* ═══════════ TASK FEED PAGE (Facebook-style) ═══════════ */
.tf-header{background:var(--card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);margin-bottom:18px}
.tf-cover{height:180px;display:grid;place-items:center;position:relative}
.tf-cover img{width:100%;height:100%;object-fit:cover}
.tf-cover-emoji{font-size:64px;opacity:.85}
.tf-head-body{padding:16px 20px 18px}
.tf-title{margin:0 0 6px;font-size:20px}
.tf-subtitle{display:flex;gap:14px;color:var(--tx3);font-size:13px;flex-wrap:wrap}
.tf-pills{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.tf-done-banner{background:#e7f6ef;color:#2a7d5f;padding:10px;text-align:center;font-weight:700;font-size:13px}
.tf-overdue-banner{background:#fdeeee;color:#b0454a;padding:10px;text-align:center;font-weight:700;font-size:13px}

.tf-layout{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.tf-feed{display:flex;flex-direction:column;gap:14px;margin-top:14px}

/* composer */
.tf-composer{padding:14px}
.tf-comp-row{display:flex;gap:10px;align-items:flex-start}
.tf-comp-row textarea{flex:1;resize:vertical}
.tf-comp-types{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.tf-comp-foot{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.tf-vis{cursor:pointer;font-size:12px;font-weight:600;padding:8px 13px;border-radius:20px;background:var(--surface2);color:var(--tx3)}
.tf-vis.on{background:#e7f6ef;color:#2a7d5f}
.tf-approval{font-size:12px;color:var(--tx3);display:flex;gap:6px;align-items:center;cursor:pointer}
.tf-comp-foot .btn-primary{margin-inline-start:auto}

/* posts */
.tf-post{padding:14px;border-inline-start:4px solid var(--bar,var(--accent));position:relative}
.tf-post.internal{background:color-mix(in srgb,var(--surface2) 70%,var(--card))}
.tf-post.system{border-inline-start-style:dashed}
.tf-post-head{display:flex;align-items:center;gap:10px}
.tf-post-who{flex:1;min-width:0}
.tf-post-who b{font-size:13.5px;display:block}
.tf-post-when{font-size:11px;color:var(--tx3)}
.tf-post-del{border:none;background:none;color:var(--tx3);cursor:pointer;font-size:13px;padding:6px}
.tf-post-text{margin:10px 0 4px;font-size:14px;line-height:1.7;white-space:pre-wrap}
.tf-post-img{width:100%;border-radius:12px;margin-top:10px;max-height:420px;object-fit:cover}
.tf-post-link{display:block;margin-top:8px;background:var(--surface2);padding:10px 13px;border-radius:10px;font-size:13px;text-decoration:none;color:var(--accent);word-break:break-all}
.tf-ad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.tf-ad-grid>div{background:var(--surface2);border-radius:10px;padding:10px;text-align:center}
.tf-ad-grid b{display:block;font-size:16px;color:var(--accent)}
.tf-ad-grid span{font-size:10.5px;color:var(--tx3)}
.tf-appr{margin-top:10px;padding:9px;border-radius:10px;font-size:12.5px;font-weight:700;text-align:center}
.tf-appr.ok{background:#e7f6ef;color:#2a7d5f}
.tf-appr.edit{background:#fdeeee;color:#b0454a}
.tf-appr.wait{background:#fdf6e3;color:#a06c1e}
.tf-approve-bar{display:flex;gap:10px;margin-top:12px}
.tf-approve-bar .btn{flex:1}
.tf-post-actions{display:flex;border-top:1px solid var(--bd);margin-top:12px;padding-top:4px}
.tf-post-actions button{flex:1;border:none;background:none;padding:10px 4px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--tx3);cursor:pointer;border-radius:8px}
.tf-post-actions button:hover{background:var(--surface2)}
.tf-post-actions button.liked{color:var(--accent)}
.tf-comments{border-top:1px solid var(--bd);margin-top:6px;padding-top:10px;display:flex;flex-direction:column;gap:8px}
.tf-int-toggle{display:flex;align-items:center;gap:3px;font-size:14px;cursor:pointer}
.tf-int-toggle input{width:15px;height:15px}
.m-comment.internal .m-bubble{outline:1px dashed var(--tx3)}
.tf-empty{text-align:center;padding:42px;color:var(--tx3);font-size:14px;line-height:2.2}

/* sidebar */
.tf-sidebar{display:flex;flex-direction:column;gap:14px;position:sticky;top:14px}
.tf-side{padding:14px}
.tf-side h4{margin:0 0 12px;font-size:13.5px;display:flex;justify-content:space-between;align-items:center}
.tf-workflow{display:flex;flex-direction:column;gap:2px}
.tf-wf-row{display:flex;align-items:center;gap:9px;padding:8px;border-radius:9px;font-size:12.5px;color:var(--tx3);cursor:pointer}
.tf-wf-row:hover{background:var(--surface2)}
.tf-wf-dot{width:20px;text-align:center}
.tf-wf-row.done{color:#2a7d5f}
.tf-wf-row.done .tf-wf-dot{color:#2a7d5f}
.tf-wf-row.current{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-weight:700}
.tf-wf-you{margin-inline-start:auto;background:var(--accent);color:#fff;font-size:9.5px;padding:2px 8px;border-radius:10px}
.tf-chk-bar{height:7px;background:var(--surface2);border-radius:6px;overflow:hidden;margin-bottom:10px}
.tf-chk-bar div{height:100%;background:#7ccfb3;transition:width .3s}
.tf-chk-list{display:flex;flex-direction:column;gap:5px}
.tf-chk{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 2px}
.tf-chk button{border:none;background:none;font-size:15px;cursor:pointer;padding:2px}
.tf-chk.done .tf-chk-lb{text-decoration:line-through;color:var(--tx3)}
.tf-chk-lb{flex:1}
.tf-chk-x{color:var(--tx3);font-size:11px!important}

/* mobile */
@media (max-width:768px){
  .tf-layout{grid-template-columns:1fr}
  .tf-sidebar{position:static;order:-1}
  .tf-cover{height:130px}
  .tf-ad-grid{grid-template-columns:repeat(2,1fr)}
  .tf-comp-foot .btn-primary{width:100%;margin:4px 0 0}
}

/* ═══════════ لوحات: لوحتي + لوحة العميل ═══════════ */
.md-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:14px}
.md-kpi{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px;display:flex;gap:12px;align-items:center}
.md-kpi-ico{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--surface2)}
.md-kpi-v{font-size:20px;font-weight:800;color:var(--tx);line-height:1.2}
.md-kpi-l{font-size:12px;color:var(--tx2);margin-top:2px}
.md-kpi-s{font-size:10.5px;color:var(--tx3);margin-top:3px}

.md-card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px;margin-bottom:14px}
.md-card-h{font-size:13.5px;font-weight:700;color:var(--tx);margin-bottom:10px}

.md-bar{height:10px;border-radius:20px;background:var(--surface2);overflow:hidden}
.md-bar-in{height:100%;border-radius:20px;background:var(--accent);transition:width .4s}

.md-urgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.md-urg{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:12px;border:1px solid var(--bd);background:var(--card);cursor:pointer;font-size:11.5px;color:var(--tx2);transition:transform .12s}
.md-urg:hover{transform:translateY(-2px)}
.md-urg.on{box-shadow:0 0 0 2px var(--accent)}
.md-urg.zero{opacity:.5}
.md-urg-n{font-size:20px;font-weight:800;color:var(--tx)}
.md-urg.over .md-urg-n{color:#7f1d1d}
.md-urg.red .md-urg-n{color:#e02424}
.md-urg.orange .md-urg-n{color:#f59e0b}

.md-tasks{display:flex;flex-direction:column;gap:8px}
.md-task{display:flex;gap:10px;align-items:center;padding:9px;border:1px solid var(--bd);border-radius:12px;text-decoration:none;color:inherit;background:var(--card);transition:background .12s}
.md-task:hover{background:var(--surface2)}
.md-task.over{border-inline-start:3px solid #7f1d1d}
.md-task.red{border-inline-start:3px solid #e02424}
.md-task.orange{border-inline-start:3px solid #f59e0b}
.md-task-img{width:52px;height:52px;flex:0 0 52px;object-fit:cover;border-radius:10px;background:var(--surface2)}
.md-task-img.ph{display:flex;align-items:center;justify-content:center;font-size:20px}
.md-task-t{font-size:13px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-task-m{display:flex;gap:8px;flex-wrap:wrap;font-size:10.5px;color:var(--tx3);margin-top:4px}
.md-badge{font-weight:700}
.md-badge.red,.md-badge.over{color:#e02424}
.md-badge.orange{color:#f59e0b}

.cd-bars{display:flex;flex-direction:column;gap:10px}
.cd-bar-lb{display:flex;justify-content:space-between;font-size:12px;color:var(--tx2);margin-bottom:4px}
@media(max-width:768px){.md-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.md-kpi{padding:11px}.md-kpi-v{font-size:17px}}