.status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

    .status-badge.pending {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeeba;
    }

    .status-badge.completed {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

.modern-input {
    border-radius: 8px;
    font-size: 13px;
}

.update-followup-btn {
    transition: all .2s ease;
}

    .update-followup-btn:hover:enabled {
        transform: scale(1.02);
    }

    .update-followup-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }


    .ag-theme-alpine {
        --ag-header-background-color: #f6f7f9;
        --ag-header-foreground-color: #495057;
        --ag-row-hover-color: #e8f4ff;
        --ag-font-size: 14px;
    }

    .status-new {
        color: #007bff;
        font-weight: 600;
    }

    .status-open {
        color: #17a2b8;
        font-weight: 600;
    }

    .status-proposal-sent {
        color: #6f42c1;
        font-weight: 600;
    }

    .status-qualified {
        color: #28a745;
        font-weight: 600;
    }

    .status-disqualified {
        color: #dc3545;
        font-weight: 600;
    }

    .status-revise {
        color: #fd7e14;
        font-weight: 600;
    }

    .status-default {
        color: #6c757d;
    }



.tp-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
}

.tp-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
}

.tp-btn-primary {
    background: #6366f1;
    color: #fff;
    border-radius: 10px;
    padding: 8px 16px;
    border: none;
    transition: 0.2s;
}

    .tp-btn-primary:hover {
        background: #4f46e5;
    }

.tp-summary-box {
    background: linear-gradient(to bottom right, #eef2ff, #f5f3ff);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #e0e7ff;
}

.tp-summary-label {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

/* Make scheduled payment box more compact */
.tp-scheduled-box {
    padding: 10px 14px !important; /* reduce padding */
    gap: 6px !important; /* reduce spacing between elements */
}

    .tp-scheduled-box .tp-summary-label {
        margin-bottom: 2px;
    }

    .tp-scheduled-box input[type="date"] {
        max-width: 140px;
        padding: 4px 6px;
        font-size: 0.85rem;
        height: 30px; /* smaller date input */
    }
#saveScheduleBtn {
    border-radius: 6px;
}

.btn-save-link {
    background: none !important;
    border: none !important;
    color: #ff9800 !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    cursor: pointer;
    font-weight: 600;
}

    .btn-save-link:hover {
        color: #fb8c00 !important;
        text-decoration: underline;
    }

.tp-summary-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #111827;
}

.tp-table-modern > thead > tr {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

.tp-table-modern th {
    padding: 14px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.tp-table-modern td {
    padding: 14px;
    font-size: 0.95rem;
    color: #111827;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.tp-download-btn {
    background: #eef2ff;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #c7d2fe;
    transition: 0.2s;
}

    .tp-download-btn:hover {
        background: #e0e7ff;
    }

/* === Proposal Edit Highlight === */
.proposal-editing {
    background-color: #fff7e6 !important; /* light yellow highlight */
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Slight pulsing effect to draw attention */
@keyframes editingPulse {
    0% {
        box-shadow: 0 0 5px rgba(255, 193, 7, 0.3);
    }

    50% {
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.6);
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 193, 7, 0.3);
    }
}

.proposal-editing {
    animation: editingPulse 2s ease-in-out infinite;
}






/* 🔥 Force apply arrow progress bar styles, override all others */

/* === ORANGE-TONED ARROW PROGRESS BAR === */
#enquiryProgress.progress-steps {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    font-family: 'Poppins', sans-serif !important;
    overflow-x: auto !important;
}

    /* Base step style */
    #enquiryProgress.progress-steps .step {
        position: relative !important;
        flex: 1 1 auto !important;
        color: #fff !important;
        font-weight: 600 !important;
        background: #adb5bd !important; /* default gray */
        padding: 14px 50px 14px 35px !important;
        text-align: center !important;
        clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%) !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        z-index: 1 !important;
    }

        /* Tight connection between arrows */
        #enquiryProgress.progress-steps .step:not(:first-child) {
            margin-left: -22px !important;
        }

        /* Completed steps – subtle warm orange gradient */
        #enquiryProgress.progress-steps .step.done {
            background: linear-gradient(135deg, #f6d365 0%, #fda085 100%) !important;
            color: #fff !important;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        }

        /* Current step – bold orange glow */
        #enquiryProgress.progress-steps .step.active {
            background: linear-gradient(135deg, #ff8c00 0%, #ff5722 100%) !important;
            color: #fff !important;
            box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4) !important;
            z-index: 3 !important;
        }

        /* Future stages */
        #enquiryProgress.progress-steps .step.future {
            background: #adb5bd !important;
            color: #f8f9fa !important;
        }

        /* Arrow connectors visible for all */
        #enquiryProgress.progress-steps .step:not(:first-child)::before {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 25px !important;
            height: 100% !important;
            background: inherit !important;
            clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
            z-index: 2 !important;
        }

        /* Round first and last */
        #enquiryProgress.progress-steps .step:first-child {
            border-top-left-radius: 8px !important;
            border-bottom-left-radius: 8px !important;
        }

        #enquiryProgress.progress-steps .step:last-child {
            border-top-right-radius: 8px !important;
            border-bottom-right-radius: 8px !important;
        }

        /* Hover effect only for future stages */
        #enquiryProgress.progress-steps .step.future:hover {
            background: linear-gradient(135deg, #cfd4d8 0%, #adb5bd 100%) !important;
            transform: scale(1.02) !important;
        }

/* Responsive */
@media (max-width: 768px) {
    #enquiryProgress.progress-steps .step {
        font-size: 0.8rem !important;
        padding: 10px 30px 10px 20px !important;
    }
}



/* File input styled like other Bootstrap .form-control-sm fields */
input[type="file"].form-control-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    height: calc(1.5em + 0.5rem + 2px);
    color: #495057;
    background-color: #fff;
    cursor: pointer;
}

    /* Style file button (for Chrome, Edge, Safari) */
    input[type="file"].form-control-sm::file-selector-button {
        padding: 0.25rem 0.75rem;
        background-color: #0d6efd;
        color: #fff;
        border: none;
        border-radius: 0.25rem 0 0 0.25rem;
        font-size: 0.875rem;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
    }

        input[type="file"].form-control-sm::file-selector-button:hover {
            background-color: #0b5ed7;
        }

    /* Focus effect to match Bootstrap */
    input[type="file"].form-control-sm:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
    }




#btn-followup {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 50px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.2s, background-color 0.3s;
}

    #btn-followup:hover {
        background-color: #218838;
        transform: scale(1.05);
    }

/* Target bootstrap form controls when they have validation error class */
input.form-control.input-validation-error,
textarea.form-control.input-validation-error,
select.form-select.input-validation-error,
select.form-control.input-validation-error {
    border-color: #dc3545; /* danger red */
    box-shadow: none; /* reset bootstrap focus shadow */
}

    /* Optional: show red glow on focus, but keep higher specificity */
    input.form-control.input-validation-error:focus,
    textarea.form-control.input-validation-error:focus,
    select.form-select.input-validation-error:focus,
    select.form-control.input-validation-error:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.20);
    }

