/* ═══════════════════════════════════════════════════════════════
   salesGrowthDashboard.css
   wwwroot/css/dashboard/salesGrowthDashboard.css
   ═══════════════════════════════════════════════════════════════ */

/* ── KPI Flip Kartlar ───────────────────────────────────────── */
.kpi-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 1.5rem;
}

.kpi-flip {
    perspective: 900px;
    height: 158px;
}

.kpi-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .5s ease;
    transform-style: preserve-3d;
}

.kpi-flip:hover .kpi-flip-inner {
    transform: rotateY(180deg);
}

.kpi-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    border: 1px solid #EBEDF3;
    background: #fff;
    box-sizing: border-box;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.kpi-face--ciro {
    border-top: 3px solid #3699FF;
}

.kpi-face--kar {
    border-top: 3px solid #1BC5BD;
}

.kpi-face--marj {
    border-top: 3px solid #8950FC;
}

.kpi-face.back {
    transform: rotateY(180deg);
    background: #F8F9FA;
    border-top: 3px solid #E4E6EF;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
}

.kpi-face-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #B5B5C3;
}

.kpi-face-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-top: 3px;
}

.kpi-face-value {
    font-size: 15px;
    font-weight: 700;
    color: #181C32;
}

.kpi-face-value-sub {
    font-size: 10px;
    font-weight: 400;
    color: #B5B5C3;
    margin-left: 3px;
}

.kpi-face-prev {
    font-size: 12px;
    color: #7E8299;
    margin-top: 2px;
}

.kpi-face-prev-lbl {
    font-size: 10px;
    color: #B5B5C3;
    margin-left: 3px;
}

.kpi-face-footer {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
}

.kpi-face-note {
    font-size: 10px;
    color: #A1A5B7;
    font-style: italic;
}

/* Momentum bar */

/* Badge */
.kpi-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

    .kpi-badge.up {
        background: #E8FDF8;
        color: #1BC5BD;
    }

    .kpi-badge.down {
        background: #FFF0F1;
        color: #F64E60;
    }

    .kpi-badge.flat {
        background: #F3F6F9;
        color: #7E8299;
    }

/* Arka yüz */
.kpi-back-title {
    font-size: 11px;
    font-weight: 700;
    color: #3F4254;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid #E4E6EF;
}

.kpi-back-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.kpi-back-row-lbl {
    font-size: 11px;
    color: #7E8299;
}

.kpi-back-divider {
    border: none;
    border-top: 1px solid #E4E6EF;
    margin: 5px 0;
}

.kpi-back-note {
    font-size: 10.5px;
    color: #7E8299;
    line-height: 1.55;
}

    .kpi-back-note b {
        font-weight: 600;
        color: #3F4254;
    }

/* ── Hedef Şeridi ────────────────────────────────────────────── */
.goal-strip {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-left: 4px solid #3699FF;
}

.goal-strip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.goal-strip-icon {
    font-size: 1rem;
}

.goal-strip-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #B5B5C3;
    flex: 1;
}

.goal-strip-pct {
    font-size: 1rem;
    font-weight: 800;
    color: #3F4254;
}

.goal-strip-track {
    width: 100%;
    height: 10px;
    background: #F3F6F9;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.goal-strip-fill {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, #3699FF, #1BC5BD);
    transition: width .8s ease;
}

    .goal-strip-fill.danger {
        background: linear-gradient(90deg,#F64E60,#FF8A9A);
    }

    .goal-strip-fill.warning {
        background: linear-gradient(90deg,#FFA800,#FFD166);
    }

    .goal-strip-fill.success {
        background: linear-gradient(90deg,#1BC5BD,#0DD882);
    }

.goal-strip-footer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
}

.goal-strip-stat {
    text-align: center;
}

.goal-strip-stat-label {
    font-size: .62rem;
    color: #B5B5C3;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.goal-strip-stat-val {
    font-size: .82rem;
    font-weight: 800;
    color: #3F4254;
}

/* ── Sync Bar ────────────────────────────────────────────────── */
.sync-info-bar {
    display: flex;
    align-items: center;
    background: #F3F6F9;
    border-radius: 20px;
    padding: 3px;
    font-size: .72rem;
}

.sync-info-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 16px;
    color: #5E6278;
    font-weight: 600;
}

    .sync-info-item i {
        font-size: .68rem;
        color: #A1A5B7;
    }

.sync-live-dot {
    width: 6px;
    height: 6px;
    background: #1BC5BD;
    border-radius: 50%;
    display: inline-block;
    margin-right: 2px;
    animation: livePulse 2s ease-in-out infinite;
}

.sync-info-divider {
    width: 1px;
    height: 14px;
    background: #D0D5DD;
    margin: 0 4px;
}

/* ── Live Badge ──────────────────────────────────────────────── */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F3F6F9;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: .78rem;
    font-weight: 600;
    color: #3F4254;
}

