/* _content/Dmfr.ResourceCatalog.WebApp/Components/Layout/MainLayout.razor.rz.scp.css */
/* _content/Dmfr.ResourceCatalog.WebApp/Components/Pages/Admin.razor.rz.scp.css */
/* Admin.razor.css */

body[b-d4m23ab15b] {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    margin: 0;
    padding: 20px;
}

.admin-panel[b-d4m23ab15b] {
    max-width: 1200px;
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.main-header[b-d4m23ab15b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

    .main-header h1[b-d4m23ab15b] {
        font-size: 2em;
        margin: 0;
    }

.main-buttons[b-d4m23ab15b] {
    display: flex;
    gap: 10px;
}

    .main-buttons button[b-d4m23ab15b],
    .tab-buttons button[b-d4m23ab15b] {
        padding: 10px 20px;
        border: 1px solid #d9534f;
        cursor: pointer;
        font-weight: bold;
        border-radius: 5px;
        transition: background-color 0.3s, color 0.3s;
    }

    .main-buttons button[b-d4m23ab15b] {
        background-color: #fff;
        color: #d9534f;
    }

        .main-buttons button.active[b-d4m23ab15b] {
            background-color: #d9534f;
            color: #fff;
        }

.tab-buttons[b-d4m23ab15b] {
    display: flex;
    gap: 5px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

    .tab-buttons button[b-d4m23ab15b] {
        border: none;
        background-color: #f0f0f0;
        color: #333;
        border-radius: 5px 5px 0 0;
        padding: 10px 20px;
    }

        .tab-buttons button.active[b-d4m23ab15b] {
            background-color: #fff;
            color: #d9534f;
            border-bottom: 2px solid #d9534f;
        }

        .tab-buttons button:hover:not(.active)[b-d4m23ab15b] {
            background-color: #e9ecef;
        }

.form-section[b-d4m23ab15b] {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

h2[b-d4m23ab15b] {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #d9534f;
}

.form-container[b-d4m23ab15b] {
    display: flex;
    gap: 20px;
}

.sub-forms-container[b-d4m23ab15b] {
    margin-top: 20px;
}

    .sub-forms-container h3[b-d4m23ab15b] {
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

.subarea-form[b-d4m23ab15b] {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

    .subarea-form input[b-d4m23ab15b] {
        flex: 1;
    }

.add-button[b-d4m23ab15b] {
    background-color: #5cb85c;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

    .add-button:hover[b-d4m23ab15b] {
        background-color: #4cae4c;
    }

.security-groups .list-box[b-d4m23ab15b] {
    height: 100px;
}

.hidden[b-d4m23ab15b] {
    display: none;
}
.toast-popup[b-d4m23ab15b] {
    position: fixed;
    top: 60px;
    left: 45%; /* center horizontally */
    background: #333;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    opacity: 0;
    transform: translateX(-50%) translateY(-20px); /* center + slide */
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 9999;
    pointer-events: none;
    
}

    .toast-popup.show[b-d4m23ab15b] {
        opacity: 1;
        transform: translateY(0);
    }

    .toast-popup.hide[b-d4m23ab15b] {
        opacity: 0;
        transform: translateY(-20px);
    }

/* color variants */
.toast-success[b-d4m23ab15b] {
    background: #28a745;
}

.toast-error[b-d4m23ab15b] {
    background: #dc3545;
}

.toast-info[b-d4m23ab15b] {
    background: #17a2b8;
}

.toast-warning[b-d4m23ab15b] {
    background: #ffc107;
    color: #000;
}
.flex.items-center.space-x-4[b-d4m23ab15b] {
    gap: 1rem !important;
}

/* === SUBAREA TABLE & ACTION BUTTONS (non-conflicting extension) === */
.sub-forms-container .subarea-table[b-d4m23ab15b] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border-radius: 6px;
    overflow: hidden;
}

    .sub-forms-container .subarea-table th[b-d4m23ab15b],
    .sub-forms-container .subarea-table td[b-d4m23ab15b] {
        border: 1px solid #ddd;
        padding: 8px 12px;
        text-align: left;
    }

    .sub-forms-container .subarea-table thead th[b-d4m23ab15b] {
        background-color: #f9f9f9;
        color: #d9534f;
        font-weight: 600;
        border-bottom: 2px solid #d9534f;
    }

    .sub-forms-container .subarea-table tbody tr:nth-child(even)[b-d4m23ab15b] {
        background-color: #fdfdfd;
    }

    .sub-forms-container .subarea-table tbody tr:hover[b-d4m23ab15b] {
        background-color: #f1f1f1;
    }

.sub-forms-container .subarea-actions[b-d4m23ab15b] {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* Button variants consistent with existing theme */
.sub-forms-container .btn-add[b-d4m23ab15b] {
    background-color: #5cb85c;
    color: #fff;
}

.sub-forms-container .btn-edit[b-d4m23ab15b] {
    background-color: #f0ad4e;
    color: #fff;
}

.sub-forms-container .btn-delete[b-d4m23ab15b] {
    background-color: #d9534f;
    color: #fff;
}

.sub-forms-container .btn-add:hover[b-d4m23ab15b] {
    background-color: #4cae4c;
}

.sub-forms-container .btn-edit:hover[b-d4m23ab15b] {
    background-color: #ec971f;
}

.sub-forms-container .btn-delete:hover[b-d4m23ab15b] {
    background-color: #c9302c;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .sub-forms-container .subarea-table th[b-d4m23ab15b],
    .sub-forms-container .subarea-table td[b-d4m23ab15b] {
        font-size: 0.9rem;
        padding: 6px 8px;
    }

    .sub-forms-container .subarea-actions[b-d4m23ab15b] {
        flex-direction: column;
        gap: 4px;
    }
}



/* ... Existing CSS (body, .admin-panel, .main-header, etc.) is here ... */

/* === SUBAREA INPUT FORM ALIGNMENT FIXES (NEW/MODIFIED) === */

.subarea-form-input-row[b-d4m23ab15b] {
    display: flex;
    gap: 15px;
    align-items: flex-end; /* CRITICAL: Aligns button and inputs at the bottom line */
    width: 100%;
    border-bottom: 1px solid #eee;
}

    .subarea-form-input-row .form-group[b-d4m23ab15b] {
        /* CRITICAL: Removes bottom margin from form groups so the button aligns horizontally */
        margin-bottom: 0 !important;
        flex-direction: column;
    }

/* Specific width and height for Area ID input field */
.subarea-readonly-id[b-d4m23ab15b] {
    max-width: 100px;
}

/* Forces the SubArea Name input to take up the remaining space */
.subarea-name-input[b-d4m23ab15b] {
    flex-grow: 1;max-width:300px;
}

/* Ensures input and button heights are uniform for perfect vertical alignment */
.subarea-form-input-row input[b-d4m23ab15b],
.subarea-action-buttons button[b-d4m23ab15b] {
    height: 38px;
    padding: 8px 12px; /* Slight reduction for space efficiency, if needed */
    white-space: nowrap;
}

/* The button container sits at the end of the flex row */
.subarea-action-buttons[b-d4m23ab15b] {
    min-width: 150px; /* Ensure enough space for Save + Cancel */
}
/* === SUBAREA TABLE STYLING (Existing, for visual consistency) === */

.list-box.subarea-list-box[b-d4m23ab15b] {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 20px;
}

.subarea-table[b-d4m23ab15b] {
    width: 100%;
    border-collapse: collapse;
}

    .subarea-table th[b-d4m23ab15b],
    .subarea-table td[b-d4m23ab15b] {
        border: 1px solid #eee;
        padding: 10px 15px;
        text-align: left;
    }

    .subarea-table thead th[b-d4m23ab15b] {
        background-color: #f0f0f0;
        color: #333;
        font-weight: 600;
        border-bottom: 2px solid #ddd;
    }

.subarea-actions[b-d4m23ab15b] {
    display: flex;
    justify-content: space-around;
    gap: 5px;
}

    .subarea-actions .btn-edit[b-d4m23ab15b],
    .subarea-actions .btn-delete[b-d4m23ab15b] {
        padding: 5px 10px;
        border: none;
        border-radius: 3px;
        font-size: 0.9em;
        cursor: pointer;
        transition: background-color 0.2s;
        color: #fff;
    }

    .subarea-actions .btn-edit[b-d4m23ab15b] {
        background-color: #f0ad4e;
    }

    .subarea-actions .btn-delete[b-d4m23ab15b] {
        background-color: #d9534f;
    }

    .subarea-actions .btn-edit:hover[b-d4m23ab15b] {
        background-color: #ec971f;
    }

    .subarea-actions .btn-delete:hover[b-d4m23ab15b] {
        background-color: #c9302c;
    }
.subarea-button-group[b-d4m23ab15b] {
     display: flex;
    gap: 10px;

}
.subarea-label[b-d4m23ab15b] {
    color:#d9534f; vertical-align:central;
}