/* Base styles for grid & form controls */
.fancy-label,
.fancy-textbox,
.fancy-textarea,
.fancy-dropdown,
.fancy-calendar {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color: #212529;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; /* include padding & border in height */
    padding: 3px 5px; /* adjust as needed for vertical centering */
    height: 30px; /* enforce same height */
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

}

/* Caption (if used) */
.fancy-caption {
    font-size: 1.25em;
    font-weight: bold;
    padding: 0.5em;
    text-align: left;
}

/* Empty-data row */
.fancy-empty-row {
    background-color: #fff0f0;
    color: #a00;
    font-style: italic;
    text-align: center;
    padding: 0.75em;
}

/* Sorted-header indicators */
.fancy-sort-asc::after {
    content: " ▲";
}

.fancy-sort-desc::after {
    content: " ▼";
}




/* Dropdowns */
.fancy-dropdown {
    width: 100%;
    max-width: 100%;
    padding: 3px 4px;
    appearance: none;
}

    .fancy-dropdown:focus {
        border-color: #2aacc8;
        box-shadow: 0 0 3px rgba(42, 172, 200, 0.5);
    }

/* Buttons */
.fancy-button {
    display: inline-block;
    padding: 3px 5px; /* adjust as needed for vertical centering */
    height: 30px; /* enforce same height */
    font-weight: 600;
    background-color: #2aacc8;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, box-shadow 0.2s;
}

    .fancy-button:hover {
        background-color: #219ebc;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .fancy-button:disabled {
        background-color: #99d6e3;
        cursor: default;
        opacity: 0.6;
    }

/* Radios & Checkboxes */
.fancy-radio,
.fancy-checkbox {
    vertical-align: middle;
    margin-right: 6px;
    cursor: pointer;
}

    .fancy-radio:focus,
    .fancy-checkbox:focus {
        outline: 1px dotted #2aacc8;
    }

/* List-style radio/checkbox groups */
.fancy-radio-list,
.fancy-checkbox-list {
    list-style: none;
    padding: 8px 0; /* add vertical padding around the whole list */
    margin: 0;
    text-align: center !important; /* center-align all list items */
}

    .fancy-radio-list li,
    .fancy-checkbox-list li {
        display: inline-block; /* make items flow inline so they can center */
        margin: 0 8px 4px; /* horizontal spacing + bottom margin */
        padding: 4px 12px; /* extra padding inside each item */
        vertical-align: middle; /* ensure radio/checkbox and label sit in the middle */
    }


/* Fix column width */
.fancy-grid th.mapno-header,
.fancy-grid td.mapno-cell {
    width: 90px; /* or max-width if you prefer */
}

/* Allow wrapping inside this column */
.fancy-grid td.mapno-cell {
    white-space: normal; /* allow wrap */
    word-wrap: break-word; /* old name */
    overflow-wrap: anywhere; /* newer, handles long strings */
}


.radiolist {
    /* ensure the labels all line up nicely */
    align-items: center;
}

    .radiolist input[type="radio"] {
        /* hide the native radio circle */
        position: absolute;
        opacity: 0;
    }

    .radiolist label {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.6rem;
        border: 2px solid transparent;
        border-radius: 2rem;
        cursor: pointer;
        transition: background-color .3s ease, border-color .3s ease, color .3s ease;
        user-select: none;
    }

        /* the “dot” inside the pill */
        .radiolist label::before {
            content: "";
            display: inline-block;
            width: 1rem;
            height: 1rem;
            margin-right: .5rem;
            border: 2px solid #007bff;
            border-radius: 50%;
            flex-shrink: 0;
            transition: background-color .3s ease;
        }

    /* when checked… */
    .radiolist input[type="radio"]:checked + label {
        background-color: rgba(0, 123, 255, .1);
        border-color: #007bff;
        color: #007bff;
    }

        .radiolist input[type="radio"]:checked + label::before {
            background-color: #007bff;
        }


/* Labels */

.fancy-header-row th {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 4px;
    text-align: center;
    background-color: lightblue;
}

.fancy-header-row-left th {
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 4px;
    text-align: left;
    background-color: lightblue;
}


.fancy-label,
.fancy-label-inline {
    font-size: 12px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 4px;
}

.fancy-label {
    display: block;
    width: 100%;
}

