/* ==========================================================================
   FEYALMA V2 — Global UI Harmony
   Lot 12.2
   ========================================================================== */

:root {
    --feyalma-ui-green: #0f9f75;
    --feyalma-ui-green-soft: #eaf8f3;
    --feyalma-ui-blue: #3b82f6;
    --feyalma-ui-blue-soft: #edf5ff;
    --feyalma-ui-amber: #e5a000;
    --feyalma-ui-amber-soft: #fff8e5;
    --feyalma-ui-red: #ef4444;
    --feyalma-ui-red-soft: #fff1f1;
    --feyalma-ui-slate: #64748b;
    --feyalma-ui-ink: #13202b;
    --feyalma-ui-line: #e3e9ee;
    --feyalma-ui-soft: #f7f9fa;
    --feyalma-ui-card: #ffffff;
    --feyalma-ui-radius: 1rem;
    --feyalma-ui-shadow: 0 10px 30px rgba(15, 23, 42, .045);
}

/* --------------------------------------------------------------------------
   Generic Filament cards / sections
   -------------------------------------------------------------------------- */

.fi-section {
    border: 1px solid var(--feyalma-ui-line) !important;
    border-radius: 1rem !important;
    box-shadow: var(--feyalma-ui-shadow) !important;
}

.fi-wi-chart {
    overflow: hidden;
    border: 1px solid var(--feyalma-ui-line);
    border-radius: 1rem;
    box-shadow: var(--feyalma-ui-shadow);
}

/* --------------------------------------------------------------------------
   KPI / Stats cards
   -------------------------------------------------------------------------- */

.fi-wi-stats-overview-stat.feyalma-metric-card {
    position: relative;
    overflow: hidden;
    min-height: 116px;
    border: 1px solid var(--feyalma-ui-line) !important;
    border-radius: 1rem !important;
    background: var(--feyalma-ui-card) !important;
    box-shadow: var(--feyalma-ui-shadow) !important;
}

.fi-wi-stats-overview-stat.feyalma-metric-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 1rem 0 0 1rem;
    background: var(--feyalma-ui-slate);
}

.fi-wi-stats-overview-stat.feyalma-metric-card--primary::before,
.fi-wi-stats-overview-stat.feyalma-metric-card--success::before {
    background: var(--feyalma-ui-green);
}

.fi-wi-stats-overview-stat.feyalma-metric-card--info::before {
    background: var(--feyalma-ui-blue);
}

.fi-wi-stats-overview-stat.feyalma-metric-card--warning::before {
    background: var(--feyalma-ui-amber);
}

.fi-wi-stats-overview-stat.feyalma-metric-card--danger::before {
    background: var(--feyalma-ui-red);
}

.fi-wi-stats-overview-stat.feyalma-metric-card--neutral::before {
    background: #94a3b8;
}

.fi-wi-stats-overview-stat.feyalma-metric-card .fi-wi-stats-overview-stat-value {
    color: var(--feyalma-ui-ink);
    letter-spacing: -.025em;
}

.dark .fi-wi-stats-overview-stat.feyalma-metric-card {
    border-color: rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.035) !important;
}

.dark .fi-wi-stats-overview-stat.feyalma-metric-card .fi-wi-stats-overview-stat-value {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Operational Filament tables
   Keep tables as tables, but harmonize their visual language.
   -------------------------------------------------------------------------- */

.fi-ta-ctn {
    overflow: hidden;
    border: 1px solid var(--feyalma-ui-line) !important;
    border-radius: 1rem !important;
    background: var(--feyalma-ui-card);
    box-shadow: var(--feyalma-ui-shadow) !important;
}

.fi-ta-header-ctn {
    border-bottom-color: var(--feyalma-ui-line) !important;
    background: rgba(255,255,255,.98);
}

.fi-ta-table thead {
    background: var(--feyalma-ui-soft);
}

.fi-ta-table thead th {
    color: #475569;
    font-size: .73rem;
    font-weight: 700;
}

.fi-ta-row {
    transition: background-color .16s ease;
}

@media (hover: hover) and (pointer: fine) {
    .fi-ta-row:hover {
        background: rgba(15,159,117,.025);
    }
}

.fi-ta-table tbody tr:not(:last-child) {
    border-bottom-color: #edf1f4;
}

.dark .fi-ta-ctn,
.dark .fi-ta-header-ctn {
    border-color: rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.025);
}

.dark .fi-ta-table thead {
    background: rgba(255,255,255,.04);
}

/* --------------------------------------------------------------------------
   Report activity cards
   -------------------------------------------------------------------------- */

.feyalma-report-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}

.feyalma-report-metric-card {
    position: relative;
    min-width: 0;
    min-height: 108px;
    padding: 1rem 1.1rem;
    overflow: hidden;
    border: 1px solid var(--feyalma-ui-line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: var(--feyalma-ui-shadow);
}

.feyalma-report-metric-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #94a3b8;
}

