/* ─────────────────────────────────────────────────────────────────────
   HOMEi Growth OS — layout layer for the Growth Marketing screens.

   Why this file exists: the compiled Filament theme ships component
   chrome (sections, badges, tabs) but NOT arbitrary Tailwind layout
   utilities — `grid-cols-*` and `gap-*` are simply absent from
   public/css/filament/filament/app.css. Custom blades that relied on
   them rendered as flat stacked text (Wave-1 DEV UAT finding).

   Rather than depend on a per-deployment Tailwind rebuild, Growth
   follows the repository's own module-stylesheet convention (see
   workforce.css / payroll.css / sales-inventory.css): plain CSS,
   registered as a Filament asset, republished with
   `php artisan filament:assets`.

   Presentation only. RTL-safe: logical properties exclusively.
   ──────────────────────────────────────────────────────────────────── */

/* Responsive field/KPI grids — auto-fit so they need no breakpoint
   utilities and behave identically in LTR and RTL. */
.growth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem 1.5rem;
}

.growth-grid--kpi {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.growth-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

/* Label / value pair used across Overview, Brief and KPI tiles. */
.growth-field__label {
    font-size: 0.75rem;
    line-height: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgb(107 114 128);
}

.growth-field__value {
    margin-block-start: 0.125rem;
    font-size: 0.875rem;
    color: rgb(17 24 39);
}

.growth-field__value--strong {
    font-size: 1.125rem;
    font-weight: 600;
}

/* Chip rows (availability checks, evidence mix, readiness states). */
.growth-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

.growth-chips--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Filter bar. */
.growth-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.growth-filters label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
}

/* Tables inside custom Growth pages: horizontal scroll never bleeds
   into the page, which is what kept mobile usable in Wave-1 UAT. */
.growth-table-wrap {
    inline-size: 100%;
    overflow-x: auto;
}

.growth-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: start;
}

.growth-table th,
.growth-table td {
    padding: 0.5rem 0.75rem;
    text-align: start;
    vertical-align: top;
    white-space: nowrap;
}

.growth-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(107 114 128);
    border-block-end: 1px solid rgb(229 231 235);
}

.growth-table tbody tr + tr td {
    border-block-start: 1px solid rgb(243 244 246);
}

.growth-table td.growth-table__wrap {
    white-space: normal;
}

/* PART-2C.5: a table whose columns must stay legible rather than be
   squeezed on a phone — it grows to its content and the wrapper above
   scrolls. Opt-in, so existing Growth tables keep their layout. */
.growth-table.growth-table--fit {
    min-inline-size: max-content;
}

/* Simple vertical rhythm for list rows (evidence, hypotheses, attention). */
.growth-rows > * + * {
    margin-block-start: 0.5rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid rgb(243 244 246);
}

.growth-row {
    font-size: 0.875rem;
}