/* If some component still overrides border, use this as last-resort */
.input-validation-error.form-control {
    border-width: 1px;
    border-style: solid;
}

/* Hide the server side spans visually but keep them for tooltip text */
.field-validation-error {
    display: none; /* fine if you show messages via tooltips */
}

/* If modal-specific styling required (increase specificity inside modal) */
#addRowModal .form-control.input-validation-error,
#addRowModal .form-select.input-validation-error {
    border-color: #dc3545;
}




/* =========================
   GLOBAL THEME / LAYOUT
   ========================= */

/* Status card modern styling */
.status-card {
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
    overflow: hidden;
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
}

/* badge style (keeps your bootstrap color classes but gives a modern pill look) */
.status-badge {
    border-radius: 999px;
    padding: .4rem .9rem;
    font-weight: 600;
    font-size: .9rem;
    box-shadow: 0 4px 12px rgba(16,24,40,0.06);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

    /* make primary status badge gradient for nicer look (override if you use different theme colors) */
    .status-badge.bg-primary {
        background: linear-gradient(90deg, #6f8efb 0%, #5e67f6 100%);
        color: #fff !important;
        border: none;
    }

    /* adjust other colors slightly */
    .status-badge.bg-success {
        background-color: #dff4e6;
        color: #0b6b24 !important;
    }

    .status-badge.bg-warning.text-dark {
        background-color: #fff4db;
        color: #6b4d00 !important;
    }

    .status-badge.bg-danger {
        background-color: #fdecea;
        color: #8a1b1b !important;
    }

    .status-badge.bg-secondary {
        background-color: #eef2ff;
        color: #2b2f4a !important;
    }

/* definition list styling */
.status-card dt {
    color: #6b7280;
    font-size: .82rem;
    margin-bottom: 0.12rem;
}

.status-card dd {
    margin-bottom: 0.5rem;
    font-size: .95rem;
}

/* compact typography tweaks */
.status-card .fw-semibold {
    font-weight: 600;
}

.status-card .fw-bold {
    font-weight: 700;
}

/* buttons */
.status-card .btn-lg {
    padding: .6rem .9rem;
    font-size: .95rem;
    border-radius: 10px;
}

/* small screen tweak: make layout more compact */
@media (max-width: 768px) {
    .status-card {
        min-height: 220px;
    }

        .status-card .card-body {
            padding: 1rem;
        }

    .status-badge {
        font-size: .85rem;
        padding: .32rem .7rem;
    }
}





label.required::after {
    content: " *";
    color: red;
}
select.form-select {
    padding: 6px;
    font-size: 14px;
}

.form-button-action button,
.form-button-action a {
    margin-right: 5px;
}

/* simple modal visuals */
#decisionModal .modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    z-index: 1000;
}

#decisionModal .modal-content {
    background: white;
    padding: 18px;
    border-radius: 8px;
    width: 420px;
    max-width: 94%;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

#decisionModal .modal-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* simple modal visuals */
#confirmDisqualModal .modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    z-index: 1000;
}

#confirmDisqualModal .modal-content {
    background: white;
    padding: 18px;
    border-radius: 8px;
    width: 420px;
    max-width: 94%;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

#confirmDisqualModal .modal-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.stage {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    margin: 8px;
    display: inline-block;
    background: #f5f7f8;
    text-align: center;
    line-height: 56px;
    font-weight: bold;
}

    .stage.active {
        background: #ffd98a;
    }

    .stage.completed {
        background: #a0e6d8;
    }

/* basic modal style for demonstration */
#confirmDisqualModal.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
}

#confirmDisqualModal.modal-content {
    background: white;
}

:root {
    --page-bg: #fbfdff;
    --surface: #fff;
    --soft-surface: #fbfbff;
    --muted: #6b7280;
    --text: #062034;
    --accent: #06b6d4;
    --accent-2: #0ea5a4;
    --success: #10b981;
    --danger: #ef4444;
    --border: rgba(6,32,52,0.06);
    --card-shadow: 0 12px 30px rgba(6,32,52,0.06);
    --chip-tint: .09;
    --radius: 12px;
}

html, body {
    height: 100%
}

body {
    margin: 0;
    font-family: 'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,Arial;
    background: linear-gradient(180deg,var(--page-bg),#f1fbfc);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.crm-container {
    max-width: 1220px;
    margin: 26px auto;
    padding: 18px
}

.crm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px
}

.crm-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--text)
}

.crm-sub {
    margin-top: 6px;
    color: var(--muted);
    font-weight: 600;
    font-size: 13px
}

.crm-actions {
    display: flex;
    gap: 10px;
    align-items: center
}

.btn {
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 13px;
    border: 0;
    cursor: pointer;
    transition: transform .12s ease,box-shadow .12s ease
}

    .btn:hover {
        transform: translateY(-2px)
    }

    .btn.primary {
        background: linear-gradient(90deg,var(--accent),var(--accent-2));
        color: #fff;
        box-shadow: 0 12px 30px rgba(6,32,52,.08)
    }

.btn-outline {
    background: linear-gradient(180deg,#fff,#fbfdff);
    color: var(--text);
    border: 1px solid var(--border)
}

.btn.ghost {
    background: transparent;
    color: var(--muted)
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--card-shadow)
}

/* ============== STAGES / TABS / DETAIL CARDS (from CommonCSS) ============== */
.future-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    border: 2px solid #999;
    opacity: .7
}
/* :contentReference[oaicite:5]{index=5} */

.stage-blocks {
    margin-bottom: 18px
}

.stages-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.stages-grid.compact.icon-only {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center
}

.stage-block.compact {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    padding: 8px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: linear-gradient(180deg,var(--soft-surface),var(--surface));
    transition: transform .16s cubic-bezier(.2,.9,.2,1),box-shadow .16s ease;
    position: relative;
    overflow: hidden
}

    .stage-block.compact:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(6,32,52,.06)
    }

    .stage-block.compact::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0;
        transition: opacity .18s ease
    }

    .stage-block.compact > .compact-top {
        position: relative;
        z-index: 2
    }

.compact-marker {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 8px 22px rgba(6,32,52,.06)
}

.stage-current.compact {
    border-color: rgba(6,182,212,.12)
}

    .stage-current.compact::before {
        opacity: 1;
        background: linear-gradient(180deg,rgba(6,182,212,var(--chip-tint)),rgba(6,182,212,var(--chip-tint)))
    }

    .stage-current.compact .compact-marker {
        transform: scale(1.05);
        box-shadow: 0 12px 30px rgba(6,182,212,.12)
    }