.live-dot {
    width: 7px;
    height: 7px;
    background: #1BC5BD;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(1.3);
    }
}

/* ── Accordion Paneller ──────────────────────────────────────── */
.detail-panel {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
}

.detail-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: .88rem;
    color: #3F4254;
    user-select: none;
    transition: background .15s;
}

    .detail-panel-header:hover {
        background: #F8F9FA;
    }

.detail-chevron {
    font-size: .72rem;
    color: #B5B5C3;
    transition: transform .2s ease;
    flex-shrink: 0;
}

    .detail-chevron.open {
        transform: rotate(180deg);
    }

.detail-panel-body {
    padding: 4px 20px 20px;
    border-top: 1px solid #F3F6F9;
}

/* ── Karşılaştırma Blokları ──────────────────────────────────── */
.cmp-block {
    background: #fff;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.cmp-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .82rem;
    margin-bottom: 10px;
}

.cmp-row-wrap {
    display: flex;
    align-items: center;
}

.cmp-col-prev {
    flex: 1;
}

.cmp-col-middle {
    text-align: center;
    padding: 0 14px;
}

.cmp-col-curr {
    flex: 1;
    text-align: right;
}

.cmp-period-label {
    font-size: .68rem;
    color: #B5B5C3;
    font-weight: 600;
    margin-bottom: 2px;
}

.cmp-amount {
    font-size: .88rem;
    font-weight: 800;
    color: #3F4254;
}

.cmp-growth-amt {
    font-size: .85rem;
    font-weight: 800;
}

.cmp-arrow {
    font-size: 1.1rem;
    color: #D0D0D0;
    margin-top: 2px;
}

.cmp-range-note {
    font-size: .78rem;
    color: #7E8299;
    font-weight: 600;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: #F3F6F9;
    border-radius: 6px;
}

.cmp-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ── Anlık / Aylık Toolbar ───────────────────────────────────── */
.ic-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0 4px;
}

.ic-toolbar-inputs {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.ic-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ic-input-label {
    font-size: .68rem;
    font-weight: 700;
    color: #B5B5C3;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.ic-input-group .form-control-sm {
    width: 175px;
}

.ic-arrow {
    font-size: 1.2rem;
    color: #D0D0D0;
    padding-bottom: 4px;
}

.ic-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mc-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 0 4px;
}

.mc-toolbar-selectors {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.mc-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.mc-selector-group {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F8F9FA;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    padding: 8px 12px;
}

.mc-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

/* ── Sipariş Analizi ─────────────────────────────────────────── */
.oa-grid-5 {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 12px;
}

.oa-kpi {
    background: #F8F9FA;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #EBEDF3;
}

.oa-kpi--clickable {
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}

    .oa-kpi--clickable:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
        border-color: #3699FF;
    }

.oa-kpi--danger.oa-kpi--clickable:hover {
    border-color: #F64E60;
}

.oa-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.oa-kpi-body {
    flex: 1;
    min-width: 0;
}

.oa-kpi-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #B5B5C3;
    margin-bottom: 3px;
}

.oa-kpi-val {
    font-size: .95rem;
    font-weight: 800;
    color: #181C32;
}

