/*
© 2025 Sharon Aicler (saichler@gmail.com)

Layer 8 Ecosystem is licensed under the Apache License, Version 2.0.
You may obtain a copy of the License at:

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/* ============================================ */
/* SYS MODULE - Security Styles                 */
/* ============================================ */

/* Checkbox list for role assignment */
.l8sys-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--layer8d-border, #e2e8f0);
    border-radius: 6px;
    padding: 8px;
    background: var(--layer8d-bg-secondary, #f7fafc);
}

.l8sys-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}

.l8sys-checkbox-item:hover {
    background: var(--layer8d-bg-hover, #edf2f7);
}

.l8sys-checkbox-item input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.l8sys-checkbox-item label {
    cursor: pointer;
    margin: 0;
    font-weight: normal;
}

/* Nested table for rules / credential items */
.l8sys-nested-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.l8sys-nested-table th,
.l8sys-nested-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--layer8d-border, #e2e8f0);
    font-size: 13px;
}

.l8sys-nested-table th {
    background: var(--layer8d-bg-secondary, #f7fafc);
    font-weight: 600;
    color: var(--layer8d-text-secondary, #4a5568);
}

.l8sys-nested-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.l8sys-nested-table-header span {
    font-weight: 600;
    font-size: 13px;
    color: var(--layer8d-text-secondary, #4a5568);
}

/* Rule row display */
.l8sys-rule-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--layer8d-border, #e2e8f0);
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--layer8d-bg-secondary, #f7fafc);
}

.l8sys-rule-row .l8sys-rule-info {
    flex: 1;
}

.l8sys-rule-row .l8sys-rule-id {
    font-weight: 600;
    font-size: 13px;
}

.l8sys-rule-row .l8sys-rule-details {
    font-size: 12px;
    color: var(--layer8d-text-secondary, #718096);
    margin-top: 2px;
}

/* Allow / Deny tags */
.l8sys-tag-allow {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: var(--layer8d-success-bg);
    color: var(--layer8d-success);
}

.l8sys-tag-deny {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: var(--layer8d-error-bg);
    color: var(--layer8d-error);
}

/* Key-value row for actions / attributes */
.l8sys-kv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.l8sys-kv-row select,
.l8sys-kv-row input {
    flex: 1;
}

.l8sys-kv-row .l8sys-remove-btn {
    background: var(--layer8d-error, #e53e3e);
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.l8sys-kv-row .l8sys-remove-btn:hover {
    opacity: 0.85;
}

/* Password toggle */
.l8sys-input-with-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
}

.l8sys-input-with-toggle input {
    flex: 1;
}

.l8sys-toggle-btn {
    padding: 4px 12px;
    border: 1px solid var(--layer8d-border, #e2e8f0);
    border-radius: 4px;
    background: var(--layer8d-bg-secondary, #f7fafc);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}

.l8sys-toggle-btn:hover {
    background: var(--layer8d-bg-hover, #edf2f7);
}

/* Masked value display */
.l8sys-masked-value {
    font-family: monospace;
    letter-spacing: 2px;
    color: var(--layer8d-text-secondary, #718096);
}

/* Tag for roles display */
.layer8d-tag {
    display: inline-block;
    padding: 2px 8px;
    margin: 1px 2px;
    border-radius: 4px;
    font-size: 12px;
    background: var(--layer8d-bg-secondary, #edf2f7);
    color: var(--layer8d-text, #2d3748);
}