.stage-complete.compact {
    border-color: rgba(34,197,94,.10)
}

    .stage-complete.compact::before {
        opacity: 1;
        background: linear-gradient(180deg,rgba(34,197,94,var(--chip-tint)),rgba(34,197,94,var(--chip-tint)))
    }

.stage-upcoming.compact .compact-marker {
    background: transparent;
    border: 1px dashed rgba(100,120,150,.06);
    color: var(--muted);
    box-shadow: none
}

.stage-key-new .compact-marker {
    background: linear-gradient(135deg,#8dd3ff,#7ad1e6);
    color: #042023
}

.stage-key-open .compact-marker {
    background: linear-gradient(135deg,#7be3c7,#06b6d4);
    color: #042023
}

.stage-key-proposal-sent .compact-marker {
    background: linear-gradient(135deg,#ffd27a,#ffb86b);
    color: #2b1b00
}

.stage-key-revise .compact-marker {
    background: linear-gradient(135deg,#e0f7ff,#bdf0ff);
    color: #042023
}

.stage-key-qualified .compact-marker {
    background: linear-gradient(135deg,#a7f3d0,#6ee7b7);
    color: #042023
}

.stage-key-disqualified .compact-marker {
    background: linear-gradient(135deg,#ffb3b3,#ff9a9a);
    color: #4a0202
}

.stage-block.pop {
    animation: popAnim 420ms cubic-bezier(.2,.9,.2,1)
}

@keyframes popAnim {
    0% {
        transform: scale(.95);
        opacity: 0
    }

    40% {
        transform: scale(1.05) translateY(-6px);
        opacity: 1
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.crm-nav {
    display: flex;
    gap: 20px;
    margin: 6px 0 18px
}

.nav-tab {
    background: none;
    border: none;
    padding: 8px 6px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    position: relative;
    font-size: 15px
}

    .nav-tab.active {
        color: var(--accent)
    }

        .nav-tab.active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -14px;
            height: 3px;
            background: linear-gradient(90deg,var(--accent),var(--accent-2));
            border-radius: 6px
        }

.opportunity-details-card h3 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
    color: var(--text)
}

.details-grid-3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    margin-top: 12px
}

.detail-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 10px;
    background: linear-gradient(180deg,#fff,#fbfdff);
    border: 1px solid rgba(230,240,255,.6)
}

    .detail-item .icon {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(6,32,52,.03);
        color: #374151
    }

.detail-text .label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 6px
}

.detail-text .value {
    font-size: 15px;
    font-weight: 800;
    color: var(--text)
}

@media(max-width:1100px) {
    .details-grid-3 {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:640px) {
    .details-grid-3 {
        grid-template-columns: 1fr
    }

    .stage-block.compact {
        width: 66px;
        height: 66px
    }

    .compact-marker {
        width: 30px;
        height: 30px
    }
}

/* =========================
   ENQUIRY PAGE ELEMENTS
   ========================= */


.tp-card {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 1rem;
    box-shadow: 0 6px 24px rgba(0,0,0,.06)
}
/* :contentReference[oaicite:6]{index=6} */
.tp-section-title {
    font-weight: 700;
    letter-spacing: .2px
}
/* :contentReference[oaicite:7]{index=7} */
.tp-item {
    display: flex;
    gap: .75rem;
    padding: .5rem 0;
    align-items: flex-start
}
    /* :contentReference[oaicite:8]{index=8} */
    .tp-item i {
        font-size: 1.05rem;
        opacity: .8;
        margin-top: .15rem
    }
/* :contentReference[oaicite:9]{index=9} */
.tp-label {
    font-size: .775rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d
}
/* :contentReference[oaicite:10]{index=10} */
.tp-value {
    font-weight: 600
}
/* :contentReference[oaicite:11]{index=11} */

/* Data table & list helpers (kept one copy) */

/*.table-container {
    padding-top: 10px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05)
}*/


/* :contentReference[oaicite:13]{index=13} */
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after {
    display: none !important
}
/* :contentReference[oaicite:16]{index=16} */

/* =========================
   ACCORDION / TABLE SIZING
   ========================= */
.accordion-button {
    padding: .5rem 1rem;
    font-size: 14px
}

.accordion-item {
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid #e0e0e0
}

.accordion-header {
    background: #f8f9fa
}

.accordion-body {
    padding: 1rem
}

#acccTable.table-sm th, #acccTable.table-sm td {
    padding: .25rem .4rem !important;
    font-size: 12px !important;
    vertical-align: middle
}

#acccTable.table-sm thead th {
    font-weight: 600;
    text-transform: uppercase
}

#acccTable.table-sm tbody tr td:last-child {
    width: 30px;
    padding: .25rem .25rem !important
}

#acccTable.table-sm input.form-control {
    font-size: 12px !important;
    padding: .25rem .4rem !important;
    height: calc(1.5em + .5rem + 2px) !important
}

/* =========================
   MODAL (Bootstrap-safe)
   ========================= */
/* Keep overflow visible for plugin dropdowns once (deduped) */
.modal-dialog, .modal-content, .modal-body {
    overflow: visible !important
}
/* :contentReference[oaicite:17]{index=17} */

/* Make sure dropdowns inside modals float above backdrop */
select, .dropdown-menu {
    z-index: 1060 !important
}
/*  */

/* Modern modal styling – SCOPED so it won't fight Bootstrap core */
#modalContainer .tp-modal .modal-dialog {
    max-width: 1080px;
    margin: 2rem auto
}
/* :contentReference[oaicite:19]{index=19} */
#modalContainer .tp-modal .modal-content {
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
    overflow: hidden;
    background: #fff;
}
/* :contentReference[oaicite:20]{index=20} */
#modalContainer .tp-modal .modal-header {
    padding: 14px 18px;
    border: 0 !important;
    color: #fff;
    background: linear-gradient(135deg,#1b4fd9 0%,#2aa2ff 100%);
}
/* :contentReference[oaicite:21]{index=21} */
#modalContainer .tp-modal .modal-title {
    font-weight: 700;
    letter-spacing: .2px
}
/* :contentReference[oaicite:22]{index=22} */
#modalContainer .tp-modal .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: .85
}

    #modalContainer .tp-modal .btn-close:hover {
        opacity: 1
    }

#modalContainer .tp-modal .modal-body {
    padding: 18px 22px 22px
}
/* :contentReference[oaicite:23]{index=23} */

/* Inputs inside modal */
#modalContainer .tp-modal .form-control,
#modalContainer .tp-modal .form-select {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding-top: .55rem;
    padding-bottom: .55rem
}
    /* :contentReference[oaicite:24]{index=24} */
    #modalContainer .tp-modal .form-control:focus,
    #modalContainer .tp-modal .form-select:focus {
        border-color: #93c5fd;
        box-shadow: 0 0 0 .2rem rgba(59,130,246,.15)
    }
/* :contentReference[oaicite:25]{index=25} */

