body {
    font-family: 'Segoe UI', Arial;
    background: linear-gradient(135deg, #74ebd5 0%, #9face6 100%);
    min-height: 100vh;
    margin: 0;

    display: flex;
    justify-content: center;   /* ✅ Centers horizontally */
    align-items: flex-start;   /* ✅ Keeps top-nav visible and container starts below it */
    padding-top: 90px;         /* ✅ Space for your fixed top navbar */
}

.container {
    width: 100%;
    max-width: 1200px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    box-sizing: border-box;
    margin: 0 auto;       /* ✅ Centers horizontally */

}

        h2 { text-align: center; color: #333; margin-top: 0; }

        .header-section { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #eee; margin-bottom: 20px; padding-bottom: 15px; flex-wrap: wrap; gap: 10px; }
        .item-row { display: grid; grid-template-columns: 10% 35% 5% 8% 10% 10% 5% 5%; gap: 12px; padding: 15px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 15px; background: #fdfdfd; align-items: end; }
        .row-title { grid-column: span 8; font-weight: bold; color: #007BFF; font-size: 14px; border-bottom: 1px solid #eee; margin-bottom: 5px; }
        .form-group { display: flex; flex-direction: column; }
        label { font-size: 12px; font-weight: bold; color: #555; margin-bottom: 5px; }
        input, select { padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }
        input:focus { background-color: #FFF5CC !important; outline: none; border-color: #007BFF; }
        input[readonly] { background-color: #D3FFCC; cursor: not-allowed; }
        .remove-btn { background: #ff4d4d; color: white; border: none; border-radius: 6px; padding: 10px; cursor: pointer; height: 40px; width: 40px; align-self: auto; /* Changes from 'center' to 'end' to align with the bottom of the inputs */ margin-bottom: 12px;}
        .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; padding-top: 20px; border-top: 2px solid #eee; }
        .full-width { grid-column: span 2; }
        button[type="submit"] { background: #0056b3; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-size: 1rem; font-weight: bold; cursor: pointer; width: 100%; transition: 0.3s; margin-top:5px;}
        button[type="submit"]:hover { background: #007BFF; }
        @media (max-width: 768px) { .item-row { grid-template-columns: 1fr 1fr; } .row-title, .full-width { grid-column: span 2; } .remove-btn { grid-column: span 2; } }


/* ✅ Apply increased height only to item rows */
.item-row input {
    height: 45px !important;
}

        /* Responsive Background */
/*        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            margin: 0; 
            padding: 20px; 
            background: linear-gradient(135deg, #74ebd5 0%, #9face6 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Container adjustments */
/*        .container { 
            width: 100%; 
            max-width: 800px; /* Wider to accommodate two columns */
/*        padding: 30px; 
            background: #fff;
            border-radius: 12px; 
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            box-sizing: border-box;
        }

        h2 { text-align: center; color: #333; margin-top: 0; }

        /* GRID SYSTEM: Two columns on desktop, one on mobile */
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Two equal columns */
            gap: 15px 25px; /* Gap between rows and columns */
        }

/* ✅ Improve spacing */
/*.form-group {
    margin-bottom: 12px;
}*/

        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 12px;
        }

        /* Full width for specific items (like the button or large inputs) */
        .full-width {
            grid-column: span 2;
        }

        label { 
            font-weight: bold; 
            margin-bottom: 5px; 
            color: #555; 
            font-size: 0.9rem;
        }

/* ✅ Increased input field height */

input, select {
    height: 45px;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

/*        input, select { 
            width: 100%; 
            padding: 1px; 
            border: 1px solid #ccc; 
            border-radius: 6px; 
            box-sizing: border-box;
            transition: all 0.1s ease;
        }

        /* SPECIFIC COLORS REQUESTED */
        input:focus, select:focus {
            background-color: #FFF5CC !important;
            border-color: #007BFF;
            outline: none;
        }

        input[readonly] {
            background-color: #D3FFCC;
            cursor: not-allowed;
        }


        button {
            width: 100%;
            background-color: #007BFF;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 1rem;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
            margin-top:5px;
        }

        button:hover { background-color: #0056b3; }

        /* RESPONSIVENESS: Collapse to 1 column on screens smaller than 600px */
        @media (max-width: 600px) {
            .form-grid {
                grid-template-columns: 1fr;
            }
            .full-width {
                grid-column: span 1;
            }
            .container { padding: 20px; }
        }


table { width:100%; border-collapse:collapse; }
th, td { border:1px solid #444; padding:6px; }
th { background:#003366; color:#fff; }

.action-buttons {
    display: flex;
    gap: 10px;              /* space between buttons */
    justify-content: center;
    align-items: center;
}

.action-btn {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.25s;
}

/* Approve Button */
.approve-btn {
    background: #28a745;
    color: white;
}
.approve-btn:hover {
    background: #1e7e34;
}

.info-btn {
    background: #281f45;
    color: white;
}
.info-btn:hover {
    background: #1e7134;
}

/* Reject Button */
.reject-btn {
    background: #dc3545;
    color: white;
}
.reject-btn:hover {
    background: #b31d2a;
}

/* Back Button */
.back-btn {
    background: #004BC2;
    color: white;
}
.back-btn:hover {
    background: #619CFA;
}

/* print Button */
.prnt-btn {
    background: #004BC2;
    color: white;
}
.prnt-btn:hover {
    background: #619CFA;
}






/*for new two coloums buttons.*/
/* ✅ 2‑Column Button Layout */
.button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;   /* row gap, column gap */
    margin-top: 25px;
}

/* ✅ Buttons fill full width of their column */
.button-grid a {
    width: 100%;
}

.button-grid .menu-btn {
    width: 100%;
    padding: 15px;
    font-size: 15px;
    font-weight: bold;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.button-grid .menu-btn:hover {
    background: #0056b3;
    transform: scale(1.02);
}

/* ✅ Mobile: Switch to single column for clarity */
@media(max-width: 768px){
    .button-grid .menu-btn {
        grid-template-columns: 1fr;
    width: 100%;
    }
}

.form-group-row_s {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.form-group.half-width {
    flex: 1;
}

@media (max-width: 768px) {
    .form-group-row_s {
        flex-direction: column;
    }
}

/* To Mark star on mandatory field */
.required-star {
    color: red;
    margin-left: 3px;
}

/* Optional: Highlight the input border if it's empty and required */
input:required {
    border-left: 3px solid #ff0000; /* Subtle red line on the left side */
}





/* ✅ Button 25% width of the screen width. */

/* Centered button – 25% width */
.btn-center1 {
    text-align: center;
    margin-top: 20px;
}

.btn-quarter1 {
    width: 50%;
    min-width: fit-content;   /* ✅ fits text if 25% is too small */
    padding: 10px 20px;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .btn-quarter1 {
        width: auto;
        min-width: 60%;
    }
}


/* ✅ 4‑Column Button Grid (Desktop) */
.button-grid1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* ✅ 4 vertical columns */
    gap: 15px;
    margin-top: 25px;
}

/* ✅ Buttons fill full width of each column */
.button-grid1 a,
.button-grid1 .menu-btn1 {
    width: 100%;
}

/* ✅ Button styling (unchanged behavior) */
.menu-btn1 {
    height: 55px;
    font-size: 15px;
    font-weight: bold;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* ✅ Hover effect */
.menu-btn1:hover {
    background: #0056b3;
    transform: scale(1.02);
}

/* ✅ Mobile: single column, 100% width */
@media (max-width: 768px) {
    .button-grid1 {
        grid-template-columns: 1fr; /* ✅ single column */
    }
}


    .btn-center2 {
    display: flex;
    flex-direction: row;
    justify-content: center; /* Centers buttons horizontally */
    gap: 10px;               /* Adds a small gap between buttons */
    width: 100%;
}

.btn-quarter2 {
/*  width: 25%;              /* Sets width to 25% of the parent div */
    padding: 10px;
    cursor: pointer;
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    gap: 15px; 
    width: 100%;
}

/* Optional: Style the cancel button differently so it's less prominent */
.btn-cancel {
    background-color: #28a745;
    border: none;
    padding: 5px;
    border-radius: 6px; 
    font-size: 15px; 
    font-weight: bold; 
    cursor: pointer; 
    width: 100%; 
    transition: 0.3s; 
/*    color: #333; */
}

/* ✅ Mobile: single column, 100% width */
@media (max-width: 768px) {
    .btn-center2 {
        grid-template-columns: 1fr; /* ✅ single column */
    }
}

/* ✅ Mobile: single column, 100% width */
@media (max-width: 768px) {
    .btn-quarter2 {
        grid-template-columns: 1fr; /* ✅ single column */
    }
}

/* ✅ Mobile: single column, 100% width */
@media (max-width: 768px) {
    .btn-cancel {
        grid-template-columns: 1fr; /* ✅ single column */
    }
}

/* --------------------------------------------------*/

/* Control bar */
.snapshot-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

/* Buttons */
.snapshot-controls button,
.back-btn-container button {
    height: 40px;
    padding: 0 15px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-view { background: #28a745; color: #fff; }
.btn-export { background: #007bff; color: #fff; }
.btn-back { background: #28a745; color: #fff; }

/* Back button spacing */
.back-btn-container {
    margin-bottom: 20px;
}

/* Table container */
.table-container {
    width: 100%;
    overflow-x: auto;
}

/* Prevent button stretching */
button {
    align-self: center;
}