/* =====================================================
   Customer Churn Prediction System
   Enterprise Dashboard Theme
===================================================== */



/* ------------------------------
   Global Variables
------------------------------ */


:root {


    --background:
        #F8FAFC;


    --surface:
        #FFFFFF;


    --primary:
        #2563EB;


    --primary-hover:
        #1D4ED8;


    --success:
        #16A34A;


    --danger:
        #DC2626;


    --text-primary:
        #111827;


    --text-secondary:
        #6B7280;


    --border:
        #E5E7EB;


    --input-background:
        #FFFFFF;


    --shadow:

        0 4px 20px rgba(15, 23, 42, 0.06);



    --radius:

        12px;


}





/* ------------------------------
   Reset
------------------------------ */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}





body {


    font-family:

    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;



    background:

    var(--background);



    color:

    var(--text-primary);



    line-height:

    1.6;


}





/* ------------------------------
   Main Container
------------------------------ */


.app-container {


    max-width:

    1280px;



    margin:

    0 auto;



    padding:

    32px;


}





/* ------------------------------
   Header
------------------------------ */


.header {


    display:

    flex;



    justify-content:

    space-between;



    align-items:

    center;



    margin-bottom:

    32px;



}





.brand {


    display:

    flex;



    align-items:

    center;



    gap:

    16px;


}





.brand-icon {


    width:

    52px;



    height:

    52px;



    border-radius:

    14px;



    background:

    var(--primary);



    color:

    white;



    display:

    flex;



    justify-content:

    center;



    align-items:

    center;



}





.brand-icon svg {


    width:

    26px;


}





.brand h1 {


    font-size:

    24px;



    font-weight:

    700;



    letter-spacing:

    -0.02em;


}





.brand p {


    margin-top:

    4px;



    color:

    var(--text-secondary);



    font-size:

    14px;


}





/* ------------------------------
   Model Status
------------------------------ */


.model-status {


    display:

    flex;



    align-items:

    center;



    gap:

    8px;



    background:

    #FFFFFF;



    border:

    1px solid var(--border);



    padding:

    10px 16px;



    border-radius:

    999px;



    font-size:

    14px;



    color:

    var(--text-secondary);



}





.status-dot {


    height:

    8px;



    width:

    8px;



    background:

    var(--success);



    border-radius:

    50%;


}





/* ------------------------------
   Model Overview Cards
------------------------------ */


.model-overview {


    display:

    grid;



    grid-template-columns:

    repeat(4,1fr);



    gap:

    20px;



    margin-bottom:

    32px;


}





.overview-card {


    background:

    var(--surface);



    border:

    1px solid var(--border);



    border-radius:

    var(--radius);



    padding:

    22px;



    display:

    flex;



    align-items:

    center;



    gap:

    16px;



    box-shadow:

    var(--shadow);


}





.card-icon {


    width:

    42px;



    height:

    42px;



    border-radius:

    10px;



    background:

    #EFF6FF;



    color:

    var(--primary);



    display:

    flex;



    justify-content:

    center;



    align-items:

    center;


}





.card-icon svg {


    width:

    22px;


}





.overview-card p {


    color:

    var(--text-secondary);



    font-size:

    13px;



    margin-bottom:

    4px;


}





.overview-card h3 {


    font-size:

    18px;



    font-weight:

    600;


}




/* ------------------------------
   Prediction Container
------------------------------ */


.prediction-container {


    width:

    100%;


}





.prediction-form {


    display:

    flex;


    flex-direction:

    column;


    gap:

    24px;


}





/* ------------------------------
   Form Sections
------------------------------ */


.form-section {


    background:

    var(--surface);



    border:

    1px solid var(--border);



    border-radius:

    var(--radius);



    padding:

    28px;



    box-shadow:

    var(--shadow);


}





/* ------------------------------
   Section Header
------------------------------ */


.section-header {


    display:

    flex;



    align-items:

    center;



    gap:

    14px;



    margin-bottom:

    24px;


}





.section-header svg {


    width:

    28px;



    height:

    28px;



    color:

    var(--primary);


}





.section-header h2 {


    font-size:

    18px;



    font-weight:

    600;



    color:

    var(--text-primary);


}





.section-header p {


    font-size:

    14px;



    color:

    var(--text-secondary);


}





/* ------------------------------
   Form Grid
------------------------------ */


.form-grid {


    display:

    grid;



    grid-template-columns:

    repeat(2,1fr);



    gap:

    22px;


}





/* ------------------------------
   Form Group
------------------------------ */


.form-group {


    display:

    flex;



    flex-direction:

    column;



    gap:

    8px;


}