/* Icon/label grid alignment used in modal forms */
#modalContainer .tp-modal .tp-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: .75rem;
    align-items: start
}
    /* :contentReference[oaicite:26]{index=26} */
    #modalContainer .tp-modal .tp-item > i {
        font-size: 1.05rem;
        line-height: 1;
        margin-top: .15rem;
        opacity: .85
    }
/* :contentReference[oaicite:27]{index=27} */
#modalContainer .tp-modal .tp-label {
    font-size: .875rem;
    color: #6b7280;
    margin-bottom: .1rem
}
/* :contentReference[oaicite:28]{index=28} */
#modalContainer .tp-modal .tp-value {
    font-weight: 600
}
/* :contentReference[oaicite:29]{index=29} */

/* Backdrop intensity */
.modal-backdrop.show {
    opacity: .5
}
/* :contentReference[oaicite:30]{index=30} */

/* Misc. typography inside modal (kept one copy) */
.modal-body {
    font-size: 15px
}

    .modal-body strong {
        color: #333;
        font-weight: 600
    }

    .modal-body .row {
        border-bottom: 1px solid #e9ecef;
        padding-bottom: 12px
    }

        .modal-body .row:last-child {
            border-bottom: none
        }

/* Smaller generic buttons if needed in forms */
button {
    font-size: 12px;
    padding: 4px 10px
}
/* :contentReference[oaicite:31]{index=31} */
.save-changes-button {
    font-size: 12px;
    padding: 6px 12px
}
/* :contentReference[oaicite:32]{index=32} */

/* =========================
   PAYMENT MODAL UTILITIES (kept)
   ========================= */
.tp-row {
    margin-bottom: 10px
}

.tp-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    background: #fbfdff;
    border-radius: 6px
}

.tp-muted {
    color: #6b7280;
    font-size: 13px
}

.tp-btn-primary {
    background: #06b6d4;
    color: #fff;
    border: 0;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer
}

.tp-btn-outline {
    background: #fff;
    border: 1px solid #d1e7ea;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer
}

.tp-table th, .tp-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #eef2f6;
    text-align: left;
    font-size: 14px
}

.tp-table thead th {
    background: #fbfeff;
    font-weight: 600
}

.tp-empty td {
    text-align: center;
    color: #7f8c8d;
    padding: 18px
}



/*   body {
                font-family: 'Segoe UI', sans-serif;
                background-color: #f7f7f7;
                padding: 20px;
            } */



.table-container {
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 16px;
    text-align: left;
}

thead {
    background-color: #f4f4f4;
}

tr:not(:last-child) {
    border-bottom: 1px solid #eee;
}



.actions button {
    background: none;
    border: none;
    margin: 0 5px;
    cursor: pointer;
}

    .actions button:hover {
        opacity: 0.7;
    }

.description a {
    color: #007bff;
    text-decoration: none;
}

    .description a:hover {
        text-decoration: underline;
    }

.checkbox-cell {
    text-align: center;
}

.header-filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

select, .add-btn, .export-btn {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.add-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
}

#itemsTable tbody tr:hover {
    background-color: #f1f9ff; /* Light blue shade */
    cursor: pointer; /* Optional: change cursor to pointer */
}

#itemsTable thead th {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    vertical-align: middle !important;
}

/* Optional: also reduce row height */
#itemsTable tbody td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    vertical-align: middle;
}
/* Hide the default sorting arrows */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    display: none !important;
}
/* Prevent text wrapping in headers and cells */
#itemsTable th,
#itemsTable td {
    white-space: nowrap;
    font-size: 12px; /* Adjust this value to make font smaller or bigger */
    font-family: "Segoe UI";
}

/* Optional: Add horizontal scroll if table overflows */
#itemsTable_wrapper {
    overflow-x: auto;
}

#itemsTable .status-new {
    color: #007bff; /* Blue */
    font-weight: 700 !important;
}

#itemsTable .status-open {
    color: #17a2b8; /* Teal */
    font-weight: 700 !important;
}

#itemsTable .status-proposal-sent {
    color: #ff9800; /* Orange */
    font-weight: 700 !important;
}

#itemsTable .status-qualified {
    color: #28a745; /* Green */
    font-weight: 700 !important;
}

#itemsTable .status-disqualified {
    color: #dc3545; /* Red */
    font-weight: 700 !important;
}

#itemsTable .status-revise {
    color: #9c27b0; /* Purple */
    font-weight: 700 !important;
}

#itemsTable .status-default {
    color: #6c757d; /* Gray */
    font-weight: 700 !important;
}


.custom-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
}

    .custom-table thead {
        background-color: #f9f9f9;
    }

    .custom-table th,
    .custom-table td {
        padding: 10px 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    .custom-table tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .custom-table tbody tr:hover {
        background-color: #f1f1f1;
    }

    .custom-table a {
        color: #007bff;
        text-decoration: none;
    }

    .custom-table .status-new {
        color: orangered;
        font-weight: bold;
    }

    .custom-table .status-qualified {
        color: seagreen;
        font-weight: bold;
    }

    .custom-table .status-disqualified {
        color: slategrey;
        font-weight: bold;
    }

    .custom-table .status-open {
        color: dodgerblue;
        font-weight: 500;
    }

    .custom-table .status-proposal-sent {
        color: forestgreen;
        font-weight: 500;
    }

    .custom-table input[type="text"] {
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
        font-size: 13px;
    }


/*Payment Modal*/

/* ---------- Payment modal: compact layout (scoped) ---------- */
.paymentModal .modal-dialog {
    max-width: 720px; /* small mode */
}

.paymentModal .modal-body {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.35;
}

    /* Remove global row borders/padding that were adding extra space */
    .paymentModal .modal-body .row {
        border: 0 !important;
        padding-bottom: 0 !important;
    }

/* Cards and titles inside the modal */
.paymentModal .tp-card {
    border-radius: 10px;
}

    .paymentModal .tp-card .card-body {
        padding: 10px 12px;
    }

.paymentModal .tp-section-title {
    font-size: 14px;
    margin-bottom: 8px;
}

/* Icon-label stacks */
.paymentModal .tp-item {
    gap: 8px;
    padding: 2px 0;
}

.paymentModal .tp-label {
    font-size: 11.5px;
    letter-spacing: .03em;
    color: #6b7280;
}

.paymentModal .tp-value {
    font-size: 13.5px;
    font-weight: 600;
}

/* Shrink gutters on your g-4 / g-3 rows */
.paymentModal .row.g-4 {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .5rem;
}

.paymentModal .row.g-3 {
    --bs-gutter-x: .6rem;
    --bs-gutter-y: .5rem;
}

/* Make all small controls actually small */
.paymentModal .form-control-sm,
.paymentModal .form-select-sm {
    padding: .25rem .5rem; /* ~4px 8px */
    font-size: .8125rem; /* ~13px */
    height: 32px; /* uniform height */
    line-height: 1.2;
}

/* File input height */
.paymentModal input[type="file"].form-control-sm {
    height: 32px;
    padding-top: 4px;
}



.paymentModal .pkg-row > .pkg-item {
    display: flex;
    gap: 6px;
    align-items: center;
}

.paymentModal .pkg-row .lbl {
    color: #6b7280;
    font-weight: 600;
}

.paymentModal .pkg-row .val {
    font-weight: 700;
}

/* Summary card compact */
.paymentModal .summary-card .card-body {
    padding: 8px 10px;
}

.paymentModal .summary-card .tp-label {
    font-size: 11.5px;
}

.paymentModal .summary-card .tp-value {
    font-size: 14px;
}

.paymentModal #totalAmount {
    font-size: 14px !important;
}
/* override fs-5 if present */


