/* ---------------------------------------------- */
/* TOGGLE HEADER                                  */
/* ---------------------------------------------- */
.toggle-header {
    padding: 6px 10px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    cursor: pointer;
    margin-top: 10px;
    display: flex;
    align-items: center;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
}

.toggle-icon {
    font-size: 18px;
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.3s ease;
}

    .toggle-icon.rotate {
        transform: rotate(180deg);
    }

/* ---------------------------------------------- */
/* TOGGLE BODY                                    */
/* ---------------------------------------------- */
.toggle-body {
    display: none;
    padding: 12px 10px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: #fcfcfc;
    margin-bottom: 10px;
    overflow: hidden;
}

    .toggle-body.animate-in {
        animation: slideDown 0.3s ease-out forwards;
    }

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------- */
/* YES / NO BADGES                                */
/* ---------------------------------------------- */
.yes-badge {
    display: inline-block;
    background: #e9f7ee;
    color: #177a2f;
    border: 1px solid rgba(39,174,96,0.2);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

.no-badge {
    display: inline-block;
    background: #fff5f6;
    color: #a51d2a;
    border: 1px solid rgba(220,53,69,0.08);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}
/* ---------------------------------------------- */
/* CLEAN APPROVAL ICON (Circle + Check)           */
/* ---------------------------------------------- */

/* Hidden by default */
.approval-container {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 180ms ease-in;
}

/* SVG sizing */
.checkmark-svg {
    width: 22px;
    height: 22px;
    overflow: visible;
}

/* Circle outline */
.check-circle {
    stroke: #28a745;
    stroke-width: 2.4;
    fill: none;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
}

/* Tick */
.check-path {
    stroke: #28a745;
    stroke-width: 2.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
}

/* Animate when parent has approval-animate */
.approval-animate .approval-container {
    opacity: 1;
}

.approval-animate .check-circle {
    animation: drawCircle 600ms ease-out forwards;
}

.approval-animate .check-path {
    animation: drawCheck 500ms ease-out 250ms forwards;
}

@keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCheck {
    to {
        stroke-dashoffset: 0;
    }
}

/* ---------------------------------------------- */
/* FLEX BEHAVIOR FOR TIGHT INLINE LAYOUT          */
/* ---------------------------------------------- */

.approval-animate {
    gap: .5rem; /* small spacing between value + icon */
}

    .approval-animate .form-control-plaintext {
        display: inline-block;
        flex: 0 0 auto;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .approval-animate .approval-container {
        flex: 0 0 auto;
        margin-left: .5rem;
    }
/* Applies to all text-value containers */
.value-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* For INR icon wrapper */
.inr-container {
    display: inline-flex;
    align-items: center;
}

/* Wrapper for amount + icon */
.amount-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Bold numbers */
.amount-value {
    font-weight: 500;
}

/* Neutral INR icon */
.inr-icon {
    font-size: 15px;
    color: #6c757d;
    line-height: 1;
}
.status-locked {
    color: #28a745; /* Green */
}

/* Make Additional Details rows behave like normal rows */
.toggle-body {
    padding: 0; /* remove inner spacing */
    border: none; /* remove box */
    background: transparent; /* remove card feel */
    margin-bottom: 0;
}
    /* Force Additional Details rows to behave like Project Details rows */
    .toggle-body .form-group {
        border-bottom: 1px solid #eee; /* row separator */
        margin-bottom: 0;
    }

        /* Last row should not have border */
        .toggle-body .form-group:last-child {
            border-bottom: none;
        }

    /* Restore label background */
    .toggle-body .control-label {
        background: #f7f7f7;
    }

    /* ============================= */
    /* MATCH PROJECT DETAILS EXACTLY */
    /* ============================= */

    /* 1. Make label column fill full row height */
    .toggle-body .form-group > .col-md-2 {
        background: #f7f7f7;
        display: flex;
        align-items: center;
    }

    /* 2. Remove background from label itself */
    .toggle-body .control-label {
        background: transparent;
        margin-bottom: 0;
    }

    /* 3. Match row separators */
    .toggle-body .form-group {
        border-bottom: 1px solid #e9e9e9;
        margin-bottom: 0;
    }

        /* 4. Last row no border */
        .toggle-body .form-group:last-child {
            border-bottom: none;
        }

/* 5. Remove inner container spacing */
.toggle-body {
    padding: 0;
    background: transparent;
    border: none;
}