.feyalma-report-metric-card--primary::before,
.feyalma-report-metric-card--success::before {
    background: var(--feyalma-ui-green);
}

.feyalma-report-metric-card--info::before {
    background: var(--feyalma-ui-blue);
}

.feyalma-report-metric-card--warning::before {
    background: var(--feyalma-ui-amber);
}

.feyalma-report-metric-card--danger::before {
    background: var(--feyalma-ui-red);
}

.feyalma-report-metric-card__label {
    margin: 0;
    color: var(--feyalma-ui-slate);
    font-size: .78rem;
}

.feyalma-report-metric-card__value {
    margin: .38rem 0 0;
    color: var(--feyalma-ui-ink);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.feyalma-report-metric-card__note {
    margin: .35rem 0 0;
    color: var(--feyalma-ui-slate);
    font-size: .72rem;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Report grouped business cards
   -------------------------------------------------------------------------- */

.feyalma-report-position-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.feyalma-report-position-group {
    padding: 1rem;
    border: 1px solid var(--feyalma-ui-line);
    border-radius: 1rem;
    background: var(--feyalma-ui-soft);
}

.feyalma-report-position-group__heading {
    margin-bottom: .85rem;
}

.feyalma-report-position-group__heading strong {
    display: block;
    color: var(--feyalma-ui-ink);
    font-size: .9rem;
    font-weight: 800;
}

.feyalma-report-position-group__heading span {
    display: block;
    margin-top: .2rem;
    color: var(--feyalma-ui-slate);
    font-size: .72rem;
    line-height: 1.4;
}

.feyalma-report-position-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.feyalma-report-position-card {
    position: relative;
    min-width: 0;
    padding: .9rem 1rem;
    overflow: hidden;
    border: 1px solid var(--feyalma-ui-line);
    border-radius: .85rem;
    background: #fff;
}

.feyalma-report-position-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #94a3b8;
}

.feyalma-report-position-card--primary::before {
    background: var(--feyalma-ui-green);
}

.feyalma-report-position-card--info::before {
    background: var(--feyalma-ui-blue);
}

.feyalma-report-position-card--warning::before {
    background: var(--feyalma-ui-amber);
}

.feyalma-report-position-card--danger::before {
    background: var(--feyalma-ui-red);
}

.feyalma-report-position-card__label {
    margin: 0;
    color: var(--feyalma-ui-slate);
    font-size: .72rem;
    line-height: 1.35;
}

.feyalma-report-position-card__value {
    margin: .35rem 0 0;
    color: var(--feyalma-ui-ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.feyalma-report-position-card__subvalue {
    display: block;
    margin-top: .1rem;
    color: var(--feyalma-ui-slate);
    font-size: .75rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Report data tables
   -------------------------------------------------------------------------- */

.feyalma-report-table-shell {
    overflow: hidden;
    border: 1px solid var(--feyalma-ui-line);
    border-radius: .9rem;
    background: #fff;
}

.feyalma-report-table-shell > table {
    min-width: 100%;
}

.feyalma-report-table-shell thead {
    background: var(--feyalma-ui-soft);
}

.feyalma-report-table-shell th {
    color: #475569;
    font-weight: 700;
}

.feyalma-report-table-shell tbody tr {
    transition: background-color .15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .feyalma-report-table-shell tbody tr:hover {
        background: rgba(15,159,117,.025);
    }
}

/* --------------------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------------------- */

.dark .feyalma-report-metric-card,
.dark .feyalma-report-position-card,
.dark .feyalma-report-table-shell {
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
}

.dark .feyalma-report-position-group {
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.025);
}

.dark .feyalma-report-metric-card__value,
.dark .feyalma-report-position-group__heading strong,
.dark .feyalma-report-position-card__value {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .feyalma-report-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feyalma-report-position-groups {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .feyalma-report-metric-grid,
    .feyalma-report-position-grid {
        grid-template-columns: 1fr;
    }
}


/* --------------------------------------------------------------------------
   Customer scoring — compact explanation
   -------------------------------------------------------------------------- */

.feyalma-score-explanation {
    display: grid;
    gap: 1rem;
}

.feyalma-score-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.feyalma-score-summary__card {
    position: relative;
    min-width: 0;
    padding: .9rem 1rem;
    overflow: hidden;
    border: 1px solid var(--feyalma-ui-line);
    border-radius: .85rem;
    background: #fff;
}

.feyalma-score-summary__card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #94a3b8;
}

.feyalma-score-summary__card--primary::before {
    background: var(--feyalma-ui-green);
}

.feyalma-score-summary__card--positive::before {
    background: var(--feyalma-ui-blue);
}

.feyalma-score-summary__card--negative::before {
    background: var(--feyalma-ui-red);
}

.feyalma-score-summary__card > span {
    display: block;
    color: var(--feyalma-ui-slate);
    font-size: .7rem;
}

.feyalma-score-summary__card > strong {
    display: block;
    margin-top: .25rem;
    color: var(--feyalma-ui-ink);
    font-size: 1.05rem;
    font-weight: 800;
}

.feyalma-score-summary__card > small {
    display: block;
    margin-top: .18rem;
    color: var(--feyalma-ui-slate);
    font-size: .68rem;
    line-height: 1.35;
}

.feyalma-score-factors {
    overflow: hidden;
    border: 1px solid var(--feyalma-ui-line);
    border-radius: 1rem;
    background: #fff;
}

.feyalma-score-factors__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--feyalma-ui-line);
    background: var(--feyalma-ui-soft);
}

.feyalma-score-factors__heading strong {
    display: block;
    color: var(--feyalma-ui-ink);
    font-size: .85rem;
}

.feyalma-score-factors__heading span {
    display: block;
    margin-top: .15rem;
    color: var(--feyalma-ui-slate);
    font-size: .68rem;
}

.feyalma-score-formula {
    flex: 0 0 auto;
    color: var(--feyalma-ui-slate);
    font-size: .75rem;
    white-space: nowrap;
}

.feyalma-score-formula strong {
    display: inline;
    color: var(--feyalma-ui-ink);
    font-size: .85rem;
}

.feyalma-score-factors__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem;
}

