/* ========================================
   EXISTING CUSTOM STYLES - DO NOT MODIFY
   ======================================== */

.custom-register {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0.5rem auto;
    padding: 0.5rem;
}

.custom-login {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0.5rem auto;
    padding: 0.5rem;
}

.custom-heading {
    color: #6ea700;
    margin-bottom: 0.5rem;
    text-align: left;
}

.custom-input {
    border: 2px solid #6ea700;
    background-color: #ffffff;
    color: #333;
    border-radius: 6px;
}

    .custom-input:focus {
        border-color: #6ea700;
        box-shadow: 0 0 6px #ccff66;
    }

.custom-links {
    margin-top: 1rem;
    text-align: center;
}

    .custom-links a {
        color: #6ea700;
        text-decoration: none;
        margin: 0 0.5rem;
    }

        .custom-links a:hover {
            text-decoration: underline;
        }

/* base */
button.btn.lg-btn,
a.btn.lg-btn,
input.btn.lg-btn {
    display: inline-block;
    padding: 0.55rem 1rem;
    border: 2px solid #2f5e00 !important;
    border-radius: 8px;
    background-color: #5fa800 !important;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

    /* hover + focus */
    button.btn.lg-btn:hover,
    a.btn.lg-btn:hover,
    input.btn.lg-btn:hover,
    button.btn.lg-btn:focus,
    a.btn.lg-btn:focus,
    input.btn.lg-btn:focus {
        background-color: #6ea700 !important;
        border-color: #6ea700 !important;
        color: #ffffff !important;
    }

    /* optional: nicer focus ring */
    button.btn.lg-btn:focus,
    button.btn.lg-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(110, 167, 0, 0.35) !important;
    }

.roles-heading {
    margin-bottom: 6px;
}

.full-height-grid {
    height: calc(100vh - 350px); /* Increased from 200px to account for bulk panel */
}

    .full-height-grid .k-grid-content {
        height: auto !important;
    }

/* ========================================
   BULK CREATE PARTICIPANTS - NEW STYLES
   HIGHLY SPECIFIC - WON'T CONFLICT
   ======================================== */

/* Main panel container - scoped to #bulkCreatePanel */
#bulkCreatePanel.bulk-create-panel {
    background-color: #f9ffe6;
    border: 2px solid #6ea700;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px rgba(110, 167, 0, 0.15);
}

/* Heading inside bulk create panel only */
#bulkCreatePanel .bulk-create-heading {
    color: #6ea700;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Form container inside bulk create panel only */
#bulkCreatePanel .bulk-create-form {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

/* Form groups inside bulk create panel only */
#bulkCreatePanel .bulk-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    /* Labels inside bulk form groups only */
    #bulkCreatePanel .bulk-form-group label {
        color: #2f5e00;
        font-weight: 500;
        font-size: 0.95rem;
    }

/* Input fields inside bulk create panel only */
#bulkCreatePanel input.bulk-input {
    border: 2px solid #6ea700;
    background-color: #ffffff;
    color: #333;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    min-width: 200px;
}

    #bulkCreatePanel input.bulk-input:focus {
        border-color: #6ea700;
        box-shadow: 0 0 6px #ccff66;
        outline: none;
    }

/* Number input specific width */
#bulkCreatePanel input.bulk-input-number {
    min-width: 100px;
}

/* Kendo DropDownList inside bulk create panel only */
#bulkCreatePanel .k-dropdown {
    border: 2px solid #6ea700;
    border-radius: 6px;
    min-width: 200px;
}

    #bulkCreatePanel .k-dropdown:focus,
    #bulkCreatePanel .k-dropdown.k-state-focused {
        border-color: #6ea700;
        box-shadow: 0 0 6px #ccff66;
    }

/* Message div inside bulk create panel only */
#bulkCreatePanel #bulkCreateMessage {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 6px;
    display: none;
}

    #bulkCreatePanel #bulkCreateMessage.success {
        background-color: #e6ffe6;
        border: 1px solid #6ea700;
        color: #2f5e00;
    }

    #bulkCreatePanel #bulkCreateMessage.error {
        background-color: #ffe6e6;
        border: 1px solid #dc3545;
        color: #721c24;
    }