/* ——— Attractive package strip ——— */
.paymentModal .pkg-card {
    background: linear-gradient(180deg,#f9fbff,#f3f9ff);
    border: 1px solid rgba(6,32,52,.08);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(6,32,52,.08);
}



.paymentModal .pkg-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(6,32,52,.06);
    box-shadow: 0 6px 16px rgba(6,32,52,.07);
    font-size: 13px;
}

    .paymentModal .pkg-chip .ic {
        width: 22px;
        height: 22px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        background: rgba(6,182,212,.12);
        color: #0e7490;
        font-size: 13px;
    }

    .paymentModal .pkg-chip .lbl {
        color: #6b7280;
        font-weight: 600;
    }

    .paymentModal .pkg-chip .val {
        font-weight: 800;
        color: #031c2b;
    }

    .paymentModal .pkg-chip.primary {
        background: linear-gradient(90deg,#eafaff,#eefbff);
        border-color: rgba(6,182,212,.2);
    }

@media(min-width:768px) {
    .paymentModal .pkg-row .pkg-chip + .pkg-chip {
        position: relative;
    }

        .paymentModal .pkg-row .pkg-chip + .pkg-chip:before {
            content: "";
            position: absolute;
            left: -9px;
            top: 50%;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(6,32,52,.28);
            transform: translateY(-50%);
        }
}

/* ——— Section header & cards ——— */
.paymentModal .tp-card {
    border-radius: 14px;
}

    .paymentModal .tp-card .card-body {
        padding: 12px 14px;
    }

.paymentModal .tp-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 0 0 8px;
}

    .paymentModal .tp-section-title .icon-bubble {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        background: rgba(14,165,233,.12);
        color: #0ea5a4;
    }

/* ——— Compact inputs with addons ——— */
.paymentModal .form-control-sm,
.paymentModal .form-select-sm {
    height: 34px;
    font-size: 13px;
    padding: .3rem .5rem;
}

.paymentModal .input-group-sm .input-group-text {
    height: 34px;
    font-size: 12px;
    border-color: #e5e7eb;
}

.paymentModal .input-group > .form-control {
    border-left: 0;
}

    .paymentModal .input-group > .form-control:focus {
        box-shadow: none;
    }

.paymentModal .input-prefix .input-group-text {
    border-right: 0;
}

.paymentModal .input-suffix .input-group-text {
    border-left: 0;
}

/* ——— Summary stats ——— */
.paymentModal .summary-card {
    background: linear-gradient(180deg,#fbfdff,#f8fbff);
    border: 1px solid rgba(6,32,52,.06);
    border-radius: 14px;
}

.paymentModal .summary-stat {
    display: grid;
    gap: 4px;
    place-items: center;
    padding: 6px 4px;
}

    .paymentModal .summary-stat .label {
        font-size: 11.5px;
        color: #6b7280;
        font-weight: 700;
        letter-spacing: .03em;
    }

    .paymentModal .summary-stat .value {
        font-size: 15px;
        font-weight: 800;
    }

    .paymentModal .summary-stat.total .value {
        color: #16a34a;
    }


/* Package info single-row helper */
/*.paymentModal .pkg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    font-size: 13px;
}*/

/* --- Two-line package rows (reuses existing chip styles) --- */
.paymentModal .pkg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin-bottom: 6px;
    margin-top: 6px;
}

/* Pending chip accent (optional) */
.paymentModal .pkg-chip.pending .ic {
    background: rgba(251,146,60,.15);
    color: #ea580c;
}

.paymentModal .pkg-chip.pending .val {
    color: #ea580c;
}

/* --- Summary compact + collapsible details --- */
.paymentModal .summary-card {
    background: linear-gradient(180deg,#fbfdff,#f8fbff);
    border: 1px solid rgba(6,32,52,.06);
    border-radius: 14px;
}

.paymentModal .summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .paymentModal .summary-top .label {
        font-size: 12px;
        color: #6b7280;
        font-weight: 700;
        letter-spacing: .03em;
    }

    .paymentModal .summary-top .value {
        font-size: 18px;
        font-weight: 800;
        color: #16a34a;
    }

.paymentModal .summary-toggle {
    font-size: 12px;
    font-weight: 700;
    color: #0ea5a4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

    .paymentModal .summary-toggle .chev {
        transition: transform .18s ease;
    }

    .paymentModal .summary-toggle[aria-expanded="true"] .chev {
        transform: rotate(180deg);
    }

/* Details table style when expanded */
.paymentModal .calc-details {
    border-top: 1px dashed rgba(6,32,52,.12);
    margin-top: 10px;
    padding-top: 10px;
}

.paymentModal .calc-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    column-gap: 10px;
    font-size: 13px;
}

.paymentModal .calc-label {
    color: #6b7280;
    font-weight: 600;
}

.paymentModal .calc-value {
    font-weight: 700;
}

#packageMrp {
    text-decoration-line: line-through;
    text-decoration-color: #4a4a4a;
}

.calc-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    font-size: 0.9rem;
}

.calc-label {
    color: #555;
}

.calc-value {
    text-align: right;
    font-weight: 500;
    color: #333;
}



.card .card-header, .card-light .card-header {
    padding: 2rem 1.25rem;
    background-color: transparent;
    border-bottom: 1px solid #ebecec !important;
}

th.actions-column, td.actions-column {
    width: 60px;
    text-align: center;
    white-space: nowrap;
}

th.enquiry-column, td.enquiry-column {
    width: 80px;
    white-space: nowrap;
    text-align: center;
}


/* Style the pagination buttons */
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 10px;
        margin: 0 2px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
        color: #333;
        cursor: pointer;
        border-radius: 4px;
        font-size: 14px;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: #eaeaea;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #007bff;
            color: white !important;
            border-color: #007bff;
        }

/* Hide pagination by default, JS will toggle this */
.dataTables_wrapper .dataTables_paginate {
    display: none;
}

th.actions-column, td.actions-column {
    width: 50px !important;
    max-width: 70px;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
}

th.enquiry-column, td.enquiry-column {
    width: 50px !important;
    max-width: 70px;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
}

