/* ─────────────────────────────────────────────────────────────────────
   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); }