/* =========================
   MAIN CONTAINER
========================= */
.mz-analysis {
    padding: 25px;
    background: #f5f7fb;
}

/* =========================
   HERO SECTION
========================= */
.mz-hero {
    padding: 45px;
    border-radius: 15px;
    margin-bottom: 25px;
    background:
        linear-gradient(
            90deg,
            #dbeafe 0%,
            #ede9fe 50%,
            #d1fae5 100%
        );

      border: 1px solid #e5e7eb;
       box-shadow: 0 4px 6px rgba(0,0,0,0.0);
}

/* TITLE */
.mz-hero h2 {
    color:#5b21b6;
    font-weight: 700;
    margin-bottom: 5px;
}

/* SUBTEXT */
.mz-hero p {
    color: #991b1b;
    text-align: center;
    padding-left: 143px;
}

/* =========================
   CARDS GRID
========================= */
.mz-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
    margin-bottom: 25px;
}

/* =========================
   CARD BASE (UPDATED)
========================= */
.card {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 14px;
    min-height: 110px;
    transition: 0.2s;
     box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* HOVER */
.card:hover {
    transform: translateY(-4px);
}
.mz-hero-greet {
    font-size: 20px;
    color: #4c1d95;
    font-weight: 600;
    margin-bottom: 8px;
}

/* =========================
   CARD COLORS
========================= */
.mz-cards .card:nth-child(1) {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.mz-cards .card:nth-child(2) {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
}

.mz-cards .card:nth-child(3) {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.mz-cards .card:nth-child(4) {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* =========================
   CARD ROW LAYOUT
========================= */
.card-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

/* ICON */
.card-icon {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

/* TEXT */
.card-text h3 {
    font-size: 14px;
    margin: 0;
    font-weight: 500;
}

.card-text p {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
}

.card-text small {
    font-size: 12px;
    color: #6b7280;
}

/* =========================
   SECTION TITLE
========================= */
.mz-title {
    margin-bottom: 10px;
    font-weight: 600;
}

/* =========================
   TABLE DESIGN
========================= */
.mz-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    margin:0px;
}

.mz-table th {
    background: linear-gradient(
            135deg,
            #dbeafe 0%,
            #ede9fe 50%,
            #d1fae5 100%
        );

    color: #5b21b6;
    text-align: center;
}

.mz-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    text-align: center;
}
.mz-section-title {
    color: #1e40af;
    font-weight: 700;
}

.mz-table tr:hover {
    background: #f9fafb;
}
/* HERO ROW */
.mz-hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  
}

/* IMAGE LEFT */
.mz-hero-img {
    position: absolute;
    left: 150px;
}
.mz-hero-img img {
    width: 280px;   /* bigger image */
    height: auto;
}

/* TEXT CENTERED */
.mz-hero-text {
     width: 100%;
    text-align: center;
}

/* TEXT STYLE */
.mz-hero-text h2 {
    margin: 0 0 6px 0;
}

.mz-hero-text p {
    margin: 0;
}
/*   new */
/* SECTION WRAPPER */
.mz-section {
    margin-top: 30px;
}

/* TITLE */
.mz-section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111827;
}

/* TABLE CARD */
.mz-table-wrap {
    background: linear-gradient(
        135deg,
        #dbeafe,
        #ede9fe
    );

    border-radius: 14px;
    border: 1px solid #e5e7eb;
}
#mzChart {
    height: 250px;
    max-height: 250px;
    padding-bottom: 25px;
}
.mz-chart-box {
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    background: linear-gradient(
    135deg,
    #dbeafe 0%,    /* blue */
    #ede9fe 35%,   /* purple */
    #d1fae5 70%,   /* green */
    #fee2e2 90%   /* soft red */
   
);
background-size: 200% 200%;
animation: gradientMove 10s ease infinite;

    height: 300px;       /* 👈 fix size */
    overflow: hidden;
}


/*  -----*/
/* MOBILE FIX */
@media (max-width: 768px) {

    .mz-hero-row {
        flex-direction: column;
        text-align: center;
    }
    .mz-hero-img{
        margin-right: 50px;
    }

    .mz-hero-img img {
        width: 150px;
    }

}
/* =========================
   INSIGHTS SECTION
========================= */
.mz-insights {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ✅ 4 in one row */
    gap: 15px;
    margin-bottom: 25px;
}

/* CARD BASE */
.mz-insight-card {
    
    background: #ffffff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
    height: 100%; /* equal height */
}

/* TITLES */
.mz-insight-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

/* LIST */
.mz-insight-card ul {
    padding-left: 18px;
    margin: 0;
}

.mz-insight-card li {
    margin-bottom: 6px;
    font-size: 14px;
}

/* WEAK STYLE */
.mz-insight-card.weak {
    background: #fee2e2;
    color: #991b1b;
}

/* STRONG STYLE */
.mz-insight-card.strong {
    background: #d1fae5;
    color: #065f46;
}

/* =========================
   RESPONSIVE DESIGN
========================= */
@media (max-width: 1024px) {
    .mz-insights {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mz-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .mz-hero-row {
        flex-direction: column;
        text-align: center;
    }
    
    .mz-hero-img {
        position: static;  /* ✅ Fixed mobile positioning */
        margin: 0 auto 20px;
    }
    
    .mz-hero-img img {
        width: 180px;
    }
    
    .mz-hero p {
        padding-left: 0;  /* ✅ Fixed text alignment */
    }
    
    .mz-insights {
        grid-template-columns: 1fr;
    }
    .mz-table-wrap {
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 1px;
    overflow-x: auto;  /* Enable horizontal scroll on mobile */
    -webkit-overflow-scrolling: touch;  /* Smooth scroll on iOS */
}

.mz-table {
    width: 100%;
    min-width: 500px;  /* Minimum width before scrolling */
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    margin: 0;
    font-size: 13px;  /* Slightly smaller font on mobile */
}

.mz-table th,
.mz-table td {
    padding: 10px 8px;  /* Reduced padding */
    text-align: center;
    white-space: nowrap;  /* Prevent text wrapping in cells */
}
    
}

@media (max-width: 600px) {
    .mz-insights {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .mz-cards {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .card-icon {
        width: 120px;
        height: 120px;
    }
}
/*@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}*/
/*@media (prefers-reduced-motion: reduce) {
  .mz-chart-box {
    animation: none;
  }
}*/