.growth-row__meta {
    margin-block-start: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.growth-note {
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.growth-inline-actions {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.growth-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark mode: the panel already swaps its own surfaces; only text and
   hairlines need re-stating so contrast holds. */
.dark .growth-field__label,
.dark .growth-table thead th,
.dark .growth-row__meta,
.dark .growth-note {
    color: rgb(156 163 175);
}

.dark .growth-field__value {
    color: rgb(243 244 246);
}

.dark .growth-table thead th {
    border-block-end-color: rgba(255, 255, 255, 0.1);
}

.dark .growth-table tbody tr + tr td,
.dark .growth-rows > * + * {
    border-block-start-color: rgba(255, 255, 255, 0.06);
}

/* Panels used by the Research/Persona workspaces (Wave-1 screens now
   share this layer instead of hand-rolled utility cards). */
.growth-panel {
    border: 1px solid rgb(229 231 235);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.dark .growth-panel {
    border-color: rgba(255, 255, 255, 0.1);
}

.growth-strong {
    font-weight: 500;
}

/* Persona/strategy evidence mix bar. */
.growth-mixbar {
    display: flex;
    block-size: 0.75rem;
    border-radius: 0.25rem;
    overflow: hidden;
    margin-block-end: 0.5rem;
}

.growth-dot {
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 999px;
    margin-inline-end: 0.25rem;
}

/* ─── Wave-2 final design pass — Growth design-system layer ────────── */

/* Page context line under the Filament heading. */
.growth-subtitle {
    margin-block-start: -0.25rem;
    font-size: 0.875rem;
    color: rgb(107 114 128);
}

/* KPI stat cards (Command Center, workspace summary, HI header). */
.growth-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
}

.growth-kpi {
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgb(255 255 255);
    border-inline-start: 3px solid rgb(209 213 219);
}

.growth-kpi--good { border-inline-start-color: rgb(34 197 94); }
.growth-kpi--warn { border-inline-start-color: rgb(245 158 11); }
.growth-kpi--bad  { border-inline-start-color: rgb(239 68 68); }
.growth-kpi--info { border-inline-start-color: rgb(59 130 246); }

.growth-kpi__value {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.75rem;
    color: rgb(17 24 39);
    font-variant-numeric: tabular-nums;
    unicode-bidi: plaintext;
}

.growth-kpi__value--na { color: rgb(156 163 175); font-weight: 500; }

.growth-kpi__label {
    margin-block-start: 0.125rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.growth-kpi__hint { font-size: var(--ho-text-xs); color: rgb(156 163 175); }

.dark .growth-kpi { background: transparent; border-color: rgba(255,255,255,0.1); }
.dark .growth-kpi__value { color: rgb(243 244 246); }

/* Health dot + label. */
.growth-health {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

.growth-health::before {
    content: '';
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 999px;
    background: rgb(156 163 175);
}

.growth-health--healthy::before { background: rgb(34 197 94); }
.growth-health--warning::before { background: rgb(245 158 11); }
.growth-health--critical::before { background: rgb(239 68 68); }

/* Import wizard stepper. */
.growth-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    align-items: center;
    font-size: 0.8125rem;
}

.growth-stepper__step {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    color: rgb(107 114 128);
}

.growth-stepper__step--done { color: rgb(22 163 74); }
.growth-stepper__step--current {
    background: rgb(239 246 255);
    color: rgb(29 78 216);
    font-weight: 600;
}
.dark .growth-stepper__step--current { background: rgba(59,130,246,0.15); color: rgb(147 197 253); }

.growth-stepper__sep { color: rgb(209 213 219); margin-inline: 0.125rem; }

/* Numbers are always tabular + bidi-isolated (Arabic UI, Latin data). */
.growth-num {
    font-variant-numeric: tabular-nums;
    unicode-bidi: plaintext;
    white-space: nowrap;
}

/* Attention / candidate / learning cards. */
.growth-cards { display: grid; gap: 0.625rem; }

.growth-card {
    border: 1px solid rgb(229 231 235);
    border-radius: 0.625rem;
    padding: 0.75rem 0.875rem;
}

.growth-card--warn { border-inline-start: 3px solid rgb(245 158 11); }
.growth-card--bad { border-inline-start: 3px solid rgb(239 68 68); }
.growth-card--good { border-inline-start: 3px solid rgb(34 197 94); }

.dark .growth-card { border-color: rgba(255,255,255,0.1); }

.growth-card__title { font-weight: 600; font-size: 0.875rem; }
.growth-card__body { margin-block-start: 0.25rem; font-size: 0.8125rem; color: rgb(75 85 99); }
.dark .growth-card__body { color: rgb(156 163 175); }

/* Inline note input row (candidate review). */
.growth-review-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-block-start: 0.5rem;
}

.growth-review-row input[type="text"] {
    flex: 1 1 14rem;
    min-inline-size: 0;
    font-size: 0.8125rem;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    background: transparent;
}

.dark .growth-review-row input[type="text"] { border-color: rgba(255,255,255,0.15); color: rgb(243 244 246); }

/* Buttons that are plain wire-click links. */
.growth-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgb(209 213 219);
    cursor: pointer;
    background: transparent;
    color: rgb(55 65 81);
    min-block-size: 2.25rem;
}

.growth-btn--primary { background: rgb(37 99 235); border-color: rgb(37 99 235); color: #fff; }
.growth-btn--danger { color: rgb(185 28 28); border-color: rgb(252 165 165); }
.growth-btn--success { color: rgb(21 128 61); border-color: rgb(134 239 172); }

.dark .growth-btn { border-color: rgba(255,255,255,0.15); color: rgb(209 213 219); }
.dark .growth-btn--primary { background: rgb(37 99 235); color: #fff; }

/* Mobile campaign-performance cards (Historical Intelligence < 768px). */
.growth-hi-cards { display: none; }

@media (max-width: 767px) {
    .growth-hi-table { display: none; }
    .growth-hi-cards { display: grid; gap: 0.625rem; }
}

/* AI draft panel — visually distinct so a draft is never mistaken for truth. */
.growth-ai-panel {
    border: 1px dashed rgb(147 197 253);
    background: rgb(239 246 255);
    border-radius: 0.625rem;
    padding: 0.75rem 0.875rem;
    font-size: 0.8125rem;
}

.dark .growth-ai-panel { background: rgba(59,130,246,0.08); border-color: rgba(147,197,253,0.4); }

.growth-ai-panel pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.75rem;
    margin-block-start: 0.5rem;
}

/* Workspace hero meta row. */
.growth-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    font-size: 0.8125rem;
    color: rgb(107 114 128);
}

/* Evidence-mix palette (persona/strategy) — no Tailwind utility deps. */
.growth-mix--historical_data { background: rgb(34 197 94); }
.growth-mix--external_research { background: rgb(59 130 246); }
.growth-mix--assumption { background: rgb(245 158 11); }

/* ENGAGE-1 «صندوق التعليقات» — only what the module skin (.p360 .mcp) does not already have.
   Every colour is a .p360 role variable; no new values. */
.scm .scm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scm .scm-row { cursor: pointer; }
.scm .scm-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.scm .scm-text { font-size: 13px; color: var(--t2); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; line-height: 1.6; }
.scm .scm-text--clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.scm .scm-when { white-space: nowrap; color: var(--t3); font-size: 12.5px; }
.scm .scm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.scm .scm-thread { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow: auto; }
.scm .scm-msg { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.scm .scm-msg.is-page { background: var(--navy-tint); margin-inline-start: 18px; }
.scm .scm-msg.is-focus { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-tint); }
.scm .scm-msg.is-gone .scm-text { text-decoration: line-through; color: var(--t3); }
.scm .scm-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.scm .scm-reply { width: 100%; border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--t2); background: var(--surface); resize: vertical; }
.scm .scm-reply:focus { border-color: var(--navy); outline: none; }
.scm .mcp-btn--danger { border-color: var(--red-border); color: var(--red); }
@media (max-width: 900px) { .scm .scm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones (same container breakpoints as the module): each comment is a small card; the thread is the module's bottom sheet, open while a comment is picked */
@container (max-width: 860px) {
  .scm .mcp-aside.is-empty { display: none; }
  .scm .mcp-aside.is-open { max-height: 88vh; }
}
@container (max-width: 620px) {
  .scm .mcp-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c c" "post when" "status status"; }
  .scm .mcp-table td.scm-td-comment { grid-area: c; }
  .scm .mcp-table td.scm-td-post { grid-area: post; }
  .scm .mcp-table td.scm-when { grid-area: when; }
  .scm .mcp-table td.scm-td-status { grid-area: status; }
}

/* PUBCAL-1 «تقويم النشر» — the month grid; .p360 role variables only. */
.spc .spc-monthnav { display: inline-flex; align-items: center; gap: 8px; }
.spc .spc-month { font-size: 15px; color: var(--ink); min-width: 120px; text-align: center; }
.spc .spc-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spc .spc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.spc .spc-wd { font-size: 12px; font-weight: 700; color: var(--t3); text-align: center; padding: 4px 0; }
.spc .spc-day { min-height: 118px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spc .spc-day.is-out { background: var(--surface-2); opacity: .7; }
.spc .spc-day.is-today { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-tint); }
.spc .spc-dn { font-size: 12px; font-weight: 700; color: var(--ink); }
.spc .spc-dn-full { display: none; }
.spc .spc-entry { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; align-items: center; width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 3px 6px; font: inherit; font-size: 12px; cursor: pointer; text-align: start; }
.spc .spc-entry .tm { font-variant-numeric: tabular-nums; opacity: .85; }
.spc .spc-entry .cd { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spc .spc-entry .pf { font-size: 12px; font-weight: 700; }
.spc .spc-entry.is-on { outline: 2px solid var(--navy); outline-offset: 1px; }
.spc .spc-more { font-size: 12px; color: var(--t3); }
.spc .spc-key { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.spc .spc-tone--navy { background: var(--navy-tint); color: var(--navy); }
.spc .spc-tone--good { background: var(--good-tint); color: var(--good); }
.spc .spc-tone--amber { background: var(--orange-tint); color: var(--orange-deep); border-color: var(--orange-border); }
.spc .spc-tone--red { background: var(--red-tint); color: var(--red); border-color: var(--red-border); }
.spc .spc-tone--plan { background: var(--surface); color: var(--t3); border: 1px dashed var(--border-strong); }
.spc .spc-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.spc .spc-when { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); margin: 0; }
.spc .spc-when .mcp-ic { width: 16px; height: 16px; color: var(--navy); }
.spc .spc-error { font-size: 12.5px; color: var(--red); background: var(--red-tint); border-radius: 8px; padding: 8px 10px; margin: 0; overflow-wrap: anywhere; }
.spc .spc-danger { border-color: var(--red-border); color: var(--red); }
@container (max-width: 860px) {
  .spc .mcp-aside.is-empty { display: none; }
  .spc .mcp-aside.is-open { max-height: 88vh; }
}
@container (max-width: 620px) {
  .spc .spc-cal { grid-template-columns: minmax(0, 1fr); }
  .spc .spc-wd, .spc .spc-day.is-out { display: none; }
  .spc .spc-day { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .spc .spc-day:not(:has(.spc-entry)) { display: none; }
  .spc .spc-dn { width: 100%; font-size: 0; }
  .spc .spc-dn-full { display: inline; font-size: 13px; }
}

/* CAL-DRAG-1 — drag a scheduled post to another day. */
.spc .spc-entry.is-draggable { cursor: grab; }
.spc .spc-entry.is-draggable:active { cursor: grabbing; }
.spc .spc-day.is-drop { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-tint); background: var(--orange-tint); }
/* PERF-DASH-1 «أداء المحتوى» — only what the module skin (.p360 .mcp) lacks; .p360 role variables only. */
.scp .scp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .scp .scp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scp .scp-leads { color: var(--good); }
.scp .scp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.scp .scp-mini-wrap { overflow-x: auto; }
.scp .scp-mini { width: 100%; min-width: 360px; border-collapse: collapse; font-size: 13px; }
.scp .scp-mini th, .scp .scp-mini td { padding: 8px 10px; text-align: start; border-top: 1px solid var(--border-soft); color: var(--t2); font-variant-numeric: tabular-nums; }
.scp .scp-mini thead th { border-top: 0; color: var(--t3); font-size: 12px; font-weight: 600; }
.scp .scp-mini tbody th { color: var(--ink); font-weight: 700; }
.scp .scp-row { cursor: pointer; }
.scp .scp-post { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scp .scp-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.scp .scp-td-rank { color: var(--t3); width: 36px; }
.scp .scp-delta { font-size: 13px; font-weight: 700; }
.scp .scp-delta.is-up { color: var(--good); }
.scp .scp-delta.is-down { color: var(--red); }
.scp .scp-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.scp .scp-cell { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; }
.scp .scp-cell b { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.scp .scp-cell span { font-size: 12px; color: var(--t3); }
.scp .scp-h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 4px 0 0; }
.scp .scp-bars { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.scp .scp-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 56px; gap: 8px; align-items: center; font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; }
.scp .scp-bar .t { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.scp .scp-bar .t i { display: block; height: 100%; background: var(--orange); border-radius: 5px; }
.scp .scp-bar .v { text-align: end; color: var(--ink); }
@container (max-width: 860px) {
  .scp .scp-compare { grid-template-columns: minmax(0, 1fr); }
  .scp .mcp-aside.is-empty { display: none; }
  .scp .mcp-aside.is-open { max-height: 88vh; }
}
@container (max-width: 620px) {
  .scp .mcp-table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: none; }
  .scp .mcp-table td.scp-td-rank { display: none; }
  .scp .mcp-table td.scp-td-post { grid-column: 1 / -1; }
  .scp .mcp-table td[data-l]:not([data-l=""])::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 600; color: var(--t3); }
}

/* AUDIENCE-1 — Instagram audience block. Tokens only; type ≥ 12px. */
.scp .scp-audience { margin-top: 14px; }
.scp .scp-aud-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.scp .scp-aud-h { display: block; font-size: 13px; color: var(--ink); margin: 4px 0 6px; }
.scp .scp-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 12px; color: var(--t2); margin-bottom: 4px; }
.scp .scp-bar .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scp .scp-bar .t { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.scp .scp-bar .t i { display: block; height: 100%; background: var(--navy); border-radius: 4px; }
.scp .scp-bar .v { text-align: end; font-variant-numeric: tabular-nums; }
.scp .scp-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; direction: ltr; }
.scp .scp-hour { height: 26px; border-radius: 3px; background: var(--orange); }
.scp .scp-hours-axis { display: flex; justify-content: space-between; direction: ltr; font-size: 12px; color: var(--t3); margin-top: 3px; }
.scp .scp-aud-best { font-size: 12.5px; color: var(--ink); font-weight: 600; margin: 8px 0 0; }
@media (max-width: 1100px) { .scp .scp-aud-grid { grid-template-columns: minmax(0, 1fr); } }

/* ADS-LEADS-1 — content in ads. */
.scp .scp-ads { margin-top: 14px; }
.scp .scp-ad-select { max-width: 220px; font-size: 12.5px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px 8px; background: var(--surface); color: var(--ink); }
/* ADS-BOOST-1 «الإعلانات الممولة» — tokens only; type ≥ 12px. */
.adb { display: flex; flex-direction: column; gap: 14px; }
.adb .adb-blocker { background: var(--orange-tint); border-color: var(--orange-border); color: var(--orange-deep); gap: 4px; font-size: 13px; }
.adb .adb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adb .adb-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 4px 0 2px; }
.adb .adb-bar i { display: block; height: 100%; background: var(--orange); border-radius: 3px; }
.adb .adb-rule { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--t3); margin: 0; }
.adb .adb-rule .mcp-ic { width: 16px; height: 16px; flex: none; color: var(--navy); }
.adb .adb-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.adb .adb-scroll { overflow-x: auto; }
.adb .mcp-table td .p360-note { display: block; margin-top: 2px; font-size: 12px; }
.adb .adb-err { color: var(--red); white-space: normal; max-width: 280px; }
.adb .adb-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.adb .adb-btn { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
@media (max-width: 767px) { .adb .adb-kpis { grid-template-columns: minmax(0, 1fr); } }