/* -------------------------------
   Proposal Table Styling
---------------------------------- */
#proposalAccordion .table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
    width: 100%;
    margin-bottom: 0;
}

    #proposalAccordion .table th {
        background: #f5f6fa;
        color: #333;
        font-weight: 600;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        padding: 10px 12px;
        white-space: nowrap;
        border-bottom: 1px solid #dee2e6;
    }

    #proposalAccordion .table td {
        padding: 8px 10px;
        vertical-align: middle;
        background-color: #fff;
        border-color: #eee;
    }

    /* Input Fields */
    #proposalAccordion .table input.form-control,
    #proposalAccordion .table select.form-select {
        font-size: 0.95rem;
        border-radius: 6px;
        padding: 6px 8px;
        height: 36px;
        line-height: 1.4;
        border: 1px solid #d1d5db;
        background-color: #f9fafb;
        color: #333;
        width: 100%;
        transition: all 0.15s ease-in-out;
    }

        #proposalAccordion .table input.form-control:focus,
        #proposalAccordion .table select.form-select:focus {
            border-color: #4e73df;
            background-color: #fff;
            box-shadow: 0 0 0 0.15rem rgba(78, 115, 223, 0.25);
        }

/* Table Scroll Container */
#proposalAccordion .accordion-body {
    overflow-x: auto;
}

#proposalAccordion .table th:nth-child(1),
#proposalAccordion .table td:nth-child(1) {
    width: 4%;
    text-align: center;
}

#proposalAccordion .table th:nth-child(2),
#proposalAccordion .table td:nth-child(2) {
    width: 18%;
}

#proposalAccordion .table th:nth-child(3),
#proposalAccordion .table td:nth-child(3),
#proposalAccordion .table th:nth-child(4),
#proposalAccordion .table td:nth-child(4) {
    width: 10%;
}

#proposalAccordion .table th:nth-child(5),
#proposalAccordion .table td:nth-child(5),
#proposalAccordion .table th:nth-child(6),
#proposalAccordion .table td:nth-child(6),
#proposalAccordion .table th:nth-child(7),
#proposalAccordion .table td:nth-child(7) {
    width: 12%;
}

#proposalAccordion .table th:nth-child(8),
#proposalAccordion .table td:nth-child(8) {
    width: 10%;
}

#proposalAccordion .table th:nth-child(9),
#proposalAccordion .table td:nth-child(9) {
    width: 12%;
}

#proposalAccordion .table th:last-child,
#proposalAccordion .table td:last-child {
    text-align: center;
    width: 8%;
}

/* Action Buttons */
#proposalAccordion .btn-sm {
    padding: 4px 8px;
    font-size: 0.85rem;
    border-radius: 6px;
}

#proposalAccordion .btn-success i,
#proposalAccordion .btn-warning i,
#proposalAccordion .btn-danger i {
    font-size: 1rem;
}

#proposalAccordion tr.proposal-editing {
    background-color: #fff8e1 !important;
}

/* Scrollbar Styling for Horizontal Scroll */
#proposalAccordion .accordion-body::-webkit-scrollbar {
    height: 8px;
}

#proposalAccordion .accordion-body::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

select.form-select.package-select {
    min-width: 280px;
    max-width: 100%;
}

select.form-select.groupdate-select {
    min-width: 180px;
}

table input.form-control {
    min-width: 120px;
}
select:disabled {
    background-color: #f3f3f3 !important;
    color: #888 !important;
    cursor: not-allowed;
    opacity: 0.8;
}

select[title]:hover {
    position: relative;
}

    /* Optional: custom tooltip look */
    select[title]:hover::after {
        content: attr(title);
        position: absolute;
        top: -35px;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 5px;
        white-space: nowrap;
        z-index: 1000;
    }
/* Proposal dropdown styling */
.package-select, .groupdate-select {
    min-width: 220px;
    font-size: 14px;
}

/* Readability for table inputs */
table input.form-control, select.form-select {
    padding: 6px 8px;
    font-size: 14px;
}

/* Disabled look + tooltip */
select:disabled {
    background-color: #f3f3f3 !important;
    color: #888 !important;
    cursor: not-allowed;
    opacity: 0.9;
}

select[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: -35px;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 9999;
}

/* Better readability for proposal table */
#proposalTableBody td,
#existingProposalBody td {
    vertical-align: middle;
}

.status-select {
    min-width: 140px !important;
    padding: 6px 8px !important;
    font-size: 14px !important;
}

.remark {
    min-width: 200px !important;
    padding: 6px 8px !important;
    font-size: 14px !important;
}
.offerprice {
    background-color: #f9f9f9;
    color: #333;
    font-weight: 600;
}

    .offerprice:focus {
        background-color: #fff;
    }
.table td, .table th {
    vertical-align: middle;
    text-align: center;
    padding: 8px 10px;
    font-size: 14px;
}

.status-select, .groupdate-select {
    min-width: 130px;
    padding: 3px 6px;
}

.share-checkbox {
    transform: scale(1.2);
    cursor: pointer;
}

.btn-success i.bi-whatsapp {
    font-size: 1.1rem;
}
.share-icons button {
    border-radius: 50%;
    padding: 4px 6px;
    font-size: 0.9rem;
}

.share-checkbox {
    transform: scale(1.2);
    margin-left: 4px;
}

.form-select-sm {
    font-size: 0.85rem;
    height: 32px;
    padding: 2px 6px;
}
#proposalTable th,
#proposalTable td {
    text-align: center;
    vertical-align: middle;
}

#proposalTable .form-control,
#proposalTable .form-select {
    min-width: 110px;
    font-size: 0.9rem;
}

#proposalTable .remark {
    min-width: 180px;
}

.btn-sm i {
    font-size: 0.9rem;
}
#proposalTable .form-select-sm {
    height: 32px;
    font-size: 0.9rem;
    padding: 2px 6px;
}

#proposalTable td select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 3px rgba(13, 110, 253, 0.4);
    transition: 0.2s ease-in-out;
}


#proposalTable th, #proposalTable td {
    text-align: center;
    vertical-align: middle;
    padding: 4px 6px !important;
    font-size: 0.88rem;
    line-height: 1.2;
}

#proposalTable .form-select-sm {
    height: 30px;
    font-size: 0.85rem;
    padding: 2px 4px;
}

#proposalTable td select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 3px rgba(13, 110, 253, 0.4);
    transition: 0.2s ease-in-out;
}

@media (min-height: 850px) {
    #shareSummaryModal .modal-body {
        max-height: 45vh;
    }
}



/* WhatsApp share toggle styles */
.share-toggle {
    border: 2px solid #25D366;
    color: #25D366;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

    .share-toggle.active {
        background-color: #25D366 !important;
        color: #fff !important;
        border-color: #25D366 !important;
        box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.3);
    }

    .share-toggle:hover {
        background-color: #25D366;
        color: #fff;
    }



