/* Custom Styles for the integrated time capsule and overall UX */

/* 1. Cursor for 'is-waiting' state: Apply wait cursor to everything inside the waiting element */
.is-waiting * {
    cursor: wait !important;
}

/* 2. Style the Call Button for proper stacking with the time capsule */
.api-card .card-body .js-api-call {
    /* Set the button to be full width with no bottom margin/corners */
    display: block !important;
    width: 100% !important;
    /* FIX: Set to 0 to stack tightly with the new timing container below it */
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 3. Style the Time Capsule Container */
.api-timing-container {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    /* Rounded corners only on the bottom to align with card */
    border-radius: 0 0 0.25rem 0.25rem !important;
    background-color: #f8f9fa; /* Light background to match card body */
    padding: 0;
}

/* 3b. Style the Actual Time Span */
.api-timing {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    /* Appearance */
    background-color: #008C99; /* Teal color */
    color: white;
    padding: 0.5rem 0;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    /* Ensure it has enough height even if content is small */
    min-height: 2.1rem;
    line-height: 1;
    /* Remove default rounding so the container controls it */
    border-radius: 0 !important;
}


/* FIX 4: Ensure JSON response text is readable when highlighted */
#jsonResponse::selection {
    /* Bright background and white text for high contrast */
    background-color: #007bff;
    color: #ffffff;
}

/* Vendor prefixes for cross-browser support */
#jsonResponse::-moz-selection {
    background-color: #007bff;
    color: #ffffff;
}

#jsonResponse::-webkit-selection {
    background-color: #007bff;
    color: #ffffff;
}

/* FIX 5: Reduce font size in card headers so long API endpoints don't wrap */
.api-card .card-header h6 {
    font-size: 0.85rem !important; /* Makes the full URL fit */
    line-height: 1.1;
}