/* custom_styles.css */
.hover-button:hover {
    background-color: #28a745 !important;  /* Force background color change */
    color: white !important;               /* Force text color change */
    cursor: pointer !important;            /* Force pointer cursor */
    border: 2px solid #fff !important;     /* Force border change */
}

/* assets/custom.css */
.custom-loading-spinner .dash-spinner {
    color: #76c7c0 !important;  /* Light green color */
    font-size: 40px !important;  /* Larger spinner */
}


/* Hover effect for enabled green button */
#access-demo-btn:enabled:hover {
    background-color: #218838; /* Darker green on hover */
    color: white;
    cursor: pointer;
}

/* Bold numbering for ordered list */
ol.bold-numbers {
    counter-reset: section;
    padding-left: 20px; /* Adds padding for numbering alignment */
}

ol.bold-numbers li {
    list-style: none; /* Remove default numbering */
    position: relative; /* Relative positioning for custom counter */
    margin-bottom: 15px; /* Adds space between list items */
    padding-left: 25px; /* Space for bold numbers */
}

ol.bold-numbers li::before {
    counter-increment: section;
    content: counter(section) ". "; /* Creates numbered sequence */
    font-weight: bold; /* Makes the numbering bold */
    position: absolute;
    left: 0;
}


/* RESULTS PAGE */
/* Style for clickable main panels */
.clickable-panel {
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #ddd;
    min-height: 100px; /* Set minimum height */
    height: 100%;      /* Full height within the row */
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer !important;  /* Ensures pointer cursor */
}

.clickable-panel:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

/* Style for Radiomic Summary container */
.radiomic-summary-container {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Centers the sub-panels horizontally */
    justify-content: space-evenly;  /* Spaces the sub-panels evenly vertically */
    height: 100%;  /* Ensures it takes the full height of the card */
}

/* Style for Radiomic Summary sub-panels */
.radiomic-subpanel {
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
    width: 75%;
    height: 75px;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    cursor: pointer !important;  /* Ensures pointer cursor for sub-panels */
}

/* Hover effect for each sub-panel */
.radiomic-subpanel:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

/* Individual colors for each sub-panel */
.clickable-subpanel-tumor {
    background-color: #d4e6f1; /* Light blue */
}

.clickable-subpanel-qvt {
    background-color: #d5f5e3; /* Light green */
}

.clickable-subpanel-intra {
    background-color: #f9e79f; /* Light yellow */
}

.clickable-subpanel-peri {
    background-color: #f5c6cb; /* Light pink */
}

/* Darken colors on hover for each sub-panel */
.clickable-subpanel-tumor:hover {
    background-color: #5dade2; /* Darker blue */
}

.clickable-subpanel-qvt:hover {
    background-color: #58d68d; /* Darker green */
}

.clickable-subpanel-intra:hover {
    background-color: #f7dc6f; /* Darker yellow */
}

.clickable-subpanel-peri:hover {
    background-color: #e74c3c; /* Darker pink */
}



/* Style for the Potential Treatments panel's content */
.clickable-panel .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns header at the top */
    align-items: center;         /* Centers items horizontally */
}

/* Container for the circle to center it vertically */
.treatment-circle-container {
    flex-grow: 1;               /* Expands to take up remaining space */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Style for the Potential Treatments circle */
.treatment-circle {
    width: 64%;                /* 80% of the original 80% width */
    aspect-ratio: 1 / 1;       /* Ensures a 1:1 aspect ratio for a perfect circle */
    border: 3px solid #b0b0b0; /* Gray border for the circle */
    border-radius: 50%;        /* Makes it circular */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}