/* top mobile click toggle button settings*/
/* Floating Toggle Button */
#quick-actions-toggle {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1051;
    border-radius: 5px 0 0 5px;
    padding: 10px 5px;
}

/* Sliding Panel */
#quick-actions-panel {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 350px;
    z-index: 1050;
    transition: transform 0.3s ease-in-out;
}

/* Class to hide the panel by sliding it off-screen */
.quick-actions-hidden {
    transform: translate(100%, -50%) !important;
}

/* Replacement for inline styles */
.mobile-live-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    border: 1px solid #6c757d;
    border-radius: 0.25rem;
    background-color: rgba(108, 117, 125, 0.1);
    padding: 0.25rem;
}

.mobile-live-label {
    font-weight: bold;
    text-align: center;
    font-size: 0.65rem;
}

/*===================================================*/

/* side account fund css*/
/* Custom sizing for the Reset Button */
.btn-reset-custom {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Optional: Styling for the input group addon to match your theme */
.input-group-text.bg-secondary {
    color: #fff;
    border-color: #6c757d;
}

/* Ensuring labels in the config section stay aligned */
.card-body label {
    margin-bottom: 0;
    line-height: 1.2;
}
/*====================Down betfair style ladder creating =================================*/
/* Ensure the container doesn't let content overflow horizontally */
.ladder-container {
    width: 480px; /* Widened to fit new cancel columns */
    border: 2px solid #333;
    background: #fff;
    font-family: 'Roboto', Arial, sans-serif;
}

.ladder-grid {
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ladder-row {
    display: table-row;
    height: 35px;
}

    .ladder-row > div {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 18px; /* Requested font size */
        font-weight: bold;
        overflow: hidden;
    }

/* Full page wrapper to center everything */
.centered-workspace {
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: flex-start; /* Keeps them at the top of the middle area */
    min-height: 100vh; /* Full height of screen */
    width: 100%;
    padding-top: 0px; /* Gap from the very top */
    background-color: #f4f4f4; /* Optional: light background to see the ladders better */
}

/* Container that holds all ladders in a neat row */
.ladder-group {
    display: flex;
    flex-direction: row;
    gap: 20px; /* Space between the different ladders */
    align-items: flex-start;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    justify-content: center;
}

/* New Cancel Columns */
.cancel-col {
    width: 35px;
    background: #f8f9fa;
    color: #dc3545;
    cursor: pointer;
    font-size: 14px !important;
}

    .cancel-col:hover {
        background: #fee;
    }

/* Colors & Styling */
.vol-col {
    width: 50px;
    background: #eee;
    font-size: 12px !important;
    color: #666;
}

.green-col {
    width: 60px;
    color: #28a745;
}

/* Updated Ladder Font Colors */
.back-col {
    background-color: #2e86de !important;
    color: #fff;
}




/* Darker Blue */
/* Container for the Price and the Volume Bar */
.price-col {
    position: relative; /* Needed to layer the bar behind the text */
    background-color: #222 !important;
    color: #fff;
    width: 80px;
    z-index: 1;
}

.lay-col {
    background-color: #ef9a9a !important;
    color: #111;
}

/* Change cursor to a 'cell' pointer when hovering over betting zones */
.back-col, .lay-col {
    cursor: cell !important;
    transition: filter 0.1s;
}

    /* Brighten the cell slightly when clicking to give physical feedback */
    .back-col:active, .lay-col:active {
        filter: brightness(1.3);
        transform: scale(0.98);
    }
/* Deeper Pink */

/* The Volume Visual Bar */
.vol-bar {
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    background-color: rgba(255, 255, 255, 0.15); /* Subtle white overlay */
    z-index: -1; /* Place behind the price text */
    transition: width 0.3s ease;
    border-radius: 0 2px 2px 0;
}

/* LTP Highlight */
.ltp-row .price-col {
    background-color: #ffc107 !important;
    color: #000 !important;
}

/* Header */
.header-row {
    background: #333 !important;
}

    .header-row > div {
        color: #fff;
        font-size: 12px !important;
        height: 25px;
    }


/* Ensure the price text stays readable over the bar */
.price-text {
    position: relative;
    z-index: 2;
    text-shadow: 1px 1px 2px #000;
}

/* ===================== ladder ended =======================================*/
/* ================== bets placed ====================*/
/* Stacked Bet Column on the Right */
.bets-panel {
    width: 350px;
    background: #fff;
    border: 2px solid #333;
    border-radius: 4px;
    max-height: 500px;
    overflow-y: auto;
}

.section-label {
    font-size: 11px;
    text-align: center;
    letter-spacing: 1px;
}

.bets-list {
    min-height: 60px;
    background: #f8f9fa;
}

.bet-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 1px solid #ddd;
    font-size: 16px; /* High visibility for bet sizes */
    font-weight: bold;
}

    .bet-item .price {
        color: #666;
        font-size: 14px;
    }

    .bet-item.lay-item {
        color: #d32f2f;
        border-left: 5px solid #ef9a9a;
    }

    .bet-item.back-item {
        color: #1976d2;
        border-left: 5px solid #2e86de;
    }

/* ===================hover for ladder =================================*/

/* --- Place Bet Hover Effects --- */

/* Hover state for the BACK column (Blue) */
.back-col:hover {
    background-color: #3b9dfa !important; /* Slightly lighter than your dark blue */
    cursor: cell;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3); /* Subtle inner glow */
    color: #ffffff;
}

