/* CRM ekranları — ortak stiller (Pano, Müşteri 360, Fırsatlar, Aktiviteler) */

.crm {
    --crm-ink: #1d2733;
    --crm-muted: #5d6b79;
    --crm-line: #dfe4ea;
    --crm-surface: #ffffff;
    --crm-soft: #f5f7f9;
    --crm-accent: #5f368d;      /* blazing-berry ana rengiyle uyumlu */
    --crm-accent-soft: #efe9f6;
    --crm-ok: #2f7d3a;
    --crm-ok-soft: #e5f2e6;
    --crm-warn: #9a6700;
    --crm-warn-soft: #fbf0d6;
    --crm-bad: #b3261e;
    --crm-bad-soft: #fbe5e3;
    --crm-bar-1: #5f368d;
    --crm-bar-2: #2f7d3a;
    --crm-bar-3: #b7bfc8;
    --crm-bar-4: #c98a1b;
    color: var(--crm-ink);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.crm-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; border-bottom: 1px solid var(--crm-line); padding-bottom: .5rem; }
.crm-nav h1 { font-size: 1.35rem; font-weight: 600; margin: 0 1rem 0 0; }
.crm-nav a { color: var(--crm-muted); text-decoration: none; padding: .35rem .6rem; border-radius: 6px; font-weight: 500; }
.crm-nav a:hover { background: var(--crm-soft); color: var(--crm-ink); }
.crm-nav a.active { background: var(--crm-accent-soft); color: var(--crm-accent); }
.crm-nav .crm-nav-scope { margin-left: auto; font-size: .85rem; color: var(--crm-muted); }

.crm-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.crm-toolbar .crm-field { display: flex; flex-direction: column; gap: .2rem; min-width: 160px; }
.crm-toolbar label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--crm-muted); }

.crm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.crm-tile { background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: 8px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.crm-tile .crm-tile-label { font-size: .78rem; color: var(--crm-muted); }
.crm-tile .crm-tile-value { font-size: 1.45rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.crm-tile .crm-tile-sub { font-size: .8rem; color: var(--crm-muted); font-variant-numeric: tabular-nums; }
.crm-tile.is-warn { border-left: 4px solid var(--crm-warn); }
.crm-tile.is-bad { border-left: 4px solid var(--crm-bad); }
.crm-tile.is-ok { border-left: 4px solid var(--crm-ok); }

.crm-section { display: flex; flex-direction: column; gap: .6rem; }
.crm-section h2 { font-size: 1.05rem; font-weight: 600; margin: 0; }
.crm-section .crm-hint { font-size: .82rem; color: var(--crm-muted); margin: 0; }
.crm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.crm-card { background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }

/* Yatay çubuk listesi (huni, aşama, kayıp nedeni) */
.crm-bars { display: flex; flex-direction: column; gap: .45rem; }
.crm-bar-row { display: grid; grid-template-columns: minmax(110px, 30%) 1fr auto; gap: .6rem; align-items: center; font-size: .88rem; }
.crm-bar-track { background: var(--crm-soft); border-radius: 3px; height: 14px; overflow: hidden; }
.crm-bar-fill { background: var(--crm-bar-1); height: 100%; border-radius: 3px; }
.crm-bar-value { font-variant-numeric: tabular-nums; color: var(--crm-muted); white-space: nowrap; }

/* Yığılmış çubuk (teklif durumları) */
.crm-stack { display: flex; height: 22px; border-radius: 4px; overflow: hidden; background: var(--crm-soft); }
.crm-stack > div { height: 100%; }
.crm-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .82rem; color: var(--crm-muted); }
.crm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }

/* Aylık sütun grafiği */
.crm-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(28px, 1fr); align-items: end; gap: 6px; height: 160px; padding-top: 1.2rem; border-bottom: 1px solid var(--crm-line); }
.crm-column { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.crm-column .crm-column-fill { background: var(--crm-bar-1); border-radius: 3px 3px 0 0; min-height: 1px; }
.crm-column.is-last .crm-column-fill { background: var(--crm-bar-2); }
.crm-column .crm-column-val { position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%); font-size: .7rem; color: var(--crm-muted); white-space: nowrap; }
.crm-column-labels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(28px, 1fr); gap: 6px; font-size: .7rem; color: var(--crm-muted); text-align: center; }

.crm-chip { display: inline-block; font-size: .75rem; font-weight: 600; padding: 1px 8px; border-radius: 10px; white-space: nowrap; }
.crm-chip.ok { background: var(--crm-ok-soft); color: var(--crm-ok); }
.crm-chip.warn { background: var(--crm-warn-soft); color: var(--crm-warn); }
.crm-chip.bad { background: var(--crm-bad-soft); color: var(--crm-bad); }
.crm-chip.muted { background: var(--crm-soft); color: var(--crm-muted); }
.crm-chip.accent { background: var(--crm-accent-soft); color: var(--crm-accent); }

.crm-errors { background: var(--crm-bad-soft); color: var(--crm-bad); border-radius: 6px; padding: .5rem .8rem; margin: 0 0 .5rem; font-size: .88rem; }
.crm-errors ul { margin: 0; padding-left: 1.1rem; }
.crm-empty { color: var(--crm-muted); font-size: .9rem; padding: .5rem 0; }
.crm-num { font-variant-numeric: tabular-nums; }
.crm-link { color: var(--crm-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.crm-customer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.crm-customer-head h2 { font-size: 1.25rem; margin: 0; }
.crm-customer-head span { color: var(--crm-muted); }

@media (max-width: 600px) {
    .crm-bar-row { grid-template-columns: 1fr auto; }
    .crm-bar-row .crm-bar-track { grid-column: 1 / -1; grid-row: 2; }
    .crm-toolbar .crm-field { min-width: 100%; }
}

/* Müşteri açılır listesi: son irsaliye / son temas */
.crm-cust-opt { display: flex; align-items: baseline; gap: 12px; width: 100%; }
.crm-cust-opt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm-cust-opt-dates { flex: 0 0 auto; display: flex; gap: 10px; font-size: .85em; color: var(--crm-muted); font-variant-numeric: tabular-nums; }