/* ============================================================
   Marketing OS — os.css v1.0
   طبقة التطبيق فوق tokens.css و components.css
   ============================================================ */

/* ================= الشريط العلوي ================= */
.os-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.os-topbar__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-5);
}
.os-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
}
.os-brand__mark {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--accent);
}
.os-brand__name {
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  direction: ltr;
}

/* ================= الهيكل العام ================= */
.os-main {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-7) var(--space-5) var(--space-10);
}
.os-main--auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--header-height) - 80px);
}
.os-footer {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-5);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  color: var(--faint);
  font-size: var(--text-xs);
}

/* ================= رأس الصفحة ================= */
.os-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}
.os-page-head__sub {
  margin-block-start: var(--space-1);
  color: var(--muted);
  font-size: var(--text-sm);
}
.os-en-tag {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: var(--weight-medium);
  direction: ltr;
  display: inline-block;
  margin-inline-start: var(--space-2);
  letter-spacing: var(--tracking-wide);
}

/* فتات الخبز */
.os-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-block-end: var(--space-3);
}
.os-crumbs a:hover { color: var(--accent); }
.os-crumbs__sep { color: var(--faint); }
.os-crumbs__cur { color: var(--body); font-weight: var(--weight-medium); }

/* رابط رجوع */
.os-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: var(--weight-medium);
  margin-block-end: var(--space-3);
}
.os-back:hover { color: var(--accent); }
.os-back .mb-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* ================= شبكة المنتجات ================= */
.os-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.os-product {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 148px;
}
.os-product__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  line-height: var(--leading-snug);
}
.os-product__desc {
  font-size: var(--text-sm);
  color: var(--body);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.os-product__meta {
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
  font-weight: var(--weight-medium);
}
.os-product__dot { color: var(--faint); }
.os-product--archived { opacity: .65; }

/* ================= شريط الإحصاءات ================= */
.os-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-block-end: var(--space-7);
}
.os-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.os-stat__num {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}
.os-stat__num small {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--muted);
}
.os-stat__label {
  font-size: var(--text-2xs);
  color: var(--muted);
  font-weight: var(--weight-medium);
  margin-block-start: var(--space-1);
}

/* ================= شبكة الأقسام ================= */
.os-secs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: var(--space-4);
}
.os-sec-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.os-sec-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.os-sec-card__num {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
}
.os-sec-card__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--accent-subtle);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.os-sec-card__ar {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  line-height: var(--leading-snug);
}
.os-sec-card__en {
  display: block;
  font-size: var(--text-2xs);
  color: var(--muted);
  direction: ltr;
  text-align: right;
  margin-block-start: 2px;
  letter-spacing: var(--tracking-wide);
}
.os-sec-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--space-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.os-sec-card__count {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--body);
}
.os-sec-card__count.is-empty { color: var(--faint); }
.os-sec-card__time {
  font-size: var(--text-2xs);
  color: var(--faint);
}

/* ================= تخطيط صفحة القسم ================= */
.os-sec-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.os-side {
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100dvh - var(--header-height) - var(--space-8));
  overflow-y: auto;
  padding-inline-end: var(--space-1);
}
.os-side__product {
  font-size: var(--text-2xs);
  color: var(--muted);
  font-weight: var(--weight-semibold);
  padding: var(--space-2) var(--space-3);
  letter-spacing: var(--tracking-wide);
}
.os-side__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--body);
  line-height: var(--leading-snug);
}
.os-side__link:hover { background: var(--surface-sunk); }
.os-side__link.is-active {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}
.os-side__num {
  font-size: var(--text-2xs);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  width: 18px;
  flex-shrink: 0;
}
.is-active .os-side__num { color: inherit; opacity: .65; }
.os-side__count {
  margin-inline-start: auto;
  font-size: var(--text-2xs);
  color: var(--muted);
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.is-active .os-side__count { background: transparent; color: inherit; }

.os-jump { display: none; margin-block-end: var(--space-5); }

@media (max-width: 940px) {
  .os-sec-layout { grid-template-columns: 1fr; gap: 0; }
  .os-side { display: none; }
  .os-jump { display: block; }
}

/* ================= شريط الأدوات ================= */
.os-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}
.os-toolbar .mb-check { margin-inline-start: auto; }

/* ================= قوائم البطاقات ================= */
.os-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ================= بطاقة المدخل ================= */
.os-entry { padding: var(--space-4) var(--space-5); }
.os-entry__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}
.os-entry__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  letter-spacing: var(--tracking-wide);
}
.os-entry__type .mb-icon { width: var(--icon-sm); height: var(--icon-sm); }
.os-pin-flag {
  color: var(--accent);
  width: var(--icon-xs);
  height: var(--icon-xs);
}
.os-entry__actions {
  margin-inline-start: auto;
  display: flex;
  gap: 2px;
}
.os-icon-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--faint);
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.os-icon-btn:hover { background: var(--surface-sunk); color: var(--body); }
.os-icon-btn--danger:hover { background: var(--danger-bg); color: var(--danger); }
.os-icon-btn.is-on { color: var(--accent); }
.os-icon-btn .mb-icon { width: var(--icon-sm); height: var(--icon-sm); }