/* Hover state for the LAY column (Pink) */
.lay-col:hover {
    background-color: #ffb1b1 !important; /* Slightly lighter than your deep pink */
    cursor: cell;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
    color: #000000;
}

/* --- Click Feedback (Active State) --- */

/* This gives the "button press" feel when you actually click */
.back-col:active, .lay-col:active {
    filter: brightness(0.8); /* Darken slightly on click */
    transform: scale(0.97); /* Shrink slightly to look like a physical button */
    transition: transform 0.05s;
}

/* Optional: Add a highlight to the price in the same row while hovering */
.ladder-row:hover .price-col {
    border-top: 1px solid #ffc107;
    border-bottom: 1px solid #ffc107;
}

/* Disable text selection so fast clicking doesn't highlight the numbers */
.back-col, .lay-col, .price-col {
    user-select: none;
    -webkit-user-select: none;
}
/* ======================hover ended==================================*/
/* session ladder started -- runs/p/l   */
.session-ladder-container {
    width: 480px; /* Same as main ladder width */
    background: #fff;
    border: 2px solid #333;
}

.session-grid {
    flex: 1;
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.session-row {
    display: table-row;
    height: 35px;
    border-bottom: 1px solid #eee;
}

    .session-row > div {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        font-size: 18px; /* Matches your main ladder */
        font-weight: bold;
    }

.runs-col {
    background: #f8f9fa;
    color: #333;
    width: 40%;
    border-right: 1px solid #ddd;
}

.pl-col {
    width: 60%;
}

/* Dynamic P/L Colors */
.pl-profit {
    color: #28a745;
}

.pl-loss {
    color: #dc3545;
}

.session-header {
    background: #444;
    color: #fff;
    font-size: 12px;
    height: 25px;
}


/* ==================== session ladder ended ====================== */
/* ========  12 column center ladder */
/* Container for the 12 columns */
.ladder-scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
    background: #fff;
    border-radius: 4px;
}

.betting-grid {
    display: flex;
    gap: 5px; /* Spacing between columns */
    padding: 5px;
}

/* Individual Column Styling */
.bet-column {
    flex: 0 0 95px; /* Fixed width for each of the 12 columns */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Matching Action Buttons */
.btn-back {
    background-color: #2e86de !important;
    border-color: #2e86de !important;
    color: white !important;
    font-weight: bold;
    transition: filter 0.1s;
}

.btn-lay {
    background-color: #ef9a9a !important;
    border-color: #ef9a9a !important;
    color: #111 !important;
    font-weight: bold;
    transition: filter 0.1s;
}

/* Hover effects matching the ladder */
.btn-back:hover {
    filter: brightness(1.2);
}

.btn-lay:hover {
    filter: brightness(0.9);
}

/* Inputs inside the ladder */
.ladder-input {
    font-size: 22px;
    padding: 2px;
    border: 1px solid #ccc;
    font-weight: bold;
    background-color: #fdfdfd;
    color: black;
}

/* Action Row Specifics */
.main-ladder-area .btn-secondary {
    background-color: #444;
    border: none;
    font-size: 18px;
    font-weight: bold;
}
/* Animation for clicking the horizontal buttons */
.bet-column .btn:active {
    transform: translateY(2px);
    filter: brightness(0.8);
    transition: transform 0.05s;
}

/* Optional: Highlight the column on hover */
.bet-column:hover {
    background-color: rgba(0,0,0,0.03);
    border-radius: 4px;
}

/*====================right panel==============*/
/* Container Spacing */
.summary-row {
    display: flex;
    align-items: stretch;
    gap: 0; /* Flush look like a professional widget */
    border-radius: 4px;
    overflow: hidden;
}

/* No / Back Label (Blue Theme) */
.label-back {
    background-color: #2e86de;
    color: white;
    font-weight: bold;
    min-width: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Yes / Lay Label (Pink Theme) */
.label-lay {
    background-color: #ef9a9a;
    color: #111;
    font-weight: bold;
    min-width: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Input Fields Styling */
.input-back {
    border: 1px solid #2e86de !important;
    background-color: #f0f7ff !important;
    font-weight: bold;
}

.input-lay {
    border: 1px solid #ef9a9a !important;
    background-color: #fff5f5 !important;
    font-weight: bold;
}

/* Offset Input (The placeholder "Runs" box) */
input[id*="OffsetSingle"] {
    background-color: #333 !important; /* Dark like the ladder price column */
    color: #fff !important;
    font-weight: bold;
    margin-top: 5px;
}

    input[id*="OffsetSingle"]::placeholder {
        color: #bbb;
    }

/* Readonly state override */
.summary-row input[readonly] {
    cursor: default;
    box-shadow: none;
}
/* The Flash Animation */
@keyframes flash-update {
    0% {
        background-color: #ffeb3b;
    }
    /* Bright Yellow */
    100% {
        background-color: transparent;
    }
}

/* Class to trigger the flash */
.flash-highlight {
    animation: flash-update 0.6s ease-out;
}

/* Ensure the summary-row can show the background flash */
.summary-row {
    transition: background-color 0.3s;
}