.fancy-label-inline {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.fancy-label-sm {
/*    display: block;*/
    width: 100%;
    font-size:10px !important;
    font-style: italic;
}


/* Grid*/


/* Ensure grid container collapses borders */
.fancy-grid {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px !important;
    color: #212529;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}



/* Header & Footer */
.fancy-grid-header-left,
.fancy-grid-footer-left {
    background-color: #f0f0f0;
    font-weight: bold;
    /*    text-align: left;*/
    padding: 0.5em;
}

/* Data rows */
.fancy-grid-row {
    background-color: #ffffff;
}

.fancy-alt-row {
    background-color: WhiteSmoke;
}

/* Selected & Edit rows */
.fancy-grid-selected-row,
.fancy-grid-edit-row {
    background-color: #ccffcc;
    font-weight: bold;
    color: #333333;
    border: 1px solid #cc66ff;
}

.fancy-grid-edit-row {
    color: white; /* override for edit-mode text */
}

/* Fancy LinkButton (asp:LinkButton or <a>) */
.fancy-grid-LinkButton {
    background: none;
    border: none;
    color: #2aacc8;
    text-decoration: none;
    padding: 0;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, text-decoration 0.2s;
}

    .fancy-grid-LinkButton:hover {
        color: #219ebc;
        text-decoration: underline;
    }

    .fancy-grid-LinkButton:disabled,
    .fancy-grid-LinkButton[disabled] {
        color: #999;
        cursor: default;
        text-decoration: none;
        opacity: 0.6;
    }


/* Pager container */
.fancy-grid-pager {
    padding: 0.5em 0;
    width: 100%;
}

    /* Circle-style pager links */
    .fancy-grid-pager a {
        display: inline-flex; /* flex for centering */
        align-items: center;
        justify-content: center;
        width: 24px; /* fixed width = height */
        height: 24px;
        margin: 0 2px;
        border: 1px solid #cc66ff;
        border-radius: 50%; /* makes it round */
        color: #2aacc8;
        text-decoration: none;
        font-size: 12px; /* center numerals nicely */
        transition: background-color 0.2s, color 0.2s;
        text-align: right !important;
    }

        /* Hover state */
        .fancy-grid-pager a:hover {
            background-color: #ccf0ff;
        }

    /* Disabled links */
    .fancy-grid-pager .aspNetDisabled {
        color: #a00;
        border-color: #999;
        cursor: default;
        pointer-events: none;
        background: none;
    }

    /* Style the “current” number (rendered as a span) */
    .fancy-grid-pager span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px; /* match your link circles */
        height: 32px;
        margin: 0 4px;
        border: 1px solid #2aacc8;
        border-radius: 50%;
        background-color: #2aacc8; /* filled circle */
        color: #ffffff;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.2s, color 0.2s;
    }
    /* Optional hover/focus for current (if you want) */
    .fancy-grid-pager a.current-page:hover {
        background-color: #219ebc;
    }



/* Fancy container around the ReportViewer control */
.fancy-reportviewer-container {
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 16px;
    margin: 1rem 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    /* Style the ReportViewer toolbar area */
    .fancy-reportviewer-container .rs-toolbar {
        background-color: rgba(42, 172, 200, 0.1);
        border-bottom: 1px solid #ccc;
        padding: 8px;
   /*     border-top-left-radius: 10px;
        border-top-right-radius: 10px;*/
    }

    /* Style the ReportViewer body */
    .fancy-reportviewer-container .rs-body {
        padding: 12px;
        overflow: auto;
    }

    /* Optional: style the parameter prompts */
    .fancy-reportviewer-container .rs-parameter-controls {
        margin-bottom: 12px;
    }

    .fancy-reportviewer-container .rs-parameter-label {
        font-weight: 600;
        margin-right: 8px;
    }

    /* Optional: make the “View Report” button fancy */
    .fancy-reportviewer-container .rs-action-button {
        background-color: #2aadc8;
        color: white;
        padding: 6px 12px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .fancy-reportviewer-container .rs-action-button:hover {
            background-color: #239fb2;
        }

/* shrink dropdown width to selected text */
.ddl-fit {
    width: max-content;
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
}

/* if fancy-dropdown forces 100% width, override */
.fancy-dropdown.ddl-fit {
    width: max-content !important;
    display: inline-block !important;
}