.os-entry__titlerow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.os-task-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-block-start: 1px;
  color: var(--border-strong);
  display: grid;
  place-items: center;
  transition: color var(--duration-fast) var(--ease-out);
}
.os-task-check:hover { color: var(--accent); }
.os-task-check .mb-icon { width: 20px; height: 20px; }
.os-entry__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  line-height: var(--leading-snug);
}
.os-entry--done .os-entry__title {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
}
.os-entry--done .os-task-check { color: var(--success); }
.os-entry__body {
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  color: var(--body);
  line-height: var(--leading-relaxed);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.os-entry__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  max-width: 100%;
}
.os-entry__url .mb-icon { width: var(--icon-xs); height: var(--icon-xs); flex-shrink: 0; }
.os-entry__url span {
  direction: ltr;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.os-entry__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}
.os-entry__time {
  font-size: var(--text-2xs);
  color: var(--faint);
  margin-inline-start: auto;
}

/* ================= بطاقة المؤشر ================= */
.os-kpi { padding: var(--space-4) var(--space-5); }
.os-kpi__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}
.os-kpi__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.os-kpi__nums {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.os-kpi__cur {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.os-kpi__target {
  font-size: var(--text-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.os-progress {
  height: 6px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-block: var(--space-3) var(--space-2);
}
.os-progress__fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.os-progress__fill.is-full { background: var(--success); }
.os-kpi__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-2xs);
  color: var(--muted);
}
.os-kpi__meta time { margin-inline-start: auto; color: var(--faint); }

/* ================= الميزانية ================= */
.os-month { margin-block-end: var(--space-7); }
.os-month__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}
.os-month__title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.os-month__totals {
  font-size: var(--text-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.os-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.os-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.os-table th {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  text-align: start;
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
  letter-spacing: var(--tracking-wide);
}
.os-table td {
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--border);
  vertical-align: middle;
  color: var(--body);
}
.os-table tr:last-child td { border-block-end: 0; }
.os-table .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.os-table .ch { font-weight: var(--weight-medium); color: var(--ink); }
.os-table .cell-note {
  font-size: var(--text-xs);
  color: var(--muted);
  max-width: 220px;
}
.os-neg { color: var(--danger); font-weight: var(--weight-semibold); }
.os-table .cell-actions { text-align: end; white-space: nowrap; }
.os-table .cell-actions form { display: inline-block; }

/* ================= التجارب ================= */
.os-exp { padding: var(--space-4) var(--space-5); }
.os-exp__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}
.os-exp__hyp {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--ink);
  line-height: var(--leading-relaxed);
  white-space: pre-line;
}
.os-exp__metric {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
}
.os-exp__metric .mb-icon { width: var(--icon-xs); height: var(--icon-xs); }
.os-exp__learning {
  margin-block-start: var(--space-3);
  background: var(--surface-sunk);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.os-exp__learning b {
  display: block;
  font-size: var(--text-2xs);
  color: var(--muted);
  font-weight: var(--weight-semibold);
  margin-block-end: 4px;
  letter-spacing: var(--tracking-wide);
}
.os-exp__learning p {
  font-size: var(--text-sm);
  color: var(--body);
  line-height: var(--leading-relaxed);
  white-space: pre-line;
}
.os-exp__foot {
  display: flex;
  margin-block-start: var(--space-3);
}
.os-exp__foot time {
  font-size: var(--text-2xs);
  color: var(--faint);
  margin-inline-start: auto;
}

/* ================= الحالة الفارغة ================= */
.os-empty {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-9) var(--space-5);
  text-align: center;
  color: var(--muted);
}
.os-empty .os-empty__icon {
  width: var(--icon-xl);
  height: var(--icon-xl);
  color: var(--faint);
  margin-inline: auto;
  margin-block-end: var(--space-3);
}
.os-empty__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--body);
}
.os-empty__sub {
  font-size: var(--text-sm);
  margin-block: var(--space-1) var(--space-5);
}

/* ================= المودالات ================= */
.os-modal[hidden] { display: none; }
.os-modal__panel { padding: 0; }
.os-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) 0;
}
.os-modal__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.os-modal__foot {
  display: flex;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}
body.os-lock { overflow: hidden; }

.os-ltr { direction: ltr; text-align: left; }

.os-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 520px) {
  .os-form-row { grid-template-columns: 1fr; }
}
.os-form-row .mb-field { margin-block-end: var(--space-5); }

/* ================= صفحة الدخول ================= */
.os-auth__card {
  width: 100%;
  max-width: var(--container-xs);
  padding: var(--space-8) var(--space-6);
}
.os-auth__head {
  text-align: center;
  margin-block-end: var(--space-6);
}
.os-auth__mark {
  width: 40px;
  height: 40px;
  color: var(--accent);
  margin-inline: auto;
  margin-block-end: var(--space-3);
}
.os-auth__sub {
  color: var(--muted);
  margin-block-start: var(--space-1);
}

/* ================= استجابة عامة ================= */
@media (max-width: 640px) {
  .os-main { padding-inline: var(--space-4); }
  .os-page-head { align-items: stretch; flex-direction: column; }
  .os-page-head .mb-btn { width: 100%; }
}

/* ================= الذكاء ================= */
.os-empty .mb-cluster { justify-content: center; }
.os-ai-lead {
  font-size: var(--text-sm);
  color: var(--body);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-5);
}