body {
    font-family: Arial;
    font-size:12px;
    margin: 20px;
    background-color: #f4f4f4;
}

 body.registration-page {
        background-color: #EAF2FA;
        color: #333; /* Dark text for readability */
        font-family: Arial, sans-serif;
    }

.container {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 1800px;
    margin: auto;
}

h2, h3 {
    color: #333;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

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

    .table th {
        background: #007bff;
        color: white;
    }

.btn-delete {
    background: red;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
}

    .btn-delete:hover {
        background: darkred;
    }

.btn-logout {
    background: #007bff;
    text-decoration-color: #fff;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    float: right;
}

    .btn-logout:hover {
        background: #0056b3;
    }

.button-container {
    display: flex;
    justify-content: center; /* Centers the button */

    margin-top: 20px;
}

.invalid-input {
    border: 2px solid red;
}

.validation-warning {
    color: red;
    display: none;
    font-size: 12px;
}

.btn-navlnk {
    background: #05a308;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    float: left;
}

    .btn-navlnk:hover {
        background: #0a8a00;
    }

/* Increase white background area */
.admin-dashboard-container {
    width: 100%; /* Adjust width (default: 90%, can be 100% for full width) */
    max-width: 1800px; /* Prevents it from becoming too wide */
    background-color: white; /* Ensures the background is white */
    margin: 20px auto; /* Centers it with top-bottom spacing */
    padding: 30px; /* Adds internal spacing */
    border-radius: 10px; /* Smooth rounded edges */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

/* Custom styling for the text inside the textbox */
.partial-payment {
    width: 100%; /* Adjust width as needed */
    height: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 12px;
    font-style: italic;
}

/* Style the placeholder text */
    .partial-payment::placeholder {
        color: #888; /* Light gray placeholder text */
        font-size: 12px;
        font-style: italic;
    }

.decoded-content {
    white-space: pre-wrap; /* Keeps formatting */
    word-wrap: break-word;
    max-width: 100%;
    overflow-x: auto;
    font-size: 16px;
}

.poll-container {
    width: 300px; /* Adjust width (default: 90%, can be 100% for full width) */
    height: 300px;
    max-width: 400px; /* Prevents it from becoming too wide */
    background-color: white; /* Ensures the background is white */
    margin: 20px auto; /* Centers it with top-bottom spacing */
    padding: 30px; /* Adds internal spacing */
    border-radius: 10px; /* Smooth rounded edges */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

.binary-check {
    background-color: #eef6ff;
    border-radius: 5px;
    padding: 4px 8px;
    display: inline-block;
    margin-bottom: 5px;
}

.validation-error {
    color: red;
    font-weight: bold;
    display: block;
    margin-top: 4px;
}

h3 {
    font-size: 16px;
    margin-bottom: 5px;
    color: #333;
}

.btn-navlnk {
    display: block;
    padding: 5px 10px;
    color: #0078D7;
}

.modal-content {
    padding: 20px;
}

.grid-buttons {
    display: flex;
    gap: 10px;
}

.badge {
    padding: 5px 10px;
    border-radius: 12px;
    font-weight: 600;
    color: white;
}

.bg-success {
    background-color: #28a745;
}

.bg-danger {
    background-color: #dc3545;
}

iframe, video {
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #aaa;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

/* --- Actions Bar (single line) --- */
.actions-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* keep one line */
    gap: 10px;
    margin: 8px 0 16px;
    white-space: nowrap; /* prevent inside items from wrapping */
}

    .actions-bar .left-group,
    .actions-bar .right-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* pushes the right group fully to the right */
    .actions-bar .spacer {
        flex: 1 1 auto;
    }

    /* subtle separator before the dangerous action */
    .actions-bar .danger-zone {
        margin-left: 16px;
        padding-left: 16px;
        border-left: 2px solid #e9ecef;
    }

/* small, muted counter next to Search */
.result-count {
    margin-left: 12px;
    font-size: 12px;
    color: #6c757d;
}

/* keep long button text on one line */
.actions-bar .btn,
.actions-bar .btn-success,
.actions-bar .btn-search {
    white-space: nowrap;
}

/* keep inputs tidy in a single line */
.actions-bar select,
.actions-bar input[type="text"],
.actions-bar button,
.actions-bar .btn,
.actions-bar .btn-search {
    vertical-align: middle;
}

.actions-bar .search-box {
    width: 240px; /* adjust as needed */
    max-width: 40vw;
}

@media (max-width: 768px) {
    .table, .table thead, .table tbody, .table th, .table td, .table tr {
        display: block;
        width: 100%;
    }

        .table thead {
            display: none;
        }

        .table tr {
            margin-bottom: 1rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            padding: 0.5rem;
            background-color: white;
        }

        .table td {
            position: relative;
            padding-left: 50%;
            text-align: left;
            border: none;
            border-bottom: 1px solid #eee;
        }

            .table td::before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                top: 10px;
                font-weight: bold;
                white-space: nowrap;
            }

        .table .pager {
            text-align: center;
        }

    /* let the bar wrap instead of scrolling */
    .actions-bar {
        flex-wrap: wrap !important;
        white-space: normal !important;
        overflow-x: hidden; /* no horizontal scrollbar */
        gap: 8px;
    }

        /* allow the left controls to wrap across lines */
        .actions-bar .left-group {
            flex-wrap: wrap;
            gap: 8px 10px;
        }

        /* search box grows to line width */
        .actions-bar .search-box {
            flex: 1 1 100%;
            max-width: 100%;
        }

        /* keep selects reasonable width on narrow screens */
        .actions-bar select {
            max-width: 45vw;
        }

        /* push the right group to a new line */
        .actions-bar .spacer {
            flex-basis: 100%;
            height: 0;
        }

        /* change the separator to a top border when stacked */
        .actions-bar .danger-zone {
            width: 100%;
            margin-left: 0;
            padding-left: 0;
            border-left: 0;
            border-top: 2px solid #e9ecef;
            padding-top: 8px;
            justify-content: flex-end;
        }

        /* allow the long right-side button text to wrap */
        .actions-bar .btn-success {
            white-space: normal !important;
        }
}

/* Normalize mobile text scaling (stops Android/Chrome inflation) */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Make fieldset/legend typography consistent across browsers */
fieldset {
    border: 1px solid #ddd; /* optional, keeps visual consistency */
    padding: 16px; /* optional */
    margin: 0 0 16px 0; /* optional */
}

/* Match your base 12px sizing */
legend {
    font-size: 12px;
    font-weight: 700;
    padding: 0 8px; /* helps avoid overlap with border */
}

/* Lock all text inside legal sections to the same size as the rest */
fieldset,
fieldset p,
fieldset li,
fieldset label,
fieldset span {
    font-size: 12px;
    line-height: 1.45; /* keeps multi-line bullets tidy */
}

.fieldset-note {
    display: block;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #6c757d; /* muted text */
}