/* ✅ Slide-in Panel Style */
.share-summary-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 720px;
    max-width: 95vw;
    height: 100vh;
    background: #fff;
    box-shadow: -3px 0 15px rgba(0, 0, 0, 0.25);
    display: none;
    flex-direction: column;
    z-index: 1055;
    transform: translateX(100%);
    transition: all 0.4s ease-in-out;
    font-family: 'Poppins', sans-serif;
}

    .share-summary-panel.show {
        display: flex;
        transform: translateX(0);
    }

    /* Header */
    .share-summary-panel .summary-header {
        background: linear-gradient(90deg, #128C7E 0%, #25D366 100%);
        color: #fff;
        padding: 14px 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .share-summary-panel .summary-header h5 {
            margin: 0;
            font-weight: 600;
        }

    /* Body: proposal cards */
    .share-summary-panel .summary-body {
        flex: 1;
        padding: 15px 20px;
        background-color: #f7f7f7;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

.proposal-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

    .proposal-card .proposal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
        color: #333;
        margin-bottom: 4px;
    }

        .proposal-card .proposal-header .package-name {
            font-weight: 600;
            color: #222;
            flex: 1;
        }

    .proposal-card .proposal-sub {
        font-size: 0.8rem;
        color: #555;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        .proposal-card .proposal-sub span {
            display: inline-block;
            min-width: 110px;
            margin-right: 10px;
        }

/* Footer bar */
.summary-footer {
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 10px 16px;
    position: sticky;
    bottom: 0;
}


.proposal-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
    padding: 10px 12px;
    margin-bottom: 8px;
}

.proposal-header {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: #333;
}

.proposal-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #555;
}

/* ----------------------------------------------------
   MODERN RESPONSIVE PROPOSAL MODAL
   - Desktop: centered modal with blur backdrop
   - Mobile: full screen slide-up modal
----------------------------------------------------- */

/* Backdrop blur */
.modal-backdrop.show {
    backdrop-filter: blur(6px);
    background-color: rgba(0,0,0,0.35);
}

/* Modal content styling */
#addProposalModal .modal-content {
    border-radius: 20px;
    border: none;
    padding: 12px 14px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Slide-up animation */
.modal.fade .modal-dialog {
    transform: translateY(40px);
    opacity: 0;
    transition: transform .35s ease-out, opacity .35s ease-out;
}

.modal.fade.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

/* Compact fields */
#addProposalModal .form-control,
#addProposalModal .form-select {
    height: 34px;
    font-size: 0.85rem;
    padding: 4px 8px;
}

#addProposalModal .form-label {
    font-size: 0.75rem;
    margin-bottom: 2px;
    font-weight: 600;
}

/* Validation */
.modal-error {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 2px;
}

/* Save button */
#addProposalModal .btn-save-proposal {
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ------------------------------------------
   FULL SCREEN MODAL ON MOBILE (< 576px)
------------------------------------------- */
@media (max-width: 576px) {

    #addProposalModal .modal-dialog {
        width: 100%;
        height: 100%;
        margin: 0;
        max-width: 100%;
        transform: translateY(100%);
        transition: transform .35s ease-out;
    }

    .modal.fade.show .modal-dialog {
        transform: translateY(0);
    }

    #addProposalModal .modal-content {
        height: 100%;
        border-radius: 16px 16px 0 0;
        padding-bottom: 70px;
    }
}


.modal-backdrop.show {
    backdrop-filter: blur(6px);
    background: rgba(0,0,0,0.35);
}

#addFollowupModal .modal-content {
    border-radius: 20px;
    padding: 12px 16px;
    border: none;
}

.modal.fade .modal-dialog {
    transform: translateY(40px);
    opacity: 0;
    transition: transform .3s ease-out, opacity .3s ease-out;
}

.modal.fade.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

#addFollowupModal .form-control,
#addFollowupModal .form-select {
    height: 34px;
    font-size: 0.85rem;
}

@media (max-width: 576px) {
    #addFollowupModal .modal-dialog {
        width: 100%;
        height: 100%;
        max-width: 100%;
        margin: 0;
        transform: translateY(100%);
    }

    .modal.fade.show .modal-dialog {
        transform: translateY(0);
    }

    #addFollowupModal .modal-content {
        height: 100%;
        border-radius: 18px 18px 0 0;
    }
}

.modal-error {
    color: #dc2626;
    font-size: 0.75rem;
}






/* ===== ULTRA-LUXURY BASE ===== */
.lux-container {
    padding: 10px 5px;
}

/* ===== GLASS BADGES ===== */
.lux-badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
}

.lux-badge {
    padding: 10px 18px;
    border-radius: 14px;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #23334d;
}

    .lux-badge i {
        color: #1a73e8;
    }

/* ===== LUX CARD ===== */
.lux-card {
    background: linear-gradient(145deg, #ffffff, #f9fbff);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 15px 45px rgba(0,0,0,.08);
}

/* ===== Floating Input Style ===== */
.lux-input-group {
    position: relative;
    margin-bottom: 20px;
}

    .lux-input-group label {
        position: absolute;
        left: 16px;
        top: 12px;
        font-size: 0.85rem;
        color: #7c8aa5;
        transition: .25s;
        pointer-events: none;
    }

.lux-input:focus + label,
.lux-input:not(:placeholder-shown) + label {
    top: -8px;
    left: 12px;
    font-size: 0.75rem;
    background: white;
    padding: 0 6px;
    color: #0c63e7;
    font-weight: 600;
}

.lux-input {
    width: 100%;
    padding: 14px 14px 14px 14px;
    border-radius: 12px;
    border: 1px solid #d8e0ea;
    background: #fdfdfd;
    transition: .25s;
    font-size: 0.95rem;
}

    .lux-input:focus {
        border-color: #0b60e8;
        box-shadow: 0 0 0 3px rgba(13,110,253,.25);
    }

/* ===== LUX COUPON FIELD ===== */
.lux-coupon-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
}

.lux-input-icon {
    position: absolute;
    left: 14px;
    top: 12px;
    font-size: 1.3rem;
    color: #7a92b2;
}

.coupon-field {
    padding-left: 42px !important;
}

