/* Settings Module Styles */
.settings-container {
    width: 100%;
    height: 100%;
}

.settings-header {
    margin-bottom: var(--spacing-lg);
}

.settings-header h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--spacing-xs);
}

.settings-header p {
    color: var(--gray-600);
}

.settings-layout {
    display: flex;
    height: calc(100% - 80px);
    background-color: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.settings-sidebar {
    width: 280px;
    flex-shrink: 0;
    background-color: var(--gray-100);
    border-right: 1px solid var(--gray-200);
    overflow-y: auto;
}

.settings-nav {
    padding: var(--spacing-md) 0;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.settings-nav-item i {
    font-size: 1.1rem;
    width: 24px;
    margin-right: var(--spacing-md);
    color: var(--gray-600);
    transition: color var(--transition-fast);
}

.settings-nav-item span {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-700);
    transition: color var(--transition-fast);
}

.settings-nav-item:hover {
    background-color: rgba(67, 97, 238, 0.05);
}

.settings-nav-item:hover i,
.settings-nav-item:hover span {
    color: var(--primary-color);
}

.settings-nav-item.active {
    background-color: rgba(67, 97, 238, 0.1);
}

.settings-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--primary-color);
}

.settings-nav-item.active i,
.settings-nav-item.active span {
    color: var(--primary-color);
    font-weight: 600;
}

.settings-nav-item .badge {
    margin-left: var(--spacing-sm);
    background-color: var(--error);
}

.settings-content {
    flex: 1;
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.settings-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
}

.settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.settings-section h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--gray-800);
}

.settings-form-container {
    max-width: 800px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.feature-toggle {
    background-color: var(--gray-100);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
}

.feature-toggle:hover {
    background-color: var(--gray-200);
}

.feature-description {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* User Management */
.search-filter-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.filter-container {
    display: flex;
    gap: var(--spacing-md);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-circle);
    background-color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: var(--font-size-lg);
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 600;
    color: var(--gray-900);
}

.user-email {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    background-color: var(--gray-200);
    color: var(--gray-700);
}

.role-admin {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
}

.role-pastor {
    background-color: rgba(var(--secondary-color-rgb), 0.1);
    color: var(--secondary-color);
}

.invite-user-container,
.edit-user-container {
    padding: var(--spacing-md);
    max-width: 500px;
}

.danger-zone {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    border: 1px solid var(--error);
    border-radius: var(--border-radius-md);
    background-color: rgba(224, 49, 49, 0.05);
}

.danger-zone h4 {
    color: var(--error);
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-md);
}

/* Permissions */
.user-permissions-container,
.role-permissions-container {
    padding: var(--spacing-md);
}

.user-permissions-header,
.role-permissions-header {
    margin-bottom: var(--spacing-lg);
}

.permissions-note {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    background-color: var(--gray-100);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

.permissions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.permission-module {
    background-color: var(--gray-100);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
}

.permission-module h4 {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-md);
}

.permission-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-sm);
}

/* Pending Members */
.pending-members-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.pending-member-card {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.pending-member-info {
    display: flex;
    gap: var(--spacing-md);
}

.pending-member-details {
    flex: 1;
}

.pending-member-details h4 {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-xs);
}

.pending-member-message {
    background-color: var(--gray-100);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

.pending-member-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Community Settings */
.invite-code-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.invite-code-value {
    background-color: var(--gray-100);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-family: monospace;
    font-size: var(--font-size-lg);
    letter-spacing: 2px;
    font-weight: 600;
}

/* Roles and Positions */
.roles-explanation {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    background-color: var(--gray-100);
    border-radius: var(--border-radius-md);
}

.roles-explanation i {
    color: var(--info);
    font-size: var(--font-size-lg);
    margin-top: 3px;
}

.roles-explanation p {
    flex: 1;
    margin: 0;
}

.roles-section {
    margin-bottom: var(--spacing-xl);
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.role-card {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    padding: var(--spacing-md);
}

.role-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.role-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--gray-200);
    background-color: var(--gray-50);
}

.role-header h5 {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    font-size: var(--font-size-md);
}

.role-description {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    min-height: 80px;
}

.role-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-top: 1px solid var(--gray-200);
}

.role-admin {
    border-color: var(--primary-color);
}

.role-admin .role-header {
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

/* Appearance */
.logo-upload-container {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.current-logo {
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-100);
    border: 1px dashed var(--gray-300);
    border-radius: var(--border-radius-md);
}

.current-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--gray-500);
}

.logo-placeholder i {
    font-size: 2rem;
}

.logo-upload-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    justify-content: center;
}

.theme-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.theme-option {
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm);
}

