/* Fixed caution banner that stays visible at bottom of viewport */
.caution {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px; /* slightly higher */
    z-index: 2147483647; /* top-most */
    max-width: 980px;
    width: calc(100% - 40px);
    color: #b91c1c !important; /* deep red */
    background: rgba(185,28,28,0.09);
    border-left: 6px solid #b91c1c;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 6px 18px rgba(13,38,59,0.06);
    text-align: center;
    pointer-events: none; /* allow clicks to underlying controls if banner purely informational */
}

/* remove the extra bottom padding on .card added for sticky variant */
.card {
    background: #ffffff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(13, 38, 59, 0.06);
    border: 1px solid rgba(13,38,59,0.04);
}

/* Keep existing rules after adding caution */
body {
    font-family: 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
    background: #f4f7fb;
    color: #222;
    margin: 0;
    padding: 0;
}

/* Page container and card */
.page-container {
    max-width: 1000px;
    margin: 32px auto;
    padding: 20px;
    padding-bottom: 220px; /* ensure fixed bottom banner doesn't cover content/buttons */
}

.card {
    background: #ffffff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(13, 38, 59, 0.06);
    border: 1px solid rgba(13,38,59,0.04);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.card-title {
    font-size: 20px;
    font-weight: 600;
    color: #0d2642;
    margin: 0;
}

.meta-list {
    font-size: 12px;
    color: #6b7280;
}

/* Report form elements */
.field {
    margin-bottom: 14px;
}

.label {
    display: inline-block;
    font-weight: 600;
    color: #0d2642;
    margin-bottom: 6px;
}

.small-label {
    font-size: 12px;
    color: #6b7280;
}

.report-box {
    width: 100% !important;
    box-sizing: border-box;
    height: 192px !important; /* reduced from 320px to 192px (60% = -40%) */
    min-height: 192px !important;
    max-height: 720px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e6eef8;
    background: linear-gradient(180deg, #ffffff, #fcfdff);
    resize: vertical;
    font-family: 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #b91c1c; /* keep report text readable — change if needed */
    color: #12304b;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.buttons {
    margin-top: 16px;
    position: relative;
    z-index: 0; /* below the caution banner */
    margin-bottom: 24px; /* extra breathing room above the fixed banner */
}

.meta-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.meta-item {
    font-size: 13px;
    color: #4b5563;
}

/* Reuse modern-button class but add small variant */
.modern-button.small {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}

/* Responsive tweaks */
@media (max-width: 700px) {
    .card {
        padding: 14px;
        border-radius: 10px;
    }

    .card-title {
        font-size: 18px;
    }

    .meta-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Keep existing modern components below (unchanged) */

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    color: Navy
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    color: Navy
}

h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    color: Navy
}

h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #0000FF
}

h5 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: Navy
}

h6 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-small;
    color: Navy
}

normal {
    font-family: Arial, Helvetica, sans-serif;
    color: Navy
}

li {
    font-family: Arial, Helvetica, sans-serif;
    color: Navy
}

div.containerDiv {
    text-align: center;
}

div.holderDiv {
    display: inline;
}

/* Modern Table Style */
.modern-table {
    font-family: Arial, sans-serif;
    font-size: 8pt;
    border-collapse: collapse;
    width: 100%;
}

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

    .modern-table th {
        background-color: #4CAF50;
        color: white;
        font-weight: bold;
        width: 100px;
    }

    .modern-table td {
        font-weight: normal;
    }

    .modern-table tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .modern-table tr:hover {
        background-color: #ddd;
    }

/* GridView container */
.modern-gridview {
    font-family: Arial, sans-serif;
    font-size: 10pt;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Shadow for modern look */
}

/* Header style */
.modern-gridview th {
    background-color: #4CAF50; /* Change as needed */
    color: white;
    text-align: left;
    padding: 10px;
    vertical-align: top;
}

/* Row styles */
.modern-gridview td {
    padding: 10px;
    border-bottom: 1px solid #ddd; /* Light border for each row */
    vertical-align: top;
}

/* Alternating row styles */
.modern-gridview tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Hover effect for rows */
.modern-gridview tr:hover {
    background-color: #ddd;
}

/* Footer style */
.modern-gridview tfoot td {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
}

/* DropDownList container */
.modern-dropdown {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #000000;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('../images/dropdown-arrow.png') no-repeat right 12px center;
    background-size: 12px;
    display: block; /* make full-width stacked controls */
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    margin-bottom: -10px; /* reduced spacing further as requested */
}

@media (max-width: 700px) {
    .modern-dropdown {
        margin-bottom: -10px; /* reduced spacing on mobile */
    }
}

/* DetailsView container */

.modern-detailsview {
    font-family: Arial, sans-serif;
    font-size: 10pt;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Shadow for modern look */
}

    .modern-detailsview tr {
        background-color: #F7F6F3;
    }

        .modern-detailsview tr.header {
            background-color: #5D7B9D;
            color: white;
        }

        .modern-detailsview tr.footer {
            background-color: #5D7B9D;
            color: white;
        }

        .modern-detailsview tr.alternating {
            background-color: white;
            color: #284775;
        }

        .modern-detailsview tr.edit-row {
            background-color: #999999;
        }

        .modern-detailsview tr.command-row {
            background-color: #E2DED6;
        }

    .modern-detailsview td {
        padding: 4px;
        border: 1px solid #E9ECF1;
    }

/* Modern Button Style */
.modern-button {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: white;
    background-color: #4CAF50;
    border: none;
    border-radius: 10px;
    padding: 5px 15px;
    cursor: pointer;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

    .modern-button:hover {
        background-color: #45A049;
        border-color: #357D36;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
    }

    .modern-button:focus {
        outline: none;
        border-color: #357D36;
        box-shadow: 0px 0px 10px rgba(81, 203, 238, 0.5);
    }


    /* Spinner overlay */
.spinner-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    z-index: 9999;
}

.spinner-panel {
    background: white;
    padding: 18px 22px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

.spinner-icon-large {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid rgba(0,0,0,0.12);
    border-top-color: #4CAF50;
    animation: spin 1s linear infinite;
}

.spinner-message {
    font-size: 16px;
    font-weight: 700;
    color: #12304b;
}

/* Ensure top alignment for gridview cells */
.modern-gridview th,
.modern-gridview td {
    vertical-align: top !important;
}

/* Also enforce for common inline/inline-block children inside cells */
.modern-gridview td > *,
.modern-gridview th > * {
    vertical-align: top !important;
    display: inline-block; /* keep flow but allow vertical-align to apply */
}

/* Fallback for any table cells generated without the class on the table */
table.modern-gridview td,
table.modern-gridview th {
    vertical-align: top !important;
}