/* ===========================================
   FORMS.CSS
   Purpose: Standard input, label, and button styling
   =========================================== */

/* Consistent label style for forms */
label.form-label {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

/* Common input, textarea, and select styles */
input[type="text"],
textarea,
select {
    width: 100%;
    padding: 8px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

    /* force same font on drop down controls etc */
    input.form-control,
    textarea.form-control,
    select.form-control {
        font-size: 13px;
        font-family: var(--font-family);
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }

    textarea.form-control.form-control {
        font-size: 13px !important;
    }

/* Primary action button */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Secondary action button (light background) */
.btn-secondary {
    background-color: #f9f9f9;
    color: #333;
    border: 1px solid #ccc;
}

.toast-message {
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 500;
    min-width: 280px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    text-align: center;
}

    /* SUCCESS */
    .toast-message.success {
        background-color: #198754;
       
    }

        .toast-message.success,
        .toast-message.success *,
        .toast-message.success .text-success,
        .toast-message.success .text-muted,
        .toast-message.success i {
            color: #ffffff !important;
            font-size: 15px !important;
        }


    /* ERROR */
    .toast-message.error {
        background-color: #dc3545; 
    }

        .toast-message.error,
        .toast-message.error *,
        .toast-message.error .text-danger,
        .toast-message.error .text-muted,
        .toast-message.error i {
            color: #ffffff !important;
            font-size: 15px !important;
        }


    /* WARNING ✅ */
    .toast-message.warning {
        background-color: #fff3cd;
        color: #fff;
        border-left: 5px solid #ffc107;
    }

    /* INFO */
    .toast-message.info {
        background-color: #cff4fc;
        color: #055160;
        border-left: 5px solid #0dcaf0;
    }


/* Checkbox style for consistent layout */
.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.3em;
    vertical-align: middle;
    border: 1px solid #ccc;
    border-radius: 0.25em;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    position: relative;
}

    .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

.form-check-label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-left: 0.4rem;
    vertical-align: middle;
}

input[type="checkbox"].styled-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    margin-top: 4px;
}

.e-multi-select-wrapper {
    max-height: 32px !important;
    overflow-y: auto !important; /* adds scroll instead of expansion */
    box-sizing: border-box;
}

.form-label.required::after {
    content: " *"; /* Adds the asterisk after the label text */
    color: #E60023; /* A clean, sharp red */
    font-weight: 600; /* Matches your existing label font-weight */
    padding-left: 2px; /* A tiny bit of space */
}

.text-dangermsg {
    color: #E60023; /* A clean, sharp red */
    font-size: 13px; /* A bit smaller than the label */
    font-weight: 500;
    margin-top: 0.3rem; /* Adds a little space below the input */
    display: block; /* Ensures it takes its own line */
}

.org-status-toggle {
    display: flex;
    align-items: center;
    gap: 6px; 
}


.status-switch {
    position: relative;
    display: inline-block;
    width: 32px; 
    height: 16px; 
}

    .status-switch input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }

    .status-switch .slider {
        position: absolute;
        inset: 0;
        cursor: pointer;
        background-color: #dc3545; 
        transition: background-color 0.25s ease;
        border-radius: 999px;
    }

      
        .status-switch .slider::before {
            content: "";
            position: absolute;
            width: 12px;
            height: 12px;
            left: 2px;
            top: 2px;
            background-color: #fff;
            border-radius: 50%;
            transition: transform 0.25s ease;
        }

   
    .status-switch input:checked + .slider {
        background-color: #28a745; 
    }

        .status-switch input:checked + .slider::before {
            transform: translateX(16px);
        }


.status-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

    .status-label.active {
        color: #28a745;
    }

    .status-label.inactive {
        color: #dc3545;
    }

.fixed-height {
    height: 44px !important;
    line-height: 44px !important;
}

/*Readonly-Email*/
.readonly-email.e-input-group,
.readonly-email.e-control-wrapper {
    background-color: #e9ecef !important;
}


.readonly-email .e-input[readonly] {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    padding: 0 !important;
    text-indent: 0 !important;
}


.readonly-email input.e-input {
    padding: 0 !important;
}

input.fixed-height[readonly] {
    padding-left: 10px;
}

.e-input,
.e-input-group input,
.e-float-input input {
    padding-left: 0 !important;
}

.org-ddl.ddl-readonly.e-disabled .e-input-group-icon,
.org-ddl.ddl-readonly.e-disabled .e-ddl-icon {
    display: none !important;
}