.theme-option:hover,
.theme-option.active {
    background-color: rgba(67, 97, 238, 0.1);
}

.theme-preview {
    width: 100%;
    height: 80px;
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--gray-300);
    overflow: hidden;
}

.theme-default {
    background: linear-gradient(to bottom, #4361ee 30%, #f8f9fa 30%);
}

.theme-dark {
    background: linear-gradient(to bottom, #4361ee 30%, #252526 30%);
}

.theme-light {
    background: linear-gradient(to bottom, #4361ee 30%, #ffffff 30%);
}

.theme-custom {
    background: linear-gradient(135deg, #4361ee, #f72585);
}

.color-pickers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.color-picker label {
    display: block;
    margin-bottom: var(--spacing-xs);
}

.color-picker input[type="color"] {
    width: 100%;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-sm);
}

/* Backup & Restoration */
.backup-info {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    background-color: var(--gray-100);
    border-radius: var(--border-radius-md);
}

.backup-info i {
    color: var(--info);
    font-size: var(--font-size-lg);
    margin-top: 3px;
}

.backup-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.backup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-md);
}

.backup-item-name {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
}

.backup-item-details {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.backup-item-details span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.backup-item-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.backup-upload-container {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px dashed var(--gray-300);
    border-radius: var(--border-radius-md);
    background-color: var(--gray-50);
    text-align: center;
}

#selected-file-name {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

/* System Logs */
.logs-filter {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--gray-100);
    border-radius: var(--border-radius-md);
    flex-wrap: wrap;
}

.logs-table {
    width: 100%;
    border-collapse: collapse;
}

.logs-table th, 
.logs-table td {
    padding: var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.logs-table th {
    background-color: var(--gray-100);
    font-weight: 600;
}

.log-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.log-type-auth {
    background-color: rgba(51, 154, 240, 0.1);
    color: var(--info);
}

.log-type-members {
    background-color: rgba(55, 178, 77, 0.1);
    color: var(--success);
}

.log-type-events {
    background-color: rgba(246, 173, 85, 0.1);
    color: var(--warning);
}

.log-type-settings {
    background-color: rgba(108, 117, 125, 0.1);
    color: var(--gray-700);
}

.log-type-system {
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary-color);
}

.logs-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.log-details {
    padding: var(--spacing-md);
}

.log-detail-item {
    margin-bottom: var(--spacing-md);
    display: flex;
}

.log-detail-label {
    font-weight: 600;
    width: 120px;
    flex-shrink: 0;
}

.log-detail-value {
    flex: 1;
}

.log-detail-json {
    background-color: var(--gray-100);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-family: monospace;
    font-size: var(--font-size-xs);
    white-space: pre-wrap;
    margin: 0;
}

/* Integrations */
.integrations-info {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    background-color: var(--gray-100);
    border-radius: var(--border-radius-md);
}

.integrations-info i {
    color: var(--info);
    font-size: var(--font-size-lg);
    margin-top: 3px;
}

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.integration-card {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    padding: var(--spacing-md);
}

.integration-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.integration-icon {
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary-color);
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

.integration-info h4 {
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-md);
}

.integration-info p {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    min-height: 40px;
}

.integration-status {
    margin-bottom: var(--spacing-md);
}

.integration-actions {
    margin-top: auto;
}

.custom-integration-section {
    margin-top: var(--spacing-xl);
}

.api-key-header,
.webhook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.api-key-header h5,
.webhook-header h5 {
    margin: 0;
    font-size: var(--font-size-md);
}

.api-keys-list,
.webhooks-list {
    margin-bottom: var(--spacing-xl);
}

.api-keys-list table,
.webhooks-list table {
    width: 100%;
    border-collapse: collapse;
}

.api-keys-list th,
.api-keys-list td,
.webhooks-list th,
.webhooks-list td {
    padding: var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.api-keys-list th,
.webhooks-list th {
    background-color: var(--gray-100);
    font-weight: 600;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .settings-layout {
        flex-direction: column;
        height: auto;
    }
    
    .settings-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
    }
    
    .settings-nav {
        display: flex;
        overflow-x: auto;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .settings-nav-item {
        white-space: nowrap;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .settings-content {
        padding: var(--spacing-md);
    }
    
    .features-grid,
    .roles-grid,
    .integrations-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .search-filter-container {
        flex-direction: column;
    }
    
    .search-container {
        width: 100%;
    }
    
    .filter-container {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .logs-filter {
        flex-direction: column;
        align-items: stretch;
    }
    
    .backup-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .backup-item-actions {
        margin-top: var(--spacing-md);
        align-self: flex-end;
    }
    
    .logo-upload-container {
        flex-direction: column;
    }
}