/* ═══════════════════════════════════════════════════════════════
   ACCESS RULES — Digital Rust
   ═══════════════════════════════════════════════════════════════ */

.access-control-management { padding: var(--dr-space-sm); }

.access-rules-intro {
    margin-bottom: var(--dr-space-lg);
    border-bottom: var(--dr-border-subtle);
    padding-bottom: var(--dr-space-md);
}

.access-rules-intro h3 { margin-top: 0; margin-bottom: 10px; }

.info-box {
    background-color: var(--dr-surface-elevated);
    border: 1px solid var(--dr-dark-packet);
    border-top: 2px solid var(--dr-accent);
    padding: 10px 15px; margin-top: 15px;
    border-radius: var(--dr-radius);
    display: flex; align-items: flex-start; gap: 10px;
}

.info-box i { color: var(--dr-accent); margin-top: 3px; }
.info-box p { margin: 0; font-size: 0.9em; }

.list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.list-header h4 { margin: 0; }

.access-rules-list { display: flex; flex-direction: column; gap: var(--dr-space-sm); }

.access-rule-item {
    display: flex; align-items: center;
    background-color: var(--dr-surface-elevated);
    border: var(--dr-border);
    border-radius: var(--dr-radius);
    padding: var(--dr-space-md); gap: var(--dr-space-lg);
}

.rule-icon { font-size: 1.5em; width: 40px; text-align: center; }
.rule-content { flex: 1; }

.rule-header { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.rule-title { font-size: 0.9em; }

.rule-access-badge {
    font-size: var(--dr-text-xs);
    font-family: var(--dr-font-mono);
    padding: 2px 8px;
    border-radius: var(--dr-radius-sm);
    background-color: var(--dr-surface-highlight);
    border: 1px solid var(--dr-dark-packet);
}

.rule-subtitle { font-size: 0.9em; color: var(--dr-text-tertiary); margin-bottom: var(--dr-space-xs); }
.rule-groups { display: flex; flex-wrap: wrap; gap: var(--dr-space-xs); }

.group-tag {
    font-size: 0.8em;
    background-color: rgba(var(--dr-accent-rgb), 0.1);
    color: var(--dr-accent);
    padding: 2px 6px;
    border-radius: var(--dr-radius-sm);
}

.rule-actions { display: flex; gap: var(--dr-space-xs); }

.rule-action-btn {
    background: none; border: none;
    color: var(--dr-text-tertiary);
    cursor: pointer; padding: 5px;
    border-radius: var(--dr-radius-sm);
}

.rule-action-btn:hover { background-color: var(--dr-surface-highlight); color: var(--dr-text-primary); }
.rule-action-btn.delete-rule:hover { color: var(--dr-amber-alert); background-color: rgba(191, 87, 71, 0.1); }

/* Access Rule Dialog */
.access-rule-dialog .dialog-container { width: 700px; max-width: 95%; padding-top: 0; }

.folder-picker-container {
    border: var(--dr-border);
    border-radius: var(--dr-radius);
    height: 150px; overflow-y: auto;
    margin-bottom: 10px;
    background-color: var(--dr-surface-elevated);
    padding: 10px;
}

.folder-tree-item {
    padding: 4px 8px; cursor: pointer;
    border-radius: var(--dr-radius-sm);
    display: flex; align-items: center; gap: 8px;
}

.folder-tree-item:hover { background-color: var(--dr-surface-highlight); }

.folder-tree-item.selected {
    background-color: rgba(var(--dr-accent-rgb), 0.1);
    color: var(--dr-accent); font-weight: bold;
}

.folder-tree-item .folder-icon { color: var(--dr-text-tertiary); }
.folder-tree-item.selected .folder-icon { color: var(--dr-accent); }

.selected-folder-display { font-size: 0.9em; color: var(--dr-text-tertiary); }

.separator-line { height: 1px; background-color: var(--dr-dark-packet); margin: 20px 0; }

.groups-input-container {
    border: var(--dr-border);
    border-radius: var(--dr-radius);
    padding: 10px;
    background-color: var(--dr-surface-elevated);
}

.selected-groups { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; min-height: 28px; }

.group-tag-removable {
    background-color: rgba(var(--dr-accent-rgb), 0.1);
    color: var(--dr-accent); padding: 2px 8px;
    border-radius: var(--dr-radius-sm);
    font-size: 0.9em; display: flex; align-items: center; gap: 5px;
}

.group-tag-removable .remove-group { cursor: pointer; font-weight: bold; opacity: 0.7; }
.group-tag-removable .remove-group:hover { opacity: 1; }

.add-group-wrapper { display: flex; gap: 5px; }

.add-group-wrapper input {
    flex: 1; padding: 6px 10px;
    border: 2px solid var(--dr-surface-highlight);
    border-radius: var(--dr-radius);
    background-color: var(--dr-surface-base);
    color: var(--dr-text-primary);
}

.text-muted { color: var(--dr-text-tertiary); font-size: 0.9em; }

.rule-path {
    font-family: var(--dr-font-mono);
    background-color: var(--dr-surface-elevated);
    padding: 2px 4px; border-radius: var(--dr-radius-sm);
}

.match-type { color: var(--dr-text-tertiary); margin-right: 5px; display: inline-block; width: 20px; text-align: center; }
.match-text { color: var(--dr-text-tertiary); font-size: 0.9em; }

@media (max-width: 600px) {
    .access-rule-item { flex-wrap: wrap; gap: 10px; }
    .rule-content { flex: 1 1 calc(100% - 60px); min-width: 0; }
    .rule-actions { flex-basis: 100%; justify-content: flex-end; padding-top: 8px; margin-top: 5px; border-top: var(--dr-border-subtle); }
    .rule-header { flex-wrap: wrap; }
    .rule-title { word-break: break-word; }
    .rule-subtitle { word-break: break-all; }
}