.feyalma-score-factor {
    position: relative;
    min-width: 0;
    padding: .8rem .9rem;
    border: 1px solid var(--feyalma-ui-line);
    border-left: 3px solid #94a3b8;
    border-radius: .8rem;
    background: #fff;
}

.feyalma-score-factor--positive {
    border-left-color: var(--feyalma-ui-green);
}

.feyalma-score-factor--negative {
    border-left-color: var(--feyalma-ui-red);
}

.feyalma-score-factor__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.feyalma-score-factor__top strong {
    min-width: 0;
    color: var(--feyalma-ui-ink);
    font-size: .78rem;
}

.feyalma-score-factor__points {
    flex: 0 0 auto;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .68rem;
    font-weight: 800;
}

.feyalma-score-factor--positive .feyalma-score-factor__points {
    background: var(--feyalma-ui-green-soft);
    color: #047857;
}

.feyalma-score-factor--negative .feyalma-score-factor__points {
    background: var(--feyalma-ui-red-soft);
    color: #dc2626;
}

.feyalma-score-factor p {
    margin: .35rem 0 0;
    color: var(--feyalma-ui-slate);
    font-size: .72rem;
    line-height: 1.4;
}

.feyalma-score-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--feyalma-ui-line);
    background: var(--feyalma-ui-soft);
}

.feyalma-score-result strong {
    display: block;
    color: var(--feyalma-ui-ink);
    font-size: .78rem;
}

.feyalma-score-result span {
    display: block;
    margin-top: .18rem;
    color: var(--feyalma-ui-slate);
    font-size: .68rem;
}

.feyalma-score-result__value {
    flex: 0 0 auto;
    color: var(--feyalma-ui-green);
    font-size: 1.1rem;
    font-weight: 800;
}

.dark .feyalma-score-summary__card,
.dark .feyalma-score-factors,
.dark .feyalma-score-factor {
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.035);
}

.dark .feyalma-score-factors__heading,
.dark .feyalma-score-result {
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.025);
}

.dark .feyalma-score-summary__card > strong,
.dark .feyalma-score-factor__top strong,
.dark .feyalma-score-factors__heading strong,
.dark .feyalma-score-formula strong,
.dark .feyalma-score-result strong {
    color: #fff;
}

@media (max-width: 1000px) {
    .feyalma-score-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .feyalma-score-summary,
    .feyalma-score-factors__grid {
        grid-template-columns: 1fr;
    }

    .feyalma-score-factors__heading,
    .feyalma-score-result {
        align-items: flex-start;
        flex-direction: column;
    }

    .feyalma-score-formula {
        white-space: normal;
    }
}

/* ==========================================================================
   FEYALMA V2 — Lot 15.16 Dashboard polish
   ========================================================================== */

.fi-wi-stats-overview-stat.feyalma-metric-card--primary-kpi {
    min-height: 116px;
}

.fi-wi-stats-overview-stat.feyalma-metric-card--secondary {
    min-height: 102px;
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
}

.fi-wi-stats-overview-stat.feyalma-metric-card--secondary
.fi-wi-stats-overview-stat-value {
    font-size: 1.55rem !important;
    line-height: 1.08;
}

.fi-wi-stats-overview-stat.feyalma-metric-card--secondary
.fi-wi-stats-overview-stat-description {
    font-size: .72rem;
    line-height: 1.35;
}

.fi-wi-stats-overview-stat.feyalma-metric-card--clickable {
    cursor: pointer;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

@media (hover: hover) and (pointer: fine) {
    .fi-wi-stats-overview-stat.feyalma-metric-card--clickable:hover {
        transform: translateY(-2px);
        border-color: #cbd5e1 !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
    }
}