.oa-kpi-rate {
    font-size: .68rem;
    color: #A1A5B7;
    margin-top: 3px;
}

.oa-uninvoiced-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg,#FFF5F8 0%,#FFF0F1 100%);
    border-radius: 10px;
    border: 1px solid #FFE2E5;
    border-left: 4px solid #F64E60;
}

.oa-uninvoiced-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.oa-uninvoiced-icon {
    font-size: 1.4rem;
}

.oa-uninvoiced-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #F64E60;
}

.oa-uninvoiced-val {
    font-size: 1.05rem;
    font-weight: 800;
    color: #F64E60;
}

/* ── Sipariş Detay Tablosu ───────────────────────────────────── */
.oa-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

    .oa-detail-table thead th {
        font-size: .65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #B5B5C3;
        padding: 8px 10px;
        border-bottom: 2px solid #F3F6F9;
        white-space: nowrap;
        background: #FAFAFA;
    }

    .oa-detail-table tbody tr {
        border-bottom: 1px solid #F8F9FA;
        transition: background .1s;
    }

        .oa-detail-table tbody tr:hover {
            background: #F8F9FA;
        }

    .oa-detail-table tbody td {
        padding: 10px 10px;
        vertical-align: middle;
        color: #3F4254;
    }

.oa-summary-row {
    cursor: pointer;
    transition: background .1s;
}

    .oa-summary-row:hover {
        background: #FFF5F8 !important;
    }

/* ── Top Müşteri / Stok ──────────────────────────────────────── */
.customer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

    .customer-table thead th {
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #B5B5C3;
        padding: 8px 12px;
        border-bottom: 2px solid #F3F6F9;
    }

    .customer-table tbody tr {
        border-bottom: 1px solid #F8F9FA;
        transition: background .12s;
    }

        .customer-table tbody tr:hover {
            background: #F8F9FA;
        }

    .customer-table tbody td {
        padding: 12px 12px;
        color: #3F4254;
        vertical-align: middle;
    }

.cust-name {
    font-weight: 700;
    color: #181C32;
    font-size: .85rem;
}

.cust-code {
    font-size: .68rem;
    color: #B5B5C3;
    margin-top: 1px;
}

.cust-rank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: .75rem;
    font-weight: 800;
}

.cust-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: #F8F9FA;
    border-radius: 10px;
    margin-bottom: 16px;
}

.cust-summary-stats {
    display: flex;
    align-items: center;
}

.cust-summary-stat {
    text-align: right;
    padding: 0 16px;
}

.cust-summary-stat-label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #B5B5C3;
    display: block;
    margin-bottom: 2px;
}

.cust-summary-stat-val {
    font-size: .92rem;
    font-weight: 800;
    color: #181C32;
}

.cust-summary-divider {
    width: 1px;
    height: 32px;
    background: #EBEDF3;
    flex-shrink: 0;
}

.growth-pill {
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 12px;
    white-space: nowrap;
}

    .growth-pill.up {
        background: #E8FDF8;
        color: #1BC5BD;
    }

    .growth-pill.down {
        background: #FFF0F1;
        color: #F64E60;
    }

    .growth-pill.flat {
        background: #F3F6F9;
        color: #7E8299;
    }

    .growth-pill.new {
        background: #EEF6FF;
        color: #3699FF;
    }

/* ── Saatlik / Slot Grid ─────────────────────────────────────── */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    gap: 10px;
}

.slot-card {
    background: #F8F9FA;
    border-radius: 8px;
    padding: 12px;
    font-size: .8rem;
}