.form-group label {


    font-size:

    14px;



    font-weight:

    500;



    color:

    var(--text-primary);


}





.form-group label span {


    color:

    var(--text-secondary);



    font-size:

    12px;


}





/* ------------------------------
   Inputs and Selects
------------------------------ */


.form-group input,
.form-group select {


    width:

    100%;



    height:

    48px;



    border:

    1px solid var(--border);



    border-radius:

    10px;



    padding:

    0 14px;



    font-size:

    14px;



    font-family:

    inherit;



    background:

    var(--input-background);



    color:

    var(--text-primary);



    outline:

    none;



    transition:

    all 0.2s ease;


}





.form-group select {


    cursor:

    pointer;


}





.form-group input::placeholder {


    color:

    #9CA3AF;


}





.form-group input:hover,
.form-group select:hover {


    border-color:

    #CBD5E1;


}





.form-group input:focus,
.form-group select:focus {


    border-color:

    var(--primary);



    box-shadow:

    0 0 0 3px rgba(37,99,235,0.12);


}





/* ------------------------------
   Helper Text
------------------------------ */


.form-group small {


    font-size:

    12px;



    color:

    var(--text-secondary);


}





/* ------------------------------
   Submit Button Area
------------------------------ */


.submit-area {


    display:

    flex;



    justify-content:

    center;



    padding:

    12px 0 24px;


}





.predict-button {


    height:

    52px;



    min-width:

    240px;



    border:

    none;



    border-radius:

    12px;



    background:

    var(--primary);



    color:

    white;



    font-size:

    15px;



    font-weight:

    600;



    font-family:

    inherit;



    display:

    flex;



    justify-content:

    center;



    align-items:

    center;



    gap:

    10px;



    cursor:

    pointer;



    transition:

    all 0.25s ease;


}





.predict-button svg {


    width:

    20px;


}





.predict-button:hover {


    background:

    var(--primary-hover);



    transform:

    translateY(-2px);



    box-shadow:

    0 8px 18px rgba(37,99,235,0.25);


}





.predict-button:active {


    transform:

    translateY(0);


}



/* ------------------------------
   Prediction Result Card
------------------------------ */


.result-card {


    margin-top:

    24px;



    background:

    var(--surface);



    border:

    1px solid var(--border);



    border-radius:

    var(--radius);



    padding:

    28px;



    box-shadow:

    var(--shadow);


}





.result-header {


    display:

    flex;



    align-items:

    center;



    gap:

    12px;



    margin-bottom:

    24px;


}





.result-header svg {


    width:

    26px;



    height:

    26px;



    color:

    var(--primary);


}





.result-header h2 {


    font-size:

    18px;



    font-weight:

    600;


}





/* ------------------------------
   Result Content
------------------------------ */


.result-content {


    display:

    grid;



    grid-template-columns:

    repeat(2,1fr);



    gap:

    20px;


}





.risk-status,
.probability {


    border:

    1px solid var(--border);



    border-radius:

    12px;



    padding:

    22px;



    background:

    #FAFAFA;


}





.risk-status p,
.probability p {


    color:

    var(--text-secondary);



    font-size:

    14px;



    margin-bottom:

    8px;


}





.risk-status h3 {


    font-size:

    26px;



    font-weight:

    700;



}





.probability h3 {


    font-size:

    26px;



    font-weight:

    700;



    color:

    var(--primary);


}





/* ------------------------------
   Prediction Risk Colors

   Flask can add these classes
------------------------------ */


.low-risk {


    color:

    var(--success);


}





.high-risk {


    color:

    var(--danger);


}






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



@media(max-width:1100px){



    .model-overview {


        grid-template-columns:

        repeat(2,1fr);


    }



}







@media(max-width:768px){



    .app-container {


        padding:

        20px;


    }



    .header {


        flex-direction:

        column;



        align-items:

        flex-start;



        gap:

        20px;


    }





    .model-status {


        width:

        fit-content;


    }





    .model-overview {


        grid-template-columns:

        1fr;


    }





    .form-grid {


        grid-template-columns:

        1fr;


    }





    .result-content {


        grid-template-columns:

        1fr;


    }



}







@media(max-width:480px){



    .brand h1 {


        font-size:

        20px;


    }





    .brand p {


        font-size:

        13px;


    }





    .form-section {


        padding:

        20px;


    }





    .predict-button {


        width:

        100%;


    }


}





/* ------------------------------
   Smooth Experience
------------------------------ */


button,
input,
select {


    -webkit-tap-highlight-color:

    transparent;


}





::selection {


    background:

    rgba(37,99,235,0.15);


}