/* ============================================================
   SalesTeams Dashboard — KPI Card Styles
   Verbatim од wireframe: docs/sdlc/.../wireframes/SCR-01-salesteams-dashboard.razor
   ============================================================ */

/* ========= Root ========= */
.dashboard-root {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, transparent 280px);
    min-height: 100vh;
}

.dashboard-inner {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* ========= Header ========= */
.dashboard-header {
    padding-bottom: 8px;
}

.header-greeting {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--mud-palette-text-primary) !important;
    letter-spacing: -0.4px;
    line-height: 1.2 !important;
}

.header-date {
    font-size: 1.25rem !important;
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 500 !important;
}

.refresh-btn {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

/* ========= KPI Card base ========= */
.kpi-card {
    position: relative;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    height: 100%;
    min-height: 200px;
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease;
    border: 1px solid rgba(15, 23, 42, 0.04);
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);
}

.kpi-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.kpi-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.kpi-label {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.kpi-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
}

.kpi-hero-number {
    font-size: 2.85rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mud-palette-text-primary);
    letter-spacing: -1px;
}

.kpi-hero-orange {
    color: #EA580C;
}

.kpi-sub {
    font-size: 0.92rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
}

.kpi-sub-icon {
    color: var(--mud-palette-text-secondary);
}

.kpi-sub-center {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    margin-top: 10px;
}

/* ========= Color variants (accent + avatar + tinted background) ========= */
.kpi-blue {
    background: linear-gradient(160deg, rgba(59, 130, 246, 0.07) 0%, rgba(6, 182, 212, 0.03) 60%, #FFFFFF 100%);
}
.kpi-blue .kpi-accent { background: linear-gradient(90deg, #3B82F6 0%, #06B6D4 100%); }
.kpi-avatar-blue { background: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%); }

.kpi-amber {
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.07) 0%, rgba(251, 191, 36, 0.03) 60%, #FFFFFF 100%);
}
.kpi-amber .kpi-accent { background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%); }
.kpi-avatar-amber { background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); }

.kpi-green {
    background: linear-gradient(160deg, rgba(16, 185, 129, 0.07) 0%, rgba(52, 211, 153, 0.03) 60%, #FFFFFF 100%);
}
.kpi-green .kpi-accent { background: linear-gradient(90deg, #10B981 0%, #34D399 100%); }
.kpi-avatar-green { background: linear-gradient(135deg, #10B981 0%, #34D399 100%); }

.kpi-orange {
    background: linear-gradient(160deg, rgba(249, 115, 22, 0.07) 0%, rgba(251, 146, 60, 0.03) 60%, #FFFFFF 100%);
}
.kpi-orange .kpi-accent { background: linear-gradient(90deg, #F97316 0%, #FB923C 100%); }
.kpi-avatar-orange { background: linear-gradient(135deg, #F97316 0%, #FB923C 100%); }

.kpi-purple {
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.07) 0%, rgba(167, 139, 250, 0.03) 60%, #FFFFFF 100%);
}
.kpi-purple .kpi-accent { background: linear-gradient(90deg, #8B5CF6 0%, #A78BFA 100%); }
.kpi-avatar-purple { background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%); }

.kpi-pink {
    background: linear-gradient(160deg, rgba(236, 72, 153, 0.07) 0%, rgba(244, 114, 182, 0.03) 60%, #FFFFFF 100%);
}
.kpi-pink .kpi-accent { background: linear-gradient(90deg, #EC4899 0%, #F472B6 100%); }
.kpi-avatar-pink { background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%); }
.kpi-pink .photo-tile { background: linear-gradient(135deg, #EC4899, #F472B6); }

.kpi-teal {
    background: linear-gradient(160deg, rgba(20, 184, 166, 0.07) 0%, rgba(45, 212, 191, 0.03) 60%, #FFFFFF 100%);
}
.kpi-teal .kpi-accent { background: linear-gradient(90deg, #14B8A6 0%, #2DD4BF 100%); }
.kpi-avatar-teal { background: linear-gradient(135deg, #14B8A6 0%, #2DD4BF 100%); }

.kpi-slate {
    background: linear-gradient(160deg, rgba(100, 116, 139, 0.07) 0%, rgba(148, 163, 184, 0.03) 60%, #FFFFFF 100%);
}
.kpi-slate .kpi-accent { background: linear-gradient(90deg, #64748B 0%, #94A3B8 100%); }
.kpi-avatar-slate { background: linear-gradient(135deg, #64748B 0%, #94A3B8 100%); }

/* ========= Card 2: Dual metric ========= */
.dual-metric {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dual-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dual-icon { flex-shrink: 0; }
.dual-icon-info { color: #06B6D4; }
.dual-icon-success { color: #10B981; }

.dual-label {
    flex-grow: 1;
    font-size: 0.98rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.dual-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.dual-divider {
    height: 1px;
    background: rgba(15, 23, 42, 0.06);
}

/* ========= Card 3: Circular progress ========= */
.circular-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.circular-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
}

.circular-progress-lg {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px !important;
    height: 120px !important;
}

.circular-wrap .mud-progress-circular {
    width: 120px !important;
    height: 120px !important;
}

.circular-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.circular-percent {
    font-size: 1.95rem;
    font-weight: 700;
    color: #10B981;
    line-height: 1;
    letter-spacing: -0.5px;
}

.circular-frac {
    font-size: 0.88rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    font-weight: 600;
}

/* ========= Card 5: Surveys ========= */
.survey-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.survey-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.survey-label {
    font-size: 0.92rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.survey-frac {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.survey-bar {
    height: 8px !important;
    border-radius: 4px !important;
}

.survey-percent {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    text-align: right;
    font-weight: 600;
    margin-top: 2px;
}

.survey-subtitle {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    margin-bottom: 8px;
}

.survey-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.survey-total-label {
    font-size: 0.92rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.survey-total-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* ========= Card 6: Photo stack ========= */
.photo-stack {
    display: flex;
    position: relative;
}

.photo-tile {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.30);
}

.photo-tile-2 { margin-left: -10px; opacity: 0.85; }
.photo-tile-3 { margin-left: -10px; opacity: 0.70; }

/* ========= Card 7: Time gauges ========= */
.time-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.time-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.time-dot-work { background: #14B8A6; }
.time-dot-active { background: #10B981; }

.time-text {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-label {
    font-size: 0.92rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.time-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.time-bar {
    height: 6px !important;
    border-radius: 3px !important;
}

/* ========= Card 8: Comment bubble ========= */
.comment-wrap {
    position: relative;
    display: inline-block;
}

.comment-bubble {
    font-size: 2.85rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.10) 0%, rgba(148, 163, 184, 0.10) 100%);
    padding: 6px 22px;
    border-radius: 20px 20px 20px 4px;
    display: inline-block;
    line-height: 1;
    letter-spacing: -1px;
}

/* ========= Refresh pulsing animation ========= */
.kpi-pulsing {
    animation: kpi-pulse 1.4s ease-in-out infinite;
}

@keyframes kpi-pulse {
    0%, 100% { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); }
    50% { box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12), 0 4px 12px rgba(79, 70, 229, 0.15); }
}

/* ========= Error state ========= */
.error-state {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.error-label {
    color: var(--mud-palette-error);
    font-size: 0.85rem;
    font-weight: 600;
}
</content>
</invoke>