.lux-apply-btn {
    padding: 12px 22px;
    background: linear-gradient(135deg, #4a90ff, #0060ff);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(0,96,255,.25);
    transition: .25s;
}

    .lux-apply-btn:hover {
        transform: translateY(-3px);
    }

/* ===== LUX COUPON CHIP ===== */
.lux-coupon-chip {
    margin-top: 15px;
    background: linear-gradient(140deg, #eafff1, #d4ffe4);
    padding: 18px 22px;
    border-radius: 16px;
    border: 1px solid #b7efc9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lux-chip-title {
    font-weight: 700;
    color: #1a7431;
}

.lux-chip-body {
    margin-top: 4px;
}

.lux-chip-code {
    font-weight: 700;
    color: #135c2c;
}

.lux-chip-discount {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #c9f7d9;
    font-weight: 700;
    color: #1b6d3a;
}

/* Remove button */
.lux-chip-remove {
    background: #fff;
    border: none;
    border-radius: 50%;
    padding: 8px 10px;
    font-size: 1rem;
    color: #d92b2b;
    transition: .2s;
}

    .lux-chip-remove:hover {
        background: #ffeaea;
    }

/* ===== SUMMARY CARD ===== */
.lux-summary-card {
    background: #f7faff;
    padding: 22px;
    border-radius: 18px;
    border: 1px solid #dee8ff;
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
}

.lux-summary-header {
    display: flex;
    justify-content: space-between;
}

.lux-summary-amount {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e8f3a;
}

.lux-summary-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    font-size: 0.92rem;
}

.lux-pending-label {
    font-weight: 700;
    color: #b20000;
}

.lux-pending-amount {
    font-weight: 800;
    color: #cc0000;
}

/* Coupon Shake */
.shake {
    animation: shake .35s ease;
}

/* ---------------------------------------------------
   ULTRA LUX MODAL CORE
--------------------------------------------------- */

.lux-modal-content {
    border-radius: 22px;
    border: none;
    background: #ffffff;
    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
    padding-bottom: 10px;
}

.lux-header {
    background: #ffffff;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.lux-container {
    padding: 10px 5px;
}


/* ---------------------------------------------------
   LUX BADGES (top info chips)
--------------------------------------------------- */

.lux-badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.lux-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f7faff;
    border: 1px solid #e2e9ff;
    padding: 10px 16px;
    border-radius: 14px;
    font-weight: 500;
    font-size: 0.92rem;
    color: #2e3a59;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

    .lux-badge i {
        color: #4a6cf7;
        font-size: 1.1rem;
    }


/* ---------------------------------------------------
   LUX CARD WRAPPER
--------------------------------------------------- */

.lux-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.lux-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 18px;
}

    .lux-section-title i {
        color: #4a6cf7;
    }


/* ---------------------------------------------------
   FLOATING INPUT FIELD
--------------------------------------------------- */

.lux-input-group {
    position: relative;
    margin-bottom: 18px;
}

    .lux-input-group label {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        font-size: 0.85rem;
        pointer-events: none;
        transition: 0.2s ease;
        color: #7e8790;
    }

.lux-input {
    width: 100%;
    padding: 14px 16px;
    padding-left: 16px;
    border-radius: 14px;
    border: 1px solid #d3d9df;
    background: #fefefe;
    font-size: 1rem;
    color: #2b2b2b;
    transition: 0.25s;
}

    .lux-input:focus {
        border-color: #4a6cf7;
        box-shadow: 0 0 0 4px rgba(74, 108, 247, 0.15);
    }

        .lux-input:focus + label,
        .lux-input:not(:placeholder-shown) + label {
            top: 6px;
            font-size: 0.70rem;
            color: #4a6cf7;
        }


/* ---------------------------------------------------
   COUPON INPUT WRAPPER
--------------------------------------------------- */

.lux-coupon-section {
    margin-top: 25px;
}

.lux-coupon-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #555;
}

.lux-coupon-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #d4dbee;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
}

.lux-input-icon {
    font-size: 1.25rem;
    color: #4a6cf7;
}

.lux-coupon-input-wrapper .coupon-field {
    border: none;
    outline: none;
    flex: 1;
    font-size: 1rem;
    padding-left: 2px;
    background: transparent;
}

/* APPLY BUTTON */
.lux-apply-btn {
    background: linear-gradient(135deg, #2874f0, #4a90ff);
    border: none;
    padding: 10px 22px;
    border-radius: 12px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    transition: 0.2s ease;
}

    .lux-apply-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(40,116,240,0.35);
    }


/* ---------------------------------------------------
   SMALL COUPON CHIP (APPLIED)
--------------------------------------------------- */

.lux-coupon-chip-small {
    background: #eaffea;
    border: 1px solid #b5e9b8;
    padding: 12px 18px;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    box-shadow: 0 8px 14px rgba(0,0,0,0.05);
}

.lux-chip-title-small {
    font-weight: 700;
    color: #1e7a34;
    font-size: 0.85rem;
}

.lux-chip-code-small {
    font-weight: 700;
    color: #145c27;
    font-size: 0.92rem;
}

.lux-chip-discount-small {
    background: #d8f7d8;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #1f7f35;
}

.lux-chip-remove-small {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #d64545;
    cursor: pointer;
    padding: 5px;
}

    .lux-chip-remove-small:hover {
        color: #b82828;
    }


/* ---------------------------------------------------
   SUMMARY CARD (Beautiful Finance Layout)
--------------------------------------------------- */

.lux-summary-card {
    background: #f7faff;
    border: 1px solid #e1e7fb;
    padding: 25px;
    border-radius: 18px;
    margin-top: 25px;
    box-shadow: 0 12px 20px rgba(0,0,0,0.05);
}

.lux-summary-header {
    display: flex;
    justify-content: space-between;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2b2b2b;
}

.lux-summary-amount {
    color: #1c9c47;
    font-weight: 800;
}

.lux-summary-toggle {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a6cf7;
    cursor: pointer;
}

.lux-summary-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 12px;
    column-gap: 18px;
    font-size: 0.95rem;
    align-items: center;
    margin-top: 12px;
}

    .lux-summary-grid span {
        color: #444;
    }

.lux-pending-label {
    font-weight: 700;
    color: #b72a2a !important;
}

.lux-pending-amount {
    font-weight: 700;
    color: #b72a2a !important;
    font-size: 1.05rem;
}

/* remove default UL behavior */
.docs-list {
    list-style: none;
    margin: 0;
    padding: 0; /* << removes unwanted left shift */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* align each item in one line */
.docs-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 13px;
}



.tp-download-btn {
    display: inline-block;
    padding: 6px 10px;
    font-size: 13px;
    background: #007bff;
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none;
}

    .tp-download-btn:hover {
        background: #0069d9;
    }

.btn-sm {
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 6px;
}


/* Document type */
.doc-type {
    font-weight: 600;
    color: #333;
}

/* Separator dash */
.dash {
    color: #999;
}

/* Download link */
.doc-link {
    color: #1d4ed8;
    text-decoration: none;
}

    .doc-link:hover {
        text-decoration: underline;
    }

/* Replace button */
.doc-btn {
    border: none;
    background: none;
    padding: 0;
    color: #d97706;
    cursor: pointer;
}

    .doc-btn:hover {
        text-decoration: underline;
    }

/* dot separator */
.dot {
    color: #888;
}

/* Ensures alignment under DOCUMENTS header */
.docs-cell {
    vertical-align: top;
    padding-left: 0 !important;
}


.payment-option-active {
    background: #0d6efd;
    color: white !important;
    border-radius: 6px;
    padding: 2px 8px;
}