/* ── AI Panel ────────────────────────────────────────────────── */
.ai-panel {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.ai-header {
    background: linear-gradient(135deg,#6a11cb 0%,#2575fc 100%);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.ai-body {
    padding: 22px;
}

.ai-estimate-card {
    background: linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 18px;
}

.ai-estimate-row {
    display: flex;
    align-items: stretch;
}

.ai-estimate-block {
    flex: 1;
    padding: 0 22px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ai-estimate-block:first-child {
        padding-left: 0;
    }

    .ai-estimate-block:last-child {
        padding-right: 0;
    }

.ai-estimate-block--main {
    flex: 1.4;
}

.ai-estimate-block--meta {
    flex: 0.9;
}

.ai-estimate-divider {
    width: 1px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}

.ai-est-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.ai-est-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.ai-est-value--big {
    color: #00D2FF;
}

.ai-est-range {
    font-size: .75rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

.ai-est-sub {
    font-size: .72rem;
    font-weight: 600;
}

    .ai-est-sub.positive {
        color: #0DD882;
    }

    .ai-est-sub.negative {
        color: #FF6B6B;
    }

.ai-est-confidence {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
}

.ai-est-mode {
    font-size: .72rem;
    color: rgba(255,255,255,0.5);
}

.ai-est-basis {
    font-size: .68rem;
    color: rgba(255,255,255,0.35);
    margin-top: 4px;
    font-style: italic;
    line-height: 1.4;
}

.ai-commentary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-comm-block {
    background: #F8F9FA;
    border-left: 3px solid #3699FF;
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
}

.ai-comm-block--month {
    border-left-color: #00D2FF;
}

.ai-comm-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #7E8299;
    margin-bottom: 5px;
}

.ai-comm-text {
    font-size: .85rem;
    color: #3F4254;
    line-height: 1.65;
}

/* ── Modal ───────────────────────────────────────────────────── */
#orderDetailModal .modal-header {
    border-bottom: 2px solid #F3F6F9;
    padding: 16px 20px;
}

#orderDetailModal .modal-body {
    padding: 20px;
}

#orderDetailModal .modal-footer {
    border-top: 1px solid #F3F6F9;
    padding: 12px 20px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 992px) {
    .kpi-face-value {
        font-size: 13px;
    }

    .ai-estimate-block--meta {
        display: none;
    }

    .oa-grid-5 {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width: 768px) {
    .kpi-bar {
        grid-template-columns: 1fr;
    }

    .kpi-flip {
        height: 148px;
    }

    .cmp-row-wrap {
        flex-direction: column;
        gap: 8px;
    }

    .cmp-col-curr {
        text-align: left;
    }

    .cmp-grid-2x2 {
        grid-template-columns: 1fr;
    }

    .ai-estimate-row {
        flex-direction: column;
        gap: 14px;
    }

    .ai-estimate-divider {
        width: 100%;
        height: 1px;
        margin: 4px 0;
    }

    .ai-estimate-block {
        padding: 0;
    }

    .ai-estimate-block--meta {
        display: flex;
    }

    .ic-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ic-toolbar-inputs {
        flex-direction: column;
    }

    .ic-input-group .form-control-sm {
        width: 100%;
    }

    .ic-arrow {
        display: none;
    }

    .mc-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .goal-strip-footer {
        grid-template-columns: repeat(2,1fr);
    }

    .sync-info-bar {
        flex-direction: column;
        gap: 2px;
        border-radius: 10px;
    }
}

@media (max-width: 576px) {
    .kpi-bar {
        grid-template-columns: 1fr;
    }

    .oa-grid-5 {
        grid-template-columns: repeat(2,1fr);
    }

    .cust-summary-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .cust-summary-stat {
        text-align: center;
        padding: 0 8px;
    }

    .goal-strip-footer {
        grid-template-columns: repeat(2,1fr);
    }
}

@keyframes kpi-spin {
    to {
        transform: rotate(360deg);
    }
}

.kpi-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #E4E6EF;
    border-top-color: #3699FF;
    border-radius: 50%;
    animation: kpi-spin .8s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.kpi-spinner--teal {
    border-top-color: #1BC5BD;
}

.kpi-spinner--purple {
    border-top-color: #8950FC;
}

.kpi-loading-text {
    font-size: .78rem;
    color: #B5B5C3;
    vertical-align: middle;
}

.panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 0;
    color: #B5B5C3;
    font-size: .82rem;
}

.panel-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #E4E6EF;
    border-top-color: #3699FF;
    border-radius: 50%;
    animation: kpi-spin .8s linear infinite;
